APICloud AVM框架封装通讯录组件

白鱼赤乌

已于 2022-08-09 14:55:26 修改

阅读量2.4k

点赞数

分类专栏：组件封装文章标签： android reactnative javascript

于 2022-04-19 20:29:31 首次发布

本文链接：https://blog.csdn.net/github_38740653/article/details/124281816

版权

组件封装专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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 , 具体支持情况还要看每个组件的说明文档。

首先需要登录开发平台，http://www.apicloud.com。通过控制平台右上方的模块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组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

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

白鱼赤乌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
APICloud AVM框架封装通讯录组件

由于很多项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话功能。用的技术点是scroll-view中的scrollTo方法。向组件中传值和监听子组件事件，具体使用请参考官方文档。数据格式[{ "zkey": "A", "children": [{ "name": "安强", "phone": "18853889099", "zkey": "A" }]}, { "zkey": "B", "children": [{ "na.
复制链接

扫一扫