官方揭秘!同時兼容iOS、Android、微信小程序的UI引擎
在應用開發過程中,一些效果使用純前端h5實現體驗比較差,為此開發者會選擇相應的原生UI模塊來替代,原生模塊性能和體驗好,但目前存在的一個問題就是界面可定制性比較差,不能百分百滿足需求。為此,結合原生模塊的性能和體驗以及前端開發的靈活性,APICloud推出了純翻譯模式的UI引擎,並在由APICloud聯合極客邦科技舉辦的“AI時代的移動技術革新”大會上發布了這一新品。
註:純翻譯模式的UI引擎文檔查看鏈接https://docs.apicloud.com/UI-templet/UI-templet-api
純翻譯模式的UI引擎和普通的UI類的模塊使用流程一樣,將小程序UI組件的路徑傳入模塊方法,模塊解析加載後顯示出小程序UI頁面。目前,APICloud官方(網址:https://www.apicloud.com/)已經在模塊Store裏面提供了幾種常用的小程序UI組件模塊,開發者可以直接下載到本地使用,方便修改裏面的樣式效果。選擇小程序的語法,可以讓廣大熟悉小程序開發的開發者更快上手,快速開發出想要的UI效果。
純翻譯模式的UI引擎具體使用流程如下
一、添加UITemplate模塊
和使用其它模塊一樣,首先需要在控制臺模塊裏面添加UITemplate模塊,如圖:
二、添加小程序UI組件
01小程序包結構及目錄介紹
在使用小程序UI模塊之前,我們需要了解小程序包的結構,如下圖所示,一個小程序包裏面有app.json、app.wxss、app.js等文件,可以在這些文件裏面做一些全局的配置,一個小程序包裏面可以包含多個小程序UI組件,這些UI組件需要在app.json文件中註冊配置。更多詳情訪問微信官方小程序開發文檔https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html
app.json文件的簡單配置:
{
"pages": [
"pages/uitalertview/alertview",
"pages/uitconfirmview/confirmview"
]
}
而一個小程序UI頁面由四個文件組成,它們的文件名相同,只是擴展名不一樣。
02添加小程序UI組件
開發者可以自己開發小程序UI模塊,也可以直接去模塊Store裏面找到官方提供的小程序UI模塊,下載到本地,將其放置到代碼包裏面對應的目錄下使用。
03運行小程序UI模塊
這裏我們以在自定義loader中使用為例,添加好UITemplate模塊,然後編譯自定義loader,下載安裝到手機。
在頁面中調用UITemplate模塊的初始化方法,傳入小程序包所在的根目錄:
function apiready() {
var UITemplate = api.require(‘UITemplate‘);
var path = ‘widget://uitemplate‘;
UITemplate.init({
path: path
});
}
使用openView方法顯示小程序UI組件:
var UITemplate = api.require("UITemplate");
UITemplate.openView({
name: ‘confirm‘,
url: ‘pages/uitconfirmview/confirmview‘,
rect: {
x: 0,
y: 0,
h: ‘auto‘,
w: ‘auto‘
},
level: ‘alert‘,
data: {
pageParam: {
title: { content: ‘APICloud 溫馨提示‘ },
msg: { content: ‘賬戶余額不足,紅包功能無法使用!‘ },
buttons: [{ content: ‘返回‘, style: ‘color: #000;‘ },{ content: ‘充值‘ }]
}
}
},function(ret,err){
if(ret && ‘buttonClick‘ == ret.type ){
UITemplate.closeView({name: ‘confirm‘});
// 此處可填寫回調代碼邏輯
var index = ret.buttonIndex;
}
});
特別說明:目前該模塊引擎在Android端還不適配,預計在1月15日前可完成適配,歡迎大家體驗!
官方揭秘!同時兼容iOS、Android、微信小程序的UI引擎