傳統混合移動App開發模式，通常會使用WebView作為橋接層，但隨着iOS和Android應用商店審核政策日趨嚴格，有時會被錯誤判定為簡單網頁打包成App，上架容易遭到拒絕。
既然可能存在風險，那我們可以不使用WebView，通過其他方式來進行渲染，比如使用APICloud推出的JavaScript跨平台開發框架avm.js，其升級后的App引擎不依賴WebView，提供百分百的原生渲染，可以幫助開發者提升渲染的效率和效果，同時還支持組件化開發，提供可靠的后端支持。此外avm.js與Vue語法類似，並兼容 React JSX，APICloud官網還提供了大量的案例和教程，學習成本低，非常適合開發者快速使用。
渲染效率提升明顯
下方左圖是用avm.js的Grid-View組件實現的列表，右圖是使用WebView渲染HTML頁面實現的列表，可通過GPU呈現模式分析曲線看到藍色，綠色平均線降低很多，表示測量和繪制視圖列表所需要的時間大幅減少。
Grid-View組件代碼舉例：
<template>
<grid-view id="gridView" class="main" column-count="3" aspect-ratio="1" inset="10" scroll-y enable-back-to-top onscrolltolower={this.onscrolltolower}>
<cell class="cell" onclick={this.itemClick}>
<text class="title">{item.title}</text>
</cell>
<list-footer class="footer">
<text>加載中...</text>
</list-footer>
</grid-view></template><style>
.main {
width: 100%;
height: 100%;
}
.cell {
justify-content: center;
align-items: center;
background-color: #5cdfdc;
}
.title {
font-weight: bold;
color: #000;
}
.footer {
justify-content: center;
align-items: center;
height: 44px;
}</style><script>
export default {
name: 'test',
methods:{
apiready() {
this.initData(false);
},
initData(loadMore) {
var that = this;
var skip = that.dataList?that.dataList.length:0;
var dataList = [];
for (var i=0;i<99;i++) {
dataList[i] = {
title: '項目' + (i + skip)
};
// 瀑布流效果
// dataList[i].itemHeight = Math.floor(200 + Math.random()*50);
}
var gridView = document.getElementById('gridView');
if (loadMore) {
that.dataList = that.dataList.concat(dataList);
gridView.insert({
data: dataList
});
} else {
that.dataList = dataList;
gridView.load({
data: dataList
});
}
},
onscrolltolower() {
this.initData(true);
},
itemClick(e) {
api.alert({
msg: '點擊了項：' + e.currentTarget.index
});
}
}
}</script>
組件化開發
avm.js組件豐富，可自定義開發組件，目前提供系統級基礎組件31個，ACT多端框架組件庫和開發者貢獻多端組件120多個。對於開發團隊，隨着項目的不斷深入、迭代、優化，累積沉淀自己的組件庫對於滿足敏捷的項目交付要求和快速的迭代維護要求意義重大。
學習成本低，上手容易
avm.js框架語法和Vue語法類似，並兼容React JSX。如果是Vue、React的用戶的話，將更易上手avm.js，幾乎不需要學習成本。avm.js具備數據驅動特性，編寫直觀簡潔的代碼，可以將數據源綁定到應用用戶界面，降低邏輯復雜性和開發難度，數據變更將自動實時反饋到用戶界面。
- 使用STML定義一個組件 / 頁面
STML組件兼容Vue單文件組件(SFC)規范，使用語義化的HTML模板及對象化JS風格定義組件或頁面。STML最終被編譯為JS組件 / 頁面，渲染到不同終端。
<template>
<view class='header'>
<text>{this.data.title}</text>
</view> </template> <script>
export default {
name: 'api-test',
data(){
return {
title: 'Hello APP'
}
}
}</script><style scoped>
.header{
height: 45px;
}</style>
- 使用JS定義一個組件 / 頁面
JS組件 / 頁面符合Web Components 規范，使用define函數進行組件定義，使用render函數渲染到終端。
avm.define('api-test', class extends Component {
data = {
title: 'Hello APP'
}
css(){
return `.header {
height: 45
}`
}
render() {
return (
<view class='header'>
<text>{this.data.title}</text>
</view>
);
}});
案例及視頻教程
基於提升開發效率的這一目的，avm.js官方頁面提供了App與小程序的實戰開發培訓教程，大量各行業各場景的模板和源碼免費使用，在保障App體驗效果的同時簡化開發流程，提升開發效率。
點餐模版前后端源碼教程
《點餐》項目是一個餐飲商戶單商家堂食下單應用。 主要功能包括瀏覽商家主頁信息、查看推薦菜品、下單商品、取餐等號等功能。 可以適用於小吃快餐餐飲商戶的堂食點單管理，也可以進行稍微二開成為外賣、店鋪或者是虛擬服務等電商小應用。
教育培訓模板
本項目的一個教育培訓服務APP。提供在線瀏覽機構信息、名師風采和課程預約訂購等功能。
模板包含前后端，其中前端代碼使用avm.js多端技術開發，可同時編譯為Android & iOS App以及微信小程序；后端使用APICloud數據雲3.0雲函數自定義接口。
服飾商城模板
本模板為在線服飾商城類型，主要功能包括商品展示、商品搜索、購物車、訂單管理等。
模板包含前后端，其中前端代碼使用avm.js多端技術開發，可同時編譯為Android & iOS App以及微信小程序；后端使用APICloud數據雲3.0雲函數自定義接口。
拼團商城模板說明
本模板為拼團商城類型，主要功能包括商品分類、商品詳情、商品搜索、拼團、訂單管理等。
模板包含前后端，其中前端代碼使用avm.js多端技術開發，可同時編譯為Android & iOS App以及微信小程序；后端使用APICloud數據雲3.0雲函數自定義接口。
后端開發支持
APICloud還為avm.js的使用者提供了服務端開發運維平台，數據雲3.0提供了從后端開發、接口聯調到上線運營維護等一整套方案。
開發者無需考慮數據庫和服務器等基礎設施，無需關心服務器測試環境的搭建，數據的備份及服務擴容等與業務無關的工作，只需關心邏輯本身。通過雲引擎，雲數據庫，雲函數，內置模型、等功能模塊方便用戶快速實現常用的后端功能。通過模型庫復用快速把常用第三方功能引入到自己的項目中，節省開發時間。同時內置了管理后台、API調試等功能，在增加了自己編寫后端服務靈活性的同時方便了前后端開發者的聯調和測試。
數據雲3.0可以實現很多后端常見的場景，例如:
- 一個小程序可以在APICloud上存儲數據並通過自定義接口實現自己的業務邏輯。
- 一個移動app應用可以直接基於雲平台提供的能力完成后端工作。
- 一個網站可以展示來自APICloud上的數據，網站的前端也可以放到APICloud平台。
- 快速開發出項目最小化可行產品來驗證市場。
- 企業內部數字化業務的快速落地。
論壇支持
APICloud官方論壇設有AVM討論區，開發過程中如果有問題可以到論壇搜索，或發帖尋找有經驗的開發者進行討論，還可以及時獲取官方技術的支持。
總體而言，使用avm.js一個技術棧即可同時開發Android & iOS原生App、小程序和iOS輕App，且多端渲染效果統一。avm.js提供了更趨近於原生的編程體驗，通過簡潔的模型來分離應用的用戶界面、業務邏輯和數據模型，適合高度定制的應用開發，感興趣的前端小伙伴可以來學習嘗試下~