AVM（Application-View-Model）前端組件化開發模式基於標準Web Components組件化思想，提供包含虛擬DOM和Runtime的編程框架avm.js以及多端統一編譯工具，完全兼容Web Components標準，同時兼容Vue和React語法糖編寫代碼，編譯工具將Vue和React相關語法糖編譯轉換為avm.js代碼。
基於標準 Web Components 組件化思想，兼容 Vue / React 語法特性，通過一次編碼，分別編譯為 App、小程序代碼，實現多端開發。
組件功能介紹
虛擬數字鍵盤，支持數字隨機，支持自定義輸出數字內容的長度，自定義是否支持雙向綁定，支持二次輸入操作。可以為密碼、驗證碼輸入時使用。
示例展示
組件開發
組件文件
number-keyboard.stml
<template>
<view class="number-keyboard_container">
<view class="number-keyboard_box">
<view class="number-keyboard_box-item-container">
<view class="number-keyboard_box-item" v-for="item in numbers">
<view class="number-keyboard_box-item-label" data-key={item} @click="getNumber">
<text style="font-size:28px;">{item}</text>
</view>
</view>
<view class="number-keyboard_box-item">
<view class="number-keyboard_box-item-label" @click="closeBoard">
<image class="number-keyboard_box-item-ico" src={closeBase64} mode="widthFix"></image>
</view>
</view>
<view class="number-keyboard_box-item">
<view class="number-keyboard_box-item-label" data-key='0' @click="getNumber">
<text style="font-size:28px;">0</text>
</view>
</view>
<view class="number-keyboard_box-item">
<view class="number-keyboard_box-item-label" @click="delNumber">
<image class="number-keyboard_box-item-ico" src={backBase64} mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'number-keyboard',
props:{
limitLengh:Number,
recnetNumber:Array,
isRandom:Boolean,
isModel:Boolean
},
installed(){
if(this.props.isRandom){
this.data.numbers.sort(this.randomsort);
}
if(this.props.isModel){
this.data.resultNumber=this.props.recnetNumber;
this.data.numberIndex = this.props.recnetNumber.length;
}
},
data() {
return{
numbers:['1','2','3','4','5','6','7','8','9'],
resultNumber:[],
numberIndex:0,
closeBase64:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAADLElEQVRo3u2Zz0tVQRTHP/lMreiXEEREPKIg29gmSJIQWgYVoQhtSqJalv0D0SKQdq0KClpXUNaupE0JZoZWZhL9cNNvkS5mlpbaYs7tnZ7vao83b+67Mh+43PO+9zh35jhnftwBj8fj8Xg8Hg+wHfgAzJTo1QWsjztIc9FfAkGa7+q22eBFlgM4AVQAAXBDKlxm+R35Mi3tPACsAqaA8pjrFMkoJmh9cVckB31St1GbhdruHdNyr3ARkTwJ6zRdUClZuOjKm4GDYt8CnojdBGzF9Ijz0rB1wFF53o8ZBgDqgd1iXwbeY/75J4AVwAvgujzfBuwT+x7Q6aCN1ggwaTKgtCYyA/gppfcovUq0BqU9Vr5tSm8QrUppPcq3VekXlD4gWmCzwS4G+F8R9o8cvjq9JpU9EeGTq6yvyv5S7Ma5SOFHwHFgMXBX6aeBWsy6MQzQIHAMqMSkZcg1YFj8BkWbAJoxaf/UQTucEDA7hV1zmEwKn1F6YlPYNR9dvsxFCm8AGjFj1wxmUVsG3ASGxKcZ2Ai8Ba6KtgnYL3Y78Fr5poEx4AowjlmitGCGiTqXAbRNwOwUbiT3luqI8hkWbURpLcq3RekjSk+LVh3xjrPq7xKbwt//Q/8s908Rz7WtfX7LfUou5+1zkcIPgJ1i6xTuVz7NwFoygQToAHaJ/TzLdw0mqKH/N2AHZm0YBrKCTNonhoD4Z+EoEpvCCxqXs3AKuAM8E30PUEPusSsfyoBXwG35XQ0cwszI94GHDtpojYC5Z2G9F+6mOB9Ja5V+UemJTeFxZY8pe9jiO3RZer8dFLtxLlK4E/M5qpx/e+ZJ4Bzws8DyqzD76ZAhzIy8FHjpoH1WCfCzcEGk5D5ZUCnFIaxTqqBSsrCdwkvkngYuUVqHSmn5XYrHDX/pIP5jy/mu3riDNBfVmLVX3EGKut5gzmGsYftcOKQOWEn+i+Qp4B3RJ2erMWe7+ZLC7J27yHyAsEKxAlgINZiPBDNZ+nLMGUehy54FTSVmSxaVgvVxVzAp9DI7eHvjrlSSWIY52wiD1xp3hZLIFkzw2uOuSJKpw/RGj8fj8XgWHn8A4dKLb2WSDzAAAAAASUVORK5CYII=',
backBase64:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAC/UlEQVRo3u2aO2gUURSGv1k1PlFXUHwUQZEYlUACPiM2KbQSKxEkBEtbHyDxAWqjoK2gqIjYWJpC0gQLQUWjoBJUtBOMiWJMwJiYiGtxdtlzx1lndr07w4X7wcBm59xzcv655752wOPxeDwej8dJggxjtwGHgHagsQ7+fwHvgJvA1QzzrAv7gUKK12NgQdZJ22J3yuKVruf1SCbtEu4Cbqm/nyEl9hKYBGZYivMbyCMP66j6/gxwNuWcrXEMs0fcSynuKRXzY9Yi1EoHpnivUoydRyaUAvApayFqYQtSUiXxPgPLUoyfA0aKsYeyFqNaOjHFewisSNCuHRm7ZiaM0wQcB1ZH3JsNfMXBHniAv5cSSQgo95gBYH6M/XJggso9bI7y54yAzZjijZB8xg+AMZKNlw3Aa2U7HGHjnIAbgO8qqTFgY5U+9mI+gNsRNguBF5jirYuwc0rAFsozXqkEV9boaxvmg3iAjGcArcCguvcIWFLBj1MCvlVJvQHm/qe/9cC48nkf2E55zCsAH2J8OCPgVsyyW2PJbwuVt2fjwNqY9s4IeBpzuWKTDmSM0+L1A6sStK2rgDmLvvLq86Dl/7MfGVs1ozi8NYuik3Lv+GbR7yxErKgSfkL8AYQzJbwolNxFCz4D4KnyOQQcDsXpjfHhjIAAR7AnYiNSuiVf75FZGWSXM63u3fiHH6cEBBFNi3i3Bh9NmLuRAWBeyKYNmMKcuKLK2TkBAS5hininyvYDqu0UsuuIohX4qWz7ImycFBDkwFSL2F1F21KbaWBzjG34rDGMswICXA4ldyVhuz2I4M0J7XcBJ4GdEfecFhDgPKaIPSnHD4AvOHqgWiI8Jl5LMXYD8oOV0wKCrNe0iCdSitulYjpZwppwOfcCO5BeEiDLEBtXDlgMHMRc6ly3nVAWr3acQw4eNMPFRG3tzQuIgPpthB/I4cNoBjlb5wLpvpUwAWyqRyK23gSolj7kxGYpUgUB0gNtXpPFGD3APuS3E4/H4/F4PB6Pxwp/AGH7f53PGS6/AAAAAElFTkSuQmCC'
}
},
methods: {
randomsort(a,b){
return Math.random()>0.5 ? -1 : 1;//用Math.random()函數生成0~1之間的隨機數與0.5比較，返回-1或1
},
closeBoard(e){
this.fire('close','');
},
getNumber(e){
if(this.props.isModel){
if(this.data.numberIndex<this.props.limitLengh){
this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;//兼容IOS和安卓
this.data.numberIndex += 1;
this.fire('setNumber',this.data.resultNumber);
}
}
else{
this.fire('setNumber',[e.currentTarget.dataset.key]);
}
},
delNumber(e){
if(this.props.isModel){
this.data.numberIndex -= 1;
if(this.data.numberIndex>=0){
this.data.resultNumber.splice(this.data.numberIndex,1);
this.fire('setNumber',this.data.resultNumber);
}
}
else{
this.fire('delNumber','');
}
}
}
}
</script>
<style>
.number-keyboard_container {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0);
}
.number-keyboard_box{
align-items: center;
position: absolute;
bottom: 0;
width: 100%;
background-color: #cccccc;
}
.number-keyboard_box-item-container{
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
padding: 10px;
}
.number-keyboard_box-item{
flex-basis: 33%;
box-sizing: border-box;
padding: 5px;
}
.number-keyboard_box-item-label{
display: flex;
background-color: #ffffff;
padding: 5px;
border-radius: 5px;
width: 100%;
height: 48px;
align-items: center;
justify-content: center;
}
.number-keyboard_box-item-ico{
width: 60px;
}
</style>
組件使用説明
本組件是基於AVM.js開發的多端組件，通常同時適配Android、iOS、小程序、H5 , 具體支持情況還要看每個組件的説明文檔。
首先需要登錄開發平台，。 通過控制平台右上方的模塊Store進入，然後選擇AVM組件。
找到對應模塊進入
也可通過搜索欄，通過組件名稱關鍵字進行檢索。
進入模塊詳情，點擊立即下載下載完整的組件安裝包。
組件壓縮包的文件目錄如下
也可通過查看模塊文檔 來了解模塊的具體參數，引用的原生模塊，注意事項等。
具體在項目中的使用步驟是，第一步將壓縮文件中的number-keyboard.stml文件拷貝到項目的components目錄，通過閲讀readme.md 文檔和查看demo示例文件 demo-number-keyboard.stml在需要開發的stml文件中，引入組件文件，完成頁面的開發。
關於隨機數字鍵盤的原理是運用了數組的sort排序。
sort() 方法，有一個可選參數，必須是函數，供它調用。那麼就是個回調函數咯！😁
回調函數的參數要有兩個：第2個參數的元素肯定在第1個參數的元素前面!
這個方法的排序是看回調函數的返回值：
如果返回值大於 0，則位置互換。
如果返回值小於 0，則位置不變。
第一次比較：7>9，結果為 false，即 return -1，此時 a 會換到 b 前面，即 7 在 9 之前，所以位置互換。
demo-number-keyboard.stml
<template>
<view class="page">
<safe-area></safe-area>
<text class="number-box" @click="openNumberBoard">{isModel?'支持':'不支持'}雙向綁定:{number}</text>
<number-keyboard
:limitLengh="limit"
:recnetNumber="arrNumber"
:isRandom="isRandom"
:isModel="isModel"
onclose="closeNumberBoard"
onsetNumber="getNumber"
ondelNumber="deleteNumber"
v-if="isShowNUmberBoard">
</number-keyboard>
</view>
</template>
<script>
import '../../components/number-keyboard.stml'
export default {
name: 'demo-random-number-keyboard',
apiready(){//like created
},
data() {
return{
isShowNUmberBoard:false,
number:'',
arrNumber:[],
limit:6,
isRandom:false,
isModel:false //是否支持雙向綁定
}
},
methods: {
closeNumberBoard(e){
this.data.isShowNUmberBoard = false;
},
openNumberBoard(e){
this.data.isShowNUmberBoard = true;
},
getNumber(e){
// console.log(JSON.stringify(e));
this.data.arrNumber = e.detail;
this.data.number = e.detail.join('');
},
deleteNumber(e){
api.toast({
msg:'點擊回退、刪除鍵'
})
//可根據需要處理顯示的內容
this.data.number='';
}
}
}
</script>
<style>
.page {
height: 100%;
background-color: #ffffff;
}
.number-box{
font-size: 20px;
}
</style>
如果在AVM組件庫中，沒有找到實際項目中需要的組件，可以自己嘗試封裝組件。
這是組件化開發的在線文檔地址
