AVM(Application-View-Model)前端组件化开发模式基于规范Web Components组件化思维,提供蕴含虚构DOM和Runtime的编程框架avm.js以及多端对立编译工具,齐全兼容Web Components规范,同时兼容Vue和React语法糖编写代码,编译工具将Vue和React相干语法糖编译转换为avm.js代码。
基于规范 Web Components 组件化思维,兼容 Vue / React 语法个性,通过一次编码,别离编译为 App、小程序代码,实现多端开发。
组件性能介绍
身份证号码虚构输出键盘,可用以身份证号码输出时应用,可对输出的身份证号码进行验证,反对15位和18位。
示例展现
组件开发
组件文件
id-card-keyboard.stml
<template> <view class="id-card-keyboard_container"> <view class="id-card-keyboard_box"> <view class="id-card-keyboard_box-header"> <text class="id-card-keyboard_box-header-label">{idCard}</text> <text class="id-card-keyboard_box-header-button" @click="finish">实现</text> </view> <safe-area> <view class="id-card-keyboard_box-item-container"> <view class="id-card-keyboard_box-item" v-for="item in numbers"> <view class="id-card-keyboard_box-item-label" v-if="item.type=='number'" data-key={item.key} @click="getNumber"> <text style="font-size:28px;">{item.key}</text> </view> <view class="id-card-keyboard_box-item-label" v-else-if="item.type=='ico'" @click="delNumber"> <image class="id-card-keyboard_box-item-ico" src={item.key} mode="widthFix"></image> </view> </view> </view> </safe-area> </view> </view></template><script> import checkIdcard from './id-card-check.js' export default { name: 'id-card-keyboard', data() { return{ numbers:[{type:'number',key:'1'},{type:'number',key:'2'},{type:'number',key:'3'},{type:'number',key:'4'},{type:'number',key:'5'},{type:'number',key:'6'},{type:'number',key:'7'} ,{type:'number',key:'8'},{type:'number',key:'9'},{type:'number',key:'X'},{type:'number',key:'0'},{type:'ico',key:'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'}], numberIndex:0, resultNumber:[], idCard:'' } }, methods: { getNumber(e){ // console.log(JSON.stringify(e)); if(this.data.numberIndex<18){ this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;//兼容IOS和安卓 this.data.numberIndex += 1; this.data.idCard = this.data.resultNumber.join(''); } }, delNumber(e){ this.data.numberIndex -= 1; if(this.data.numberIndex>=0){ this.data.resultNumber.splice(this.data.numberIndex,1); this.data.idCard = this.data.resultNumber.join(''); } }, finish(){ if(!checkIdcard(this.data.idCard)){ api.confirm({ title: '提醒', msg: '您输出的身份证号码不合乎规定,是否持续应用?', buttons: ['确定', '勾销'] }, (ret, err)=> { var index = ret.buttonIndex; if(index==1){ this.fire('setNumber',this.data.idCard); } }); } else{ this.fire('setNumber',this.data.idCard); } } } }</script><style> .id-card-keyboard_container { position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,0); } .id-card-keyboard_box{ align-items: center; position: absolute; bottom: 0; width: 100%; background-color: #f0f0f0; border-top-left-radius: 30px; border-top-right-radius: 30px; } .id-card-keyboard_box-item-container{ flex-flow: row wrap; justify-content: space-around; align-items: center; padding: 10px; box-sizing: border-box; } .id-card-keyboard_box-item{ flex-basis: 33%; box-sizing: border-box; padding: 5px; } .id-card-keyboard_box-item-label{ display: flex; background-color: #ffffff; padding: 5px; border-radius: 5px; width: 100%; height: 48px; align-items: center; justify-content: center; box-sizing: border-box; } .id-card-keyboard_box-item-ico{ width: 60px; } .id-card-keyboard_box-header{ width: 100%; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 10px 15px 0 15px; } .id-card-keyboard_box-header-label{ font-size: 18px; } .id-card-keyboard_box-header-button{ font-size: 18px; color: #327432; }</style>
组件应用阐明
本组件是基于AVM.js开发的多端组件,通常同时适配Android、iOS、小程序、H5 , 具体反对状况还要看每个组件的阐明文档。
首先须要登录开发平台,http://www.apicloud.com。 通过管制平台右上方的模块Store进入,而后抉择AVM组件。
找到对应模块点击进入。
也可通过搜寻栏,通过组件名称关键字进行检索。
进入模块详情,点击立刻下载下载残缺的组件安装包。
组件压缩包的文件目录如下
也可通过查看模块文档 来理解模块的具体参数,援用的原生模块,注意事项等。
具体在我的项目中的应用步骤是,第一步将压缩文件中的easy-id-card-keyboard.stml文件拷贝到我的项目的components目录,通过浏览readme.md 文档和查看demo示例文件 demo-id-card-keyboard.stml在须要开发的stml文件中,引入组件文件,实现页面的开发。
id-card-check.js文件,可依据理论我的项目放到对应的文件夹中,我放在了utils这个文件夹中。本插件基于ES6语法封装的,分装了checkIdcard办法校验身份证号码的有效性。
身份证号码的验证应用了正则验证,验证不通过会进行提醒,可忽视验证提醒间接应用。
demo-id-card-keyboard.stml
<template> <view class="page"> <safe-area></safe-area> <text class="number-box" @click="openNumberBoard">身份证号码:{idCard}</text> <id-card-keyboard onsetNumber="getNumber" v-if="isShowNUmberBoard"> </id-card-keyboard> </view></template><script> import '../../components/id-card-keyboard.stml' export default { name: 'demo-id-card-keyboard', apiready(){//like created }, data() { return{ isShowNUmberBoard:false, idCard:'' } }, methods: { closeNumberBoard(e){ this.data.isShowNUmberBoard = false; }, openNumberBoard(e){ this.data.isShowNUmberBoard = true; }, getNumber(e){ // console.log(JSON.stringify(e)); this.data.idCard = e.detail; this.data.isShowNUmberBoard=false; } } }</script><style> .page { height: 100%; background-color: #ffffff; } .number-box{ font-size: 20px; }</style>
如果在AVM组件库中,没有找到理论我的项目中须要的组件,能够本人尝试封装组件。
这是组件化开发的在线文档地址