YonBuilder移动开发平台 AVM框架 封装虚拟数字键盘组件

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

组件使用说明
本组件是基于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

如果在AVM组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

​ ​这是组件化开发的在线文档地址​