当前位置: 首页 > Web前端 > HTML

YonBuilder移动开发平台的AVM框架封装了省市级联选择弹框

时间:2023-03-28 00:02:21 HTML

AVM(Application-View-Model)前端组件化开发模型基于标准的WebComponents组件化思想,提供了包括虚拟DOM和Runtimeavm的编程框架。js和多端统一编译工具,完全兼容WebComponents标准,兼容Vue和React语法糖编写代码,编译工具将Vue和React相关语法糖编译成avm.js代码。基于标准的WebComponents组件化思想,兼容Vue/React语法特性。通过一次编码,分别编译成App和小程序代码,实现多端开发。组件功能介绍省市级联选择框也可以用于其他多级数据的选择。典型的场景是省市的选择。当前场景设置为3级,可根据实际需要更改为2级或4级以上。数据源是典型的树状结构的JSON数组数据。在实际代码中,我封装了一个关于省市三级数据的js插件。具体使用方法为省市三级行政区划数据。JS插件示例组件开发-组件文件区-级联。"area-cascader_container">请选择您的区域×{item.text}请选择{{item.text}}{item.text}组件使用说明该组件是基于AVM.js开发的多端组件,通常同时适配Android、iOS、小程序、H5。具体支持还是可以的要查看各个组件的文档,首先需要登录开发平台http://www.apicloud.com。通过控制平台右上角的模块Store进入,然后选择AVM组件。找到对应的模块后,也可以通过搜索栏和组件名称的关键字进行搜索。输入模块详情,点击立即下载下载完整的组件安装包。组件压缩包文件目录如下。您也可以查看模块文档,了解模块的具体参数、引用的原生模块以及注意事项。在项目中使用的具体步骤如下:第一步将压缩包中的easy-area-cascader.stml文件复制到项目的components目录下,阅读readme.md文档并查看demo示例文件demo-easy-area-cascader.stml导入stml文件中需要开发的组件文件,完成页面的开发。areaList.js文件可以根据实际项目放在相应的文件夹下,我放在utils文件夹下。本插件基于ES6语法进行封装,封装了areaList、getTree、getArea、getCity、getProvince四个方法。这个组件中用到的东西是getTree,它以树状结构返回JSON格式的数据。demo-area-cascader.stml如果在AVM组件库Components中找不到实际需要的项,可以尝试自己封装组件。这是组件开发的在线文档地址