低門檻開發iOS、Android、小程序應用的前端框架詳解

Posted on by

現如今跨平臺開發技術已不是什麼新鮮話題瞭，在市面上也有一些開源的框架可供選擇，然而技術成熟、產品服務健全的平臺並不多，其中也不乏推陳出新的框架值得關註。

比如最近使用的AVM，由APICloud迭代推出的多端開發框架，基於JavaScript，兼容多語法，如果是Vue、React的用戶，可直接上手，沒什麼學習成本，具備虛擬DOM，可一次編寫多端渲染；主要是APICloud上線已有7年，相對已經成熟，所以我把自己的一些認知和實踐結合AVM官方文檔的內容做瞭一下整理，希望能對需要使用跨平臺開發技術的開發者有所幫助。

為什麼學習AVM框架？

結合AVM官網的介紹和我自己的一些實踐經驗，我總結瞭一系列AVM的特性，我想這些內容足以讓你主動去學習AVM框架瞭。

1. 一套代碼可編譯為對應Android 、iOS 、微信小程序、iOS 輕App、H5端的安裝包或代碼包。

2. 兼容APICloud2.0技術棧，這意味著平臺上上千款Android iOS原生模塊可供使用。或者在老項目裡部分引入3.0的技術，對APP局部進行優化。

3. 原生引擎渲染。如果使用 avm.js 進行開發，App 將使用無 webView 的原生引擎 3.0 進行渲染，所有組件及視圖與 Android & iOS 系統原生組件和視圖百分百對齊。

4. 類Vue語法和兼容 React JSX。有Vue或React基礎的用戶可以很快上手。

5. 組件化開發，提升代碼復用率。

AVM中的頁面介紹：

AVM中的頁面稱為stml頁面，一個典型的 stml 文件代碼如下：

<template>  
    <view>  
        <view class="header">  
            <text>{title}</text>  
        </view>  
        <view class="content">  
            <text>{content}</text>  
        </view>  
        <view class="footer">  
            <text>{footer}</text>  
        </view>  
    </view>  
</template>  
<style>  
    .header {  
      height: 45px;  
    }  
   .content {  
      flex-direction:row;  
    }  
    .footer {  
      height: 55px;  
    }  
</style>  
<script>  
    export default {  
       name: 'api-test',  
         
       apiready(){  
           console.log("Hello APICloud");  
       },  
 
        data(){  
           return {  
               title: 'Hello App',  
                content: 'this is content',  
                footer: 'this is footer'  
           }  
       }  
    }  
</script>

數據綁定

從上面代碼段中可以看到數據綁定方式為{變量},同時支持雙大括號、單大括號將變量或表達式包起來，可以用於綁定文本內容或元素屬性。

事件綁定

監聽事件有兩種方式。

使用 on 監聽：

<text onclick="doThis">Click me!</text>

使用 v-on 指令以及縮寫方式監聽：

<text v-on:click="doThis">Click me!</text>
<text @click="doThis">Click me!</text>

事件處理方法

事件的處理方法需要在 methods 中定義，方法默認包含一個參數，可以通過該參數獲取 detail、currentTarget 對象等。

<template>  
    <text data-name="avm" onclick="doThis">Click me!</text>  
</template>  
<script>  
   export default {  
        name: 'test',  
        methods: {  
           doThis(e){  
               api.alert({  
                   msg:e.currentTarget.dataset.name  
                });  
            }  
        }  
    }  
</script>

事件處理方法也可以使用模板的方式，如：

<text onclick={this.doThis}>Click me!</text>

默認組件舉幾個例子說明，更多組件可查看官方文檔。

view 是通用容器組件，內部可以放置任意組件。默認佈局方式為flex佈局。

註意不要直接在 view 內添加文本，添加文本使用 text 組件。

text 組件用於顯示文本信息。

<template>  
    <scroll-view class="main" scroll-y>  
       <text class="text">普通文本</text>  
      <text class="text bold">粗體文本</text>  
        <text class="text italic">斜體文本</text>  
        <text class="text shadow">Text-shadow 效果</text>  
   </scroll-view>  
</template>  
<style>  
    .main {  
       width: 100%;  
       height: 100%;  
   }  
   .text {  
       height: 30px;  
       font-size: 18px;  
    }  
    .bold {  
        font-weight:bold;  
    }  
   .italic {  
        font-style:italic;  
    }  
   .shadow {  
        text-shadow:2px 2px #f00;  
   }  
</style>  
<script>  
   export default {  
       name: 'test'  
    }  
</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：

<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>

引用組件：

在其他頁面或組件引用。

// app-index.stml:  
  
<template>    
    <view class="app">    
       <img src="./assets/logo.png" />    
       <api-test></api-test>   
   </view>    
</template>  
<script>  
    import './components/api-test.stml'    
      
   export default {    
        name: 'app-index',    
        data: function () {    
           return {  
                title: 'Hello APP'  
           }  
        }    
    }    
</script>    
<style>    
   .app {     
       text-align: center;    
        margin-top: 60px;    
    }    
</style>

使用JS定義一個組件 / 頁面 ，參考官方文檔。

組件生命周期

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網站上提供瞭很多模塊、實例和工具源碼的下載，感興趣的前端小夥伴不妨點擊這裡嘗試下吧。

到此這篇關於低門檻開發iOS、Android、小程序應用的前端框架詳解的文章就介紹到這瞭,更多相關低門檻開發前端框架內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：