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

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

為什麼學習AVM框架？

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

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

2. 相容APICloud2.0技術棧，這意味著平臺上上千款Android iOS原生模組可供使用。或者在老專案裡部分引入3.0的技術，對APP區域性進行優化。

3. 原生引擎渲染。如果使用 avm. 進行開發，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>  

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

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

<templatwww.cppcns.come>    
    <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元件的生命週期。

所有支援的生命週期事件

生命週期更多詳情 參考官方文件

總體而言，APICloud這款開發框架，比較趨近於原生的體驗，通過簡潔的模式來分離應用的使用者介面、業務邏輯和資料模型，適合高度定製化的專案，另外APICloud上提供了很多模組、例項和工具原始碼的下載，感興趣的前端小夥伴不妨點選這裡嘗試下吧。

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