快捷導(dǎo)航

低門檻開發(fā)iOS、Android、小程序應(yīng)用的前端框架詳解

更新時(shí)間：2021年10月12日 20:31:18 投稿：mrr

結(jié)合AVM官網(wǎng)的介紹和我自己的一些實(shí)踐經(jīng)驗(yàn)，我總結(jié)了一系列AVM的特性，我想這些內(nèi)容足以讓你主動去學(xué)習(xí)AVM框架了

現(xiàn)如今跨平臺開發(fā)技術(shù)已不是什么新鮮話題了，在市面上也有一些開源的框架可供選擇，然而技術(shù)成熟、產(chǎn)品服務(wù)健全的平臺并不多，其中也不乏推陳出新的框架值得關(guān)注。

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

為什么學(xué)習(xí)AVM框架？

結(jié)合AVM官網(wǎng)的介紹和我自己的一些實(shí)踐經(jīng)驗(yàn)，我總結(jié)了一系列AVM的特性，我想這些內(nèi)容足以讓你主動去學(xué)習(xí)AVM框架了。

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

2. 兼容APICloud2.0技術(shù)棧，這意味著平臺上上千款A(yù)ndroid iOS原生模塊可供使用。或者在老項(xiàng)目里部分引入3.0的技術(shù)，對APP局部進(jìn)行優(yōu)化。

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

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

5. 組件化開發(fā)，提升代碼復(fù)用率。

AVM中的頁面介紹：

AVM中的頁面稱為stml頁面，一個(gè)典型的 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>

數(shù)據(jù)綁定

從上面代碼段中可以看到數(shù)據(jù)綁定方式為{變量},同時(shí)支持雙大括號、單大括號將變量或表達(dá)式包起來，可以用于綁定文本內(nèi)容或元素屬性。

事件綁定

監(jiān)聽事件有兩種方式。

使用 on 監(jiān)聽：

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

使用 v-on 指令以及縮寫方式監(jiān)聽：

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

事件處理方法

事件的處理方法需要在 methods 中定義，方法默認(rèn)包含一個(gè)參數(shù)，可以通過該參數(shù)獲取 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>

默認(rèn)組件舉幾個(gè)例子說明，更多組件可查看官方文檔。

view 是通用容器組件，內(nèi)部可以放置任意組件。默認(rèn)布局方式為flex布局。

注意不要直接在 view 內(nèi)添加文本，添加文本使用 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 組件定義一個(gè)按鈕。

input 組件定義一個(gè)輸入框。

swiper 定義滑動視圖，支持上下或左右滑動。其中只可放置 swiper-item 組件。

scroll-view 定義滾動視圖。

若需要在垂直方向滾動，則需要指定高度；若在水平方向滾動，則需要指定寬度，否則可能無法顯示。

ist-view 定義可復(fù)用內(nèi)容的豎向滾動視圖，可以優(yōu)化內(nèi)存占用和渲染性能，支持下拉刷新和上拉加載?？墒褂?scroll-view 的基本屬性。

list-view 里面可放置 cell、list-header、list-footer、refresh 等組件，使用 cell 組件作為每項(xiàng)顯示內(nèi)容。

frame 組件用于顯示一個(gè)frame，效果同 openFrame 方法一致。

frame-group 組件用于顯示一個(gè) frame 組，里面的每個(gè) frame 為一個(gè)獨(dú)立的頁面。

組件化開發(fā)

定義一個(gè)組件：

使用stml定義一個(gè)組件 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定義一個(gè)組件 / 頁面，參考官方文檔。

組件生命周期

avm.js組件規(guī)范符合Web Components規(guī)范，生命周期遵循標(biāo)準(zhǔn)Web Components組件的生命周期。同時(shí)兼容Vue組件的生命周期。

所有支持的生命周期事件

生命周期函數(shù)名	觸發(fā)時(shí)機(jī)
apiready	頁面運(yùn)行時(shí)環(huán)境準(zhǔn)備完畢&渲染完畢。當(dāng)頁面未引入組件時(shí)，該事件等同于installed。
install	組件被掛載到真實(shí)DOM（或App原生界面）之前
installed	組件被掛載到真實(shí)DOM（或App原生界面）之后。在頁面級別中，該事件等同于apiready。
render	組件開始渲染
uninstall	組件從真實(shí)DOM（或App原生界面）移除之前
beforeUpdate	組件更新之前
updated	組件更新完成
beforeRender	組件開始渲染之前

『每個(gè)頁面都應(yīng)實(shí)現(xiàn)apiready，并在apiready后處理業(yè)務(wù)邏輯；installed屬于組件級別生命周期，在頁面加載組件過程中即被觸發(fā)，其觸發(fā)時(shí)機(jī)早于apiready』

生命周期更多詳情參考官方文檔

總體而言，APICloud這款開發(fā)框架，比較趨近于原生的編程體驗(yàn)，通過簡潔的模式來分離應(yīng)用的用戶界面、業(yè)務(wù)邏輯和數(shù)據(jù)模型，適合高度定制化的項(xiàng)目，另外APICloud網(wǎng)站上提供了很多模塊、實(shí)例和工具源碼的下載，感興趣的前端小伙伴不妨點(diǎn)擊這里嘗試下吧。

到此這篇關(guān)于低門檻開發(fā)iOS、Android、小程序應(yīng)用的前端框架詳解的文章就介紹到這了,更多相關(guān)低門檻開發(fā)前端框架內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: