APICloud AVM框架 封装通讯录组件

组件"/>

APICloud AVM框架 封装通讯录组件

AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。

组件功能介绍

由于很多项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话功能。

用的技术点是scroll-view中的scrollTo方法。

向组件中传值和监听子组件事件，具体使用请参考官方文档。文档地址

数据格式

[{"zkey": "A","children": [{"name": "安强","phone": "18853889099","zkey": "A"}]
}, {"zkey": "B","children": [{"name": "边亮","phone": "18853889099","zkey": "B"}, {"name": "白菊","phone": "18853889099","zkey": "B"}, {"name": "贺之","phone": "18853889099","zkey": "B"}, {"name": "白梓","phone": "18853889099","zkey": "B"}, {"name": "卜军","phone": "18853889099","zkey": "B"}]
}]

示例展示 

组件开发

组件文件

address-book.stml

<template><view><scroll-view class="page" scroll-y show-scrollbar="false" id="book"><safe-area></safe-area><view class="item" v-for="(item, index) in list" v-show="item.children.length>0"><view class="nav" id={item.zkey}><text class="nav-title">{item.zkey}</text></view><view class="box" v-for="(it, pindex) in item.children" data-phone={it.phone}  @click="takePhone"><image class="avator" src='../../image/avator.png' mode="widthFix"></image><view class="right"><text class="name">{it.name}</text></view></view></view>		</scroll-view><scroll-view class="right-nav" scroll-y show-scrollbar="false"><view class="right-nav-item" data-id={item.zkey} @click="scrollToE" v-for="(item, index) in list"><text class={item.zkey==zIndex?'right-nav-item-on':'right-nav-item-off'}>{item.zkey}</text></view></scroll-view></view>
</template>
<script>export default {name: 'tell',installed(){},props:{list: Array},data() {return{zIndex:''}},methods: {scrollToE(e){var id = e.target.dataset.id;var book = document.getElementById('book');book.scrollTo({view:id})this.data.zIndex = id;},takePhone(e){var phone = e.target.dataset.phone;this.fire('takeCall', phone);}}}
</script>
<style>.page {height: 100%;background-color: #ffffff;}.nav{margin: 0 10px;padding: 0 10px;}.nav-title{font-size: 20px;}.box{flex-flow: row nowrap;justify-content: flex-start;align-items: center;margin: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;}.right{padding-left: 20px;}.bt{flex-flow: row nowrap;justify-content: flex-start;align-items: center;}.bt-position{font-size: 14px;color: #666666;}.bt-part{font-size: 14px;color: #666666;padding-left: 20px;}.right-nav{position: absolute;right: 10px;width: 30px;padding: 30px 0;height: 100%;align-items: center;}.right-nav-item{padding-bottom: 5px;}.right-nav-item-on{color: #035dff;}.right-nav-item-off{color: #666666;}.avator{width: 30px;padding: 5px;}
</style>

组件使用说明

本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。

首先需要登录开发平台，。 通过控制平台右上方的模块Store进入，然后选择AVM组件。

 找到对应模块进入

也可通过搜索栏，通过组件名称关键字进行检索。

进入模块详情，点击立即下载下载完整的组件安装包。  

组件压缩包的文件目录如下

也可通过查看模块文档 来了解模块的具体参数，引用的原生模块，注意事项等。 

具体在项目中的使用步骤是，第一步将压缩文件中的address-book.stml文件拷贝到项目的components目录，通过阅读readme.md 文档和查看demo示例文件 demo-address-book.stml在需要开发的stml文件中，引入组件文件，完成页面的开发。

将静态资源文件夹中的文件放倒项目中对应的位置，然后正确引用即可。

demo-address-book.stml

<template><view class="page"><safe-area></safe-area><tell v-bind:list="bookdata" ontakeCall="takeCall"></tell></view>
</template>
<script>import '../../components/tell.stml'export default {name: 'tellbook',apiready(){//like created},data() {return{bookdata:[{"zkey":"A","children":[{"name":"安强","phone":"18853889099","zkey":"A"}]},{"zkey":"B","children":[{"name":"边玉亮","phone":"18853889099","zkey":"B"},{"name":"白文菊","phone":"18853889099","zkey":"B"},{"name":"步贺之","phone":"18853889099","zkey":"B"},{"name":"白梓蓉","phone":"18853889099","zkey":"B"},{"name":"卜冰军","phone":"18853889099","zkey":"B"}]},{"zkey":"C","children":[{"name":"程建锋","phone":"18853889099","zkey":"C"},{"name":"陈利芳","phone":"18853889099","zkey":"C"},{"name":"陈俊杰","phone":"18853889099","zkey":"C"},{"name":"陈宇豪","phone":"18853889099","zkey":"C"},{"name":"蔡顺江","phone":"18853889099","zkey":"C"},{"name":"曹标","phone":"18853889099","zkey":"C"},{"name":"曹学庆","phone":"18853889099","zkey":"C"},{"name":"蔡相梅","phone":"18853889099","zkey":"C"},{"name":"曹曙成","phone":"18853889099","zkey":"C"},{"name":"车明忠","phone":"18853889099","zkey":"C"},{"name":"陈虎","phone":"18853889099","zkey":"C"},{"name":"陈毅","phone":"18853889099","zkey":"C"},{"name":"陈德","phone":"18853889099","zkey":"C"},{"name":"陈宣祥","phone":"18853889099","zkey":"C"}]},{"zkey":"D","children":[{"name":"翟方斌","phone":"18853889099","zkey":"D"},{"name":"翟建飞","phone":"18853889099","zkey":"D"},{"name":"杜红新","phone":"18853889099","zkey":"D"},{"name":"段晓宁","phone":"18853889099","zkey":"D"},{"name":"段飞鹏","phone":"18853889099","zkey":"D"},{"name":"丁一庭","phone":"18853889099","zkey":"D"},{"name":"邓臣冰","phone":"18853889099","zkey":"D"}]},{"zkey":"E","children":[]},{"zkey":"F","children":[{"name":"范德裕","phone":"18853889099","zkey":"F"},{"name":"樊鑫","phone":"18853889099","zkey":"F"}]},{"zkey":"G","children":[{"name":"郭枝萍","phone":"18853889099","zkey":"G"},{"name":"高亚楠","phone":"18853889099","zkey":"G"},{"name":"高云龙","phone":"18853889099","zkey":"G"},{"name":"郭建祥","phone":"18853889099","zkey":"G"},{"name":"郭洁","phone":"18853889099","zkey":"G"},{"name":"关福勋","phone":"18853889099","zkey":"G"},{"name":"关必武","phone":"18853889099","zkey":"G"},{"name":"高志明","phone":"18853889099","zkey":"G"},{"name":"耿明税","phone":"18853889099","zkey":"G"},{"name":"郭佳","phone":"18853889099","zkey":"G"},{"name":"郭凤兰","phone":"18853889099","zkey":"G"}]},{"zkey":"H","children":[{"name":"何雯","phone":"18853889099","zkey":"H"},{"name":"侯晓宇","phone":"18853889099","zkey":"H"},{"name":"韩美霞","phone":"18853889099","zkey":"H"},{"name":"胡兴隆","phone":"18853889099","zkey":"H"},{"name":"何芝晴","phone":"18853889099","zkey":"H"},{"name":"黄延明","phone":"18853889099","zkey":"H"}]},{"zkey":"I","children":[]},{"zkey":"J","children":[{"name":"江新花","phone":"18853889099","zkey":"J"},{"name":"姜亚如","phone":"18853889099","zkey":"J"},{"name":"焦岁刚","phone":"18853889099","zkey":"J"},{"name":"贾金鹏","phone":"18853889099","zkey":"J"},{"name":"焦海娟","phone":"18853889099","zkey":"J"},{"name":"靳峰","phone":"18853889099","zkey":"J"},{"name":"金军伟","phone":"18853889099","zkey":"J"},{"name":"焦海娟","phone":"18853889099","zkey":"J"},{"name":"解元英","phone":"18853889099","zkey":"J"},{"name":"蒋勇","phone":"18853889099","zkey":"J"}]},{"zkey":"K","children":[{"name":"孔锁燕","phone":"18853889099","zkey":"K"},{"name":"寇嘉男","phone":"18853889099","zkey":"K"},{"name":"柯倪红","phone":"18853889099","zkey":"K"}]},{"zkey":"L","children":[{"name":"李小康","phone":"18853889099","zkey":"L"},{"name":"刘彦","phone":"18853889099","zkey":"L"},{"name":"李春云","phone":"18853889099","zkey":"L"},{"name":"李志广","phone":"18853889099","zkey":"L"},{"name":"李威","phone":"18853889099","zkey":"L"},{"name":"刘飞平","phone":"18853889099","zkey":"L"},{"name":"李志宏","phone":"18853889099","zkey":"L"},{"name":"李海涛","phone":"18853889099","zkey":"L"},{"name":"刘强","phone":"18853889099","zkey":"L"},{"name":"罗海燕","phone":"18853889099","zkey":"L"},{"name":"刘智平","phone":"18853889099","zkey":"L"},{"name":"李雅丽","phone":"18853889099","zkey":"L"},{"name":"刘庆春","phone":"18853889099","zkey":"L"},{"name":"李金城","phone":"18853889099","zkey":"L"},{"name":"李华","phone":"18853889099","zkey":"L"},{"name":"李宏林","phone":"18853889099","zkey":"L"},{"name":"刘军","phone":"18853889099","zkey":"L"},{"name":"罗小春","phone":"18853889099","zkey":"L"},{"name":"刘文艺","phone":"18853889099","zkey":"L"},{"name":"刘祥","phone":"18853889099","zkey":"L"},{"name":"李泽诚","phone":"18853889099","zkey":"L"},{"name":"兰石峰","phone":"18853889099","zkey":"L"},{"name":"李瑞芳","phone":"18853889099","zkey":"L"},{"name":"刘亚琴","phone":"18853889099","zkey":"L"},{"name":"刘变林","phone":"18853889099","zkey":"L"},{"name":"李宇枫","phone":"18853889099","zkey":"L"},{"name":"刘增华","phone":"18853889099","zkey":"L"},{"name":"李耀晨","phone":"18853889099","zkey":"L"},{"name":"刘洋","phone":"18853889099","zkey":"L"},{"name":"李晓鹏","phone":"18853889099","zkey":"L"},{"name":"卢泳成","phone":"18853889099","zkey":"L"},{"name":"李兴荣","phone":"18853889099","zkey":"L"},{"name":"李德会","phone":"18853889099","zkey":"L"},{"name":"廉丽","phone":"18853889099","zkey":"L"},{"name":"李小英","phone":"18853889099","zkey":"L"},{"name":"雷连荣","phone":"18853889099","zkey":"L"},{"name":"路海荣","phone":"18853889099","zkey":"L"},{"name":"吕凯波","phone":"18853889099","zkey":"L"},{"name":"李怡纬","phone":"18853889099","zkey":"L"},{"name":"刘鸿雁","phone":"18853889099","zkey":"L"},{"name":"李兰兰","phone":"18853889099","zkey":"L"},{"name":"刘翠芹","phone":"18853889099","zkey":"L"},{"name":"李帅","phone":"18853889099","zkey":"L"},{"name":"李秋梅","phone":"18853889099","zkey":"L"},{"name":"吕贵利","phone":"18853889099","zkey":"L"},{"name":"李亮","phone":"18853889099","zkey":"L"},{"name":"李奇","phone":"18853889099","zkey":"L"},{"name":"刘孝宇","phone":"18853889099","zkey":"L"}]},{"zkey":"M","children":[{"name":"毛晓慧","phone":"18853889099","zkey":"M"},{"name":"明兴春","phone":"18853889099","zkey":"M"},{"name":"莫足敏","phone":"18853889099","zkey":"M"},{"name":"马树明","phone":"18853889099","zkey":"M"}]},{"zkey":"N","children":[{"name":"那玉华","phone":"18853889099","zkey":"N"}]},{"zkey":"O","children":[]},{"zkey":"P","children":[{"name":"庞天博","phone":"18853889099","zkey":"P"},{"name":"潘宁","phone":"18853889099","zkey":"P"},{"name":"皮丽花","phone":"18853889099","zkey":"P"}]},{"zkey":"Q","children":[{"name":"青长江","phone":"18853889099","zkey":"Q"},{"name":"秦宗琼","phone":"18853889099","zkey":"Q"}]},{"zkey":"R","children":[{"name":"任菊艳","phone":"18853889099","zkey":"R"},{"name":"任庆龙","phone":"18853889099","zkey":"R"},{"name":"任福虎","phone":"18853889099","zkey":"R"},{"name":"饶明","phone":"18853889099","zkey":"R"}]},{"zkey":"S","children":[{"name":"苏飞舟","phone":"18853889099","zkey":"S"},{"name":"孙仕峰","phone":"18853889099","zkey":"S"},{"name":"孙英华","phone":"18853889099","zkey":"S"},{"name":"孙兆男","phone":"18853889099","zkey":"S"},{"name":"宋贺琪","phone":"18853889099","zkey":"S"},{"name":"宋振波","phone":"18853889099","zkey":"S"},{"name":"石晓芳","phone":"18853889099","zkey":"S"},{"name":"史春彦","phone":"18853889099","zkey":"S"},{"name":"施月琴","phone":"18853889099","zkey":"S"}]},{"zkey":"T","children":[{"name":"谭勇","phone":"18853889099","zkey":"T"},{"name":"唐志超","phone":"18853889099","zkey":"T"},{"name":"唐振林","phone":"18853889099","zkey":"T"},{"name":"唐菊","phone":"18853889099","zkey":"T"}]},{"zkey":"U","children":[]},{"zkey":"V","children":[]},{"zkey":"W","children":[{"name":"王志强","phone":"18853889099","zkey":"W"},{"name":"王美珍","phone":"18853889099","zkey":"W"},{"name":"王霞","phone":"18853889099","zkey":"W"},{"name":"武旭宏","phone":"18853889099","zkey":"W"},{"name":"王志伟","phone":"18853889099","zkey":"W"},{"name":"王志刚","phone":"18853889099","zkey":"W"},{"name":"王朝","phone":"18853889099","zkey":"W"},{"name":"王桂凤","phone":"18853889099","zkey":"W"},{"name":"王赛 ","phone":"18853889099","zkey":"W"},{"name":"王会英","phone":"18853889099","zkey":"W"},{"name":"王志刚","phone":"18853889099","zkey":"W"},{"name":"王晓丽","phone":"18853889099","zkey":"W"},{"name":"王雪","phone":"18853889099","zkey":"W"},{"name":"王胜晓","phone":"18853889099","zkey":"W"},{"name":"乌彩春","phone":"18853889099","zkey":"W"},{"name":"王兴峰","phone":"18853889099","zkey":"W"},{"name":"万泓钰","phone":"18853889099","zkey":"W"},{"name":"王志强（长治进货账号）","phone":"18853889099","zkey":"W"},{"name":"王志峰","phone":"18853889099","zkey":"W"},{"name":"王晓东","phone":"18853889099","zkey":"W"},{"name":"武奇","phone":"18853889099","zkey":"W"},{"name":"王永海","phone":"18853889099","zkey":"W"},{"name":"温强","phone":"18853889099","zkey":"W"},{"name":"吴封康","phone":"18853889099","zkey":"W"},{"name":"王诚","phone":"18853889099","zkey":"W"},{"name":"武花占","phone":"18853889099","zkey":"W"},{"name":"王花梅","phone":"18853889099","zkey":"W"},{"name":"王延萍","phone":"18853889099","zkey":"W"}]},{"zkey":"X","children":[{"name":"肖嶺","phone":"18853889099","zkey":"X"},{"name":"肖凤玲","phone":"18853889099","zkey":"X"},{"name":"肖彬","phone":"18853889099","zkey":"X"},{"name":"谢箐","phone":"18853889099","zkey":"X"},{"name":"肖木珍","phone":"18853889099","zkey":"X"},{"name":"项玉","phone":"18853889099","zkey":"X"},{"name":"谢伟辉","phone":"18853889099","zkey":"X"},{"name":"徐畅","phone":"18853889099","zkey":"X"},{"name":"薛丽娜","phone":"18853889099","zkey":"X"},{"name":"谢学灵","phone":"18853889099","zkey":"X"},{"name":"胥正祥","phone":"18853889099","zkey":"X"}]},{"zkey":"Y","children":[{"name":"杨占武","phone":"18853889099","zkey":"Y"},{"name":"杨丽莉","phone":"18853889099","zkey":"Y"},{"name":"叶希伟","phone":"18853889099","zkey":"Y"},{"name":"闫增志","phone":"18853889099","zkey":"Y"},{"name":"杨云","phone":"18853889099","zkey":"Y"}]},{"zkey":"Z","children":[{"name":"张林","phone":"18853889099","zkey":"Z"},{"name":"张世强","phone":"18853889099","zkey":"Z"},{"name":"赵春花","phone":"18853889099","zkey":"Z"},{"name":"周峰","phone":"18853889099","zkey":"Z"},{"name":"赵有兰","phone":"18853889099","zkey":"Z"},{"name":"赵三梅","phone":"18853889099","zkey":"Z"},{"name":"赵春瑞","phone":"18853889099","zkey":"Z"},{"name":"张立军","phone":"18853889099","zkey":"Z"},{"name":"张阳","phone":"18853889099","zkey":"Z"},{"name":"赵洪全","phone":"18853889099","zkey":"Z"},{"name":"朱雷","phone":"18853889099","zkey":"Z"},{"name":"周明","phone":"18853889099","zkey":"Z"},{"name":"张如意","phone":"18853889099","zkey":"Z"},{"name":"周丽","phone":"18853889099","zkey":"Z"},{"name":"赵龙飞","phone":"18853889099","zkey":"Z"},{"name":"赵德芳","phone":"18853889099","zkey":"Z"},{"name":"赵飞","phone":"18853889099","zkey":"Z"},{"name":"邹昌明","phone":"18853889099","zkey":"Z"},{"name":"张兵兵","phone":"18853889099","zkey":"Z"},{"name":"钟富贵","phone":"18853889099","zkey":"Z"},{"name":"张建伟","phone":"18853889099","zkey":"Z"},{"name":"赵勇革","phone":"18853889099","zkey":"Z"},{"name":"祝木深","phone":"18853889099","zkey":"Z"},{"name":"赵华斌","phone":"18853889099","zkey":"Z"},{"name":"周吉海","phone":"18853889099","zkey":"Z"},{"name":"张世强","phone":"18853889099","zkey":"Z"},{"name":"赵国成","phone":"18853889099","zkey":"Z"},{"name":"赵小菲","phone":"18853889099","zkey":"Z"},{"name":"张加奇","phone":"18853889099","zkey":"Z"},{"name":"张少宁","phone":"18853889099","zkey":"Z"},{"name":"周立宝","phone":"18853889099","zkey":"Z"},{"name":"支贺","phone":"18853889099","zkey":"Z"}]},{"zkey":"#","children":[{"name":"asd","phone":"18853889099","zkey":"#"},{"name":"3455","phone":"18853889099","zkey":"#"},{"name":"*3dd","phone":"18853889099","zkey":"#"},{"name":"tyuuu","phone":"18853889099","zkey":"#"}]}]}},methods: {takeCall(e){//console.log(JSON.stringify(e));var phone = e.detail;api.call({type: 'tel_prompt',number: phone});}}}
</script>
<style>.page {height: 100%;}
</style>

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

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