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

<template>    <view class="area-cascader_container">        <view class="area-cascader_box">            <view class="area-cascader_box-header">                <text class="area-cascader_box-header-label">请抉择所在地区</text>                <text class="area-cascader_box-header-button" @click="closeCascader">×</text>            </view>            <view class="area-cascader_box-nav">                <view class="area-cascader_box-nav-item" v-for="(item,index) in result" data-index={index} @click="setSelect">                    <text class='area-cascader_box-nav-item--selected' v-if="this.data.selectIndex==index && item.value">{item.text}</text>                    <text class='area-cascader_box-nav-item--unselected' v-else-if="this.data.selectIndex==index && !item.value">请抉择</text>                    <text class='area-cascader_box-nav-item--result' v-else-if="this.data.selectIndex!=index && item.value">{{item.text}}</text>                </view>            </view>            <scroll-view class="area-cascader_pane" scroll-y="">                <view class="area-cascader_pane-option" v-for="(item,index) in selectArea" data-value={item.value} data-text={item.text} @click="setSelectItem">                    <text>{item.text}</text>                </view>            </scroll-view>        </view>    </view></template><script>    export default {        name: 'area-cascader',        props:{            options:Array        },        install(){            this.data.result[0]={value:null,text:''};        },        installed(){            this.data.selectArea = this.props.options;        },        data() {            return{                result:[],                selectIndex:0,                selectArea:[]            }        },        methods: {            setSelectItem(e){                if(this.data.selectIndex<3){                    this.data.result[this.data.selectIndex].value=e.currentTarget.dataset.value;                    this.data.result[this.data.selectIndex].text=e.currentTarget.dataset.text;                    //追加下一级                    this.data.selectIndex+=1;                                    if(this.data.selectIndex<3){                        this.data.result[this.data.selectIndex]={value:null,text:''};                        var parentOption=this.data.selectArea.filter(item=>item.value==e.currentTarget.dataset.value);                        this.data.selectArea = parentOption[0].children;                    }                                    if(this.data.selectIndex==3){                        this.fire('finish',this.data.result);                    }                }                            },            closeCascader(){                this.fire('close','');            },            setSelect(e){                this.data.selectIndex=e.currentTarget.dataset.index;                if(this.data.selectIndex==0){                    this.data.selectArea = this.props.options;                }                else if(this.data.selectIndex==1){                    var parentOption=this.props.options.filter(item=>item.value==this.data.result[0].value);                    this.data.selectArea = parentOption[0].children;                }            }        }    }</script><style>    .area-cascader_container {        position: absolute;        height: 100%;        width: 100%;        background-color: rgba(0,0,0,0.1);    }    .area-cascader_box{        align-items: center;        position: absolute;        bottom: 0;        width: 100%;        height: 70%;        background-color: #ffffff;        border-top-left-radius: 30px;        border-top-right-radius: 30px;    }    .area-cascader_box-header{        width: 100%;        flex-flow: row nowrap;        justify-content: space-between;        align-items: center;        padding: 10px 15px 0 15px;    }    .area-cascader_box-header-label{        font-size: 18px;    }    .area-cascader_box-header-button{        font-size: 40px;        color: #ccc;    }    .area-cascader_box-nav{        width: 100%;        flex-flow: row nowrap;        justify-content: flex-start;        align-items: center;        padding: 15px;    }    .area-cascader_box-nav-item{        box-sizing: border-box;        align-items: center;        /* background-color: #452334; */        margin-right: 20px;        justify-content: center;    }    .area-cascader_box-nav-item--selected{        font-size: 16px;        padding-bottom: 10px;            border-bottom: 3px solid #49c916;    }    .area-cascader_box-nav-item--unselected{        font-size: 16px;        padding-bottom: 10px;        border-bottom: 3px solid #49c916;    }    .area-cascader_box-nav-item--result{        font-size: 16px;        padding-bottom: 13px;        border-bottom: 0;    }    .area-cascader_pane{        padding-left: 15px;        padding-right: 10px;        width: 100%;        height: 80%;    }    .area-cascader_pane-option{            flex-flow: row nowrap;        align-items: flex-start;        justify-content: space-between;        padding: 5px 0;    }</style>

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

<template>    <view class="page">        <safe-area></safe-area>        <text style="padding:10px;font-size:20px;">地区级联抉择</text>        <view class="box" @click="openCascader">            <text>地区</text>            <text>{selectArea}</text>            <image class="more" src={ico} mode="widthFix"></image>        </view>        <area-cascader            :options="areaValue"            onfinish="getArea"            onclose="closeCascader"            v-if="isShowCascader"        >        </area-cascader>    </view></template><script>    import '../../components/area-cascader.stml'    import {areaList,getTree,getArea,getProvince,getCity} from '../../utils/areaList.js'    export default {        name: 'demo-area-cascader',        apiready(){            this.data.areaValue = getTree();            // getCity('130000');            // getProvince();            // getArea('130200');        },        data() {            return{                selectArea:'',                areaValue:[],                isShowCascader:false,                ico:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAZRJREFUeF7t2z1KxEAYgOF3D2Old7AVsdlirS3sBEE9gB5gYQtLC3utxZPYeRgZ2CKEXSGT+X4nqUIgkPfJzBQZsqLzY9V5PwvAMgLsBDbAGjgHPoAHi0exnALvwM0g+hO41kawBNgCT6NgdQRLgAvg+8AbV0WwBCjtZR0o8398qCFYA5gjeAAwRfACYIbgCcAEwRuAOoJHAFUErwBqCJ4BVBC8A4gjRAAQRYgCIIYQCUAEIRpAc4SIAE0RogI0Q4gM0AQhOsBshAwAsxCyAFQjZAKoQsgGMBkhI8B/CK/A/fATdFaAYwi/wEnPAD/AWQ8AxzZcdsBjdoBJu03Z1oBJ8WUkZAKYHJ8JoCo+C0B1fAaAWfHRAWbHRwZoEh8VoFl8RICm8dEAmsdHAhCJjwIgFh8BQDTeO4B4vGcAlXivAGrxHgFU470BqMd7AjCJ9wJgFu8BwDTeGuAS+Bp+ot6fq/0rYA3wBtyOAFTjrQFegOcBgHq8NcDV/qepU6DE3x2YDuKXMu0LVGEtAFVsiW7qfgT8AYVYcEHJaD3BAAAAAElFTkSuQmCC',                            }        },        methods: {            getArea(e){                // console.log(JSON.stringify(e));                this.data.selectArea = e.detail[0].text+'/'+e.detail[1].text+'/'+e.detail[2].text;                this.data.isShowCascader = false;            },            openCascader(e){                this.data.isShowCascader = true;            },            closeCascader(e){                this.data.isShowCascader = false;            }        }    }</script><style>    .page {        height: 100%;        background-color: #ffffff;    }    .box{        flex-flow: row nowrap;        justify-content: space-between;        align-items: center;        margin: 10px;        border-radius: 5px;        background-color: #f0f0f0;        padding: 10px;    }    .more{        width: 20px;    }</style>

如果在AVM组件库中,没有找到理论我的项目中须要的组件,能够本人尝试封装组件。

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