傳統混合移動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提供了更趨近於原生的程式設計體驗，通過簡潔的模型來分離應用的使用者介面、業務邏輯和資料模型，適合高度定製的應用開發，感興趣的前端小夥伴可以來學習嘗試下~