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、小程序代码,实现多端开发。

组件功能介绍
省市区级联选择框,也可用于其他多层级数据的选择,典型场景为省市区选择。

目前场景设定的是3级,可根据自己的实际需求改成2级或者4级或者更多级。

数据源就是典型的树形结构的JSON数组数据。实际代码中我封装了一个关于省市区三级数据的js插件,具体使用方法省市区三级行政区划数据JS插件

示例展示

组件开发-组件文件
area-cascader.stml



组件使用说明
本组件是基于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组件库中,没有找到实际项目中需要的组件,可以自己尝试封装组件。

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

你可能感兴趣的:(YonBuilder移动开发平台 AVM框架 封装省市区级联选择弹框)