AVM（Application-View-Model）前端组件化开发模式基于规范Web Components组件化思维，提供蕴含虚构DOM和Runtime的编程框架avm.js以及多端对立编译工具，齐全兼容Web Components规范，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相干语法糖编译转换为avm.js代码。
基于规范 Web Components 组件化思维，兼容 Vue / React 语法个性，通过一次编码，别离编译为 App、小程序代码，实现多端开发。
组件性能介绍
验证码输入框组件，可自定义下次点击期待时长，自定义验证码长度，可依据自定义的验证码长度进行输出内容的验证。
组件示例
组件开发
组件文件
verification-code-input.stml
<template> <view class="verification-code"> <input class="code-input" placeholder="输出验证码" keyboard-type="number" oninput="getCode"/> <text v-show="show" class="code-btn" @click="sendCode">获取验证码</text> <text v-show="!show" class="code-btn">{count}s</text> </view></template><script> export default { name: 'verification-code-input', installed(){ }, props:{ limitSecond:Number, limitCode:Number }, data() { return{ show:true, count: 0, timer:null } }, methods: { sendCode(){ //正则验证手机号码 const TIME_COUNT = this.props.limitSecond; if (!this.data.timer) { this.data.count = TIME_COUNT; this.data.show = false; this.data.timer = setInterval(() => { if (this.data.count > 0 && this.data.count <= TIME_COUNT) { this.data.count--; } else { this.data.show = true; clearInterval(this.data.timer); this.data.timer = null; } }, 1000) } /** * 进行发送短信验证码的操作 */ }, getCode(e){ //对验证码进行校验 合乎地位和规定进行输入 if(e.detail.value.length == this.props.limitCode){ let reg= /^[0-9]*$/; if(reg.test(e.detail.value)){ this.fire('setCode',e.detail.value); } else{ api.toast({ msg:'请输出无效的验证码！' }) } } else if(e.detail.value.length > this.props.limitCode){ api.toast({ msg:'请输出'+this.props.limitCode+"位验证码！" }) } } } }</script><style> .verification-code{ flex-flow: row nowrap; margin: 10px 20px; justify-content: space-between; border-bottom: 0.5px solid #f0f0f0; align-items: center; } .code-input{ width: auto; border: none; font-size: 18px; } .code-btn{ color: #1492ff; font-size: 18px; }</style>组件应用阐明
本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体反对状况还要看每个组件的阐明文档。
首先须要登录开发平台，http://www.apicloud.com。 通过管制平台右上方的模块Store进入，而后抉择AVM组件。
找到对应模块进入
也可通过搜寻栏，通过组件名称关键字进行检索。
进入模块详情，点击立刻下载下载残缺的组件安装包。
组件压缩包的文件目录如下
也可通过查看模块文档 来理解模块的具体参数，援用的原生模块，注意事项等
具体在我的项目中的应用步骤是，第一步将压缩文件中的verification-code-input.stml文件拷贝到我的项目的components目录，通过浏览readme.md 文档和查看demo示例文件 demo-verification-code-input.stml在须要开发的stml文件中，引入组件文件，实现页面的开发。
demo-verification-code-input.stml
<template> <view class="page"> <safe-area></safe-area> <verification-code-input limitSecond={seconds} limitCode={codeLen} onsetCode="getCode"></verification-code-input> </view></template><script> import '../../components/verification-code-input.stml' export default { name: 'demo-verification-code-input', apiready(){ }, data() { return{ code:'', seconds:60, codeLen:4 } }, methods: { getCode(e){ console.log(JSON.stringify(e.detail)); this.data.code = e.detail; } } }</script><style> .page { height: 100%; background-color: #ffffff; padding-top: 100px; } .verification-code{ flex-flow: row nowrap; margin: 10px 20px; justify-content: space-between; border-bottom: 0.5px solid #f0f0f0; align-items: center; } .code-input{ width: auto; border: none; font-size: 15px; flex: 1; } .code-btn{ color: #1492ff; font-size: 15px; }</style>如果在AVM组件库中，没有找到理论我的项目中须要的组件，能够本人尝试封装组件。
这是组件化开发的在线文档地址