前端如何低門檻開發iOS、Android、小程式多端應用
現如今跨平臺開發技術已不是什麼新鮮話題了，在市面上也有一些開源的框架可供選擇，然而技術成熟、產品服務健全的平臺並不多，其中也不乏推陳出新的框架值得關注。
比如最近使用的AVM，由APICloud迭代推出的多端開發框架，基於JavaScript，相容多語法，如果是Vue、React的使用者，可直接上手，沒什麼學習成本，具備虛擬DOM，可一次編寫多端渲染；主要是APICloud上線已有7年，相對已經成熟，所以我把自己的一些認知和實踐結合AVM官方文件的內容做了一下整理，希望能對需要使用跨平臺開發技術的開發者有所幫助。
為什麼學習AVM框架？
結合AVM官網的介紹和我自己的一些實踐經驗，我總結了一系列AVM的特性，我想這些內容足以讓你主動去學習AVM框架了。
- 一套程式碼可編譯為對應Android 、iOS 、微信小程式、iOS 輕App、H5端的安裝包或程式碼包。
- 相容APICloud2.0技術棧，這意味著平臺上上千款Android iOS原生模組可供使用。或者在老專案裡部分引入3.0的技術，對APP區域性進行優化。
- 原生引擎渲染。如果使用 avm.js 進行開發，App 將使用無 webView 的原生引擎 3.0 進行渲染，所有元件及檢視與 Android & iOS 系統原生元件和檢視百分百對齊。
- 類Vue語法和相容 React JSX。有Vue或React基礎的使用者可以很快上手。
- 元件化開發，提升程式碼複用率。
AVM中的頁面介紹：
AVM中的頁面稱為stml頁面，一個典型的 stml 檔案程式碼如下：
1. <template> 2. <view> 3. <view class="header"> 4. <text>{title}</text> 5. </view> 6. <view class="content"> 7. <text>{content}</text> 8. </view> 9. <view class="footer"> 10. <text>{footer}</text> 11. </view> 12. </view> 13. </template> 14. <style> 15. .header { 16. height: 45px; 17. } 18. .content { 19. flex-direction:row; 20. } 21. .footer { 22. height: 55px; 23. } 24. </style> 25. <script> 26. export default { 27. name: 'api-test', 28. 29. apiready(){ 30. console.log("Hello APICloud"); 31. }, 32. 33. data(){ 34. return { 35. title: 'Hello App', 36. content: 'this is content', 37. footer: 'this is footer' 38. } 39. } 40. } 41. </script>
資料繫結
從上面程式碼段中可以看到資料繫結方式為{變數},同時支援雙大括號、單大括號將變數或表示式包起來，可以用於繫結文字內容或元素屬性。
事件繫結
監聽事件有兩種方式。
使用 on 監聽：
使用 v-on 指令以及縮寫方式監聽：
<text @click="doThis">Click me!
事件處理方法
事件的處理方法需要在 methods 中定義，方法預設包含一個引數，可以通過該引數獲取 detail、currentTarget 物件等。
1. <template>
2. <text data-name="avm" onclick="doThis">Click me!</text>
3. </template>
4. <script>
5. export default {
6. name: 'test',
7. methods: {
8. doThis(e){
9. api.alert({
10. msg:e.currentTarget.dataset.name
11. });
12. }
13. }
14. }
15. </script>
事件處理方法也可以使用模板的方式，如：
view 是通用容器元件，內部可以放置任意元件。預設佈局方式為flex佈局。
• 注意不要直接在 view 內新增文字，新增文字使用 text 元件。
text 元件用於顯示文字資訊。
1. <template>
2. <scroll-view class="main" scroll-y>
3. <text class="text">普通文字</text>
4. <text class="text bold">粗體文字</text>
5. <text class="text italic">斜體文字</text>
6. <text class="text shadow">Text-shadow 效果</text>
7. </scroll-view>
8. </template>
9. <style>
10. .main {
11. width: 100%;
12. height: 100%;
13. }
14. .text {
15. height: 30px;
16. font-size: 18px;
17. }
18. .bold {
19. font-weight:bold;
20. }
21. .italic {
22. font-style:italic;
23. }
24. .shadow {
25. text-shadow:2px 2px #f00;
26. }
27. </style>
28. <script>
29. export default {
30. name: 'test'
31. }
32. </script>
image 元件用於顯示圖片。
button 元件定義一個按鈕。
input 元件定義一個輸入框。
swiper 定義滑動檢視，支援上下或左右滑動。其中只可放置 swiper-item 元件。
scroll-view 定義滾動檢視。
若需要在垂直方向滾動，則需要指定高度；若在水平方向滾動，則需要指定寬度，否則可能無法顯示。
ist-view 定義可複用內容的豎向滾動檢視，可以優化記憶體佔用和渲染效能，支援下拉重新整理和上拉載入。可使用 scroll-view 的基本屬性。
list-view 裡面可放置 cell、list-header、list-footer、refresh 等元件，使用 cell 元件作為每項顯示內容。
frame 元件用於顯示一個frame，效果同 openFrame 方法一致。
frame-group 元件用於顯示一個 frame 組，裡面的每個 frame 為一個獨立的頁面。
元件化開發
定義一個元件：
使用stml定義一個元件 api-test.stml：
1. <template>
2. <view class='header'>
3. <text>{this.data.title}</text>
4. </view>
5. </template>
6. <script>
7. export default {
8. name: 'api-test',
9. data(){
10. return {
11. title: 'Hello APP'
12. }
13. }
14. }
15. </script>
16. <style scoped>
17. .header{
18. height: 45px;
19. }
20. </style>
引用元件：
在其他頁面或元件引用。
1. // app-index.stml:
2.
3. <template>
4. <view class="app">
5. <img src="./assets/logo.png" />
6. <api-test></api-test>
7. </view>
8. </template>
9. <script>
10. import './components/api-test.stml'
11.
12. export default {
13. name: 'app-index',
14. data: function () {
15. return {
16. title: 'Hello APP'
17. }
18. }
19. }
20. </script>
21. <style>
22. .app {
23. text-align: center;
24. margin-top: 60px;
25. }
26. </style>
元件生命週期
avm.js元件規範符合Web Components規範，生命週期遵循標準Web Components元件的生命週期。同時相容Vue元件的生命週期。
所有支援的生命週期事件
| 生命週期函式名 | 觸發時機 |
|---|---|
| apiready | 頁面執行時環境準備完畢&渲染完畢。當頁面未引入元件時，該事件等同於installed。 |
| install | 元件被掛載到真實DOM（或App原生介面）之前 |
| installed | 元件被掛載到真實DOM（或App原生介面）之後。在頁面級別中，該事件等同於apiready。 |
| render | 元件開始渲染 |
| uninstall | 元件從真實DOM（或App原生介面）移除之前 |
| beforeUpdate | 元件更新之前 |
| updated | 元件更新完成 |
| beforeRender | 元件開始渲染之前 |
『每個頁面都應實現apiready，並在apiready後處理業務邏輯；installed屬於元件級別生命週期，在頁面載入元件過程中即被觸發，其觸發時機早於apiready』
總體而言，APICloud這款開發框架，比較趨近於原生的程式設計體驗，通過簡潔的模式來分離應用的使用者介面、業務邏輯和資料模型，適合高度定製化的專案，另外APICloud網站上提供了很多模組、例項和工具原始碼的下載，感興趣的前端小夥伴不妨去試試。