在开发移动端app时，通讯录权限是必不可少的一项功能，它能帮助用户快速地将联系人添加到自己的通讯录中，但是由于涉及到用户隐私，获取通讯录权限涉及到一定的安全性问题。因此，本文将详细介绍如何在h5中封装app通讯录权限。
一、基本原理
H5的本质是在浏览器中运行的网页，而app本质是一款本地应用。因此，在H5中封装app通讯录权限，需要借助原生app的能力，与原生应用进行交互。常用的方式有以下几种：
1. 使用WebViewJavascriptBridge
WebViewJavascriptBridge是一款第三方库，可以在H5中和原生应用进行交互。我们可以将H5 webview中需要的功能封装成插件，在原生端和H5端约定好对应的接口名称，再通过WebViewJavascriptBridge进行调用完成交互。
2. 使用JSBridge
JSBridge也是一个第三方库，可以实现原生与H5之间的交互。它的原理是通过在H5页面中注入一个名为WebViewJavascriptBridge的对象，在原生中通过这个对象实现一个WebViewJavascriptBridge类，并注册挂载H5端提供的接口。
3. 使用iframe
这种方式的原理是在H5页面中嵌入一个iframe，通过iframe与原生应用进行交互。通过iframe可以访问到原生应用提供的方法，并可以将其封装成通讯录权限的插件。
二、实现步骤
1. 创建H5页面
首先，我们需要创建一个H5页面，并编写一些JavaScript代码来处理通讯录权限的请求和回调。
2. 封装通讯录插件
接下来，我们需要将通讯录插件封装成一个JavaScript类。这个类需要定义好接口名称以及与原生应用交互的方式。
3. 在原生应用中添加WebView
在原生应用中，我们需要添加一个WebView，并将其加载H5页面。
4. 注册H5端提供的接口
接着，我们需要在原生应用中注册H5端提供的接口，使得H5页面能够调用原生应用实现通讯录权限的功能。
5. 实现原生应用的通讯录权限获取逻辑
最后，我们需要在原生应用中实现通讯录权限的获取逻辑。当H5页面调用注册的接口名称时，原生应用中的方法将会被调用，实现通讯录权限的获取。
三、注意事项
1. 安全问题
由于获取通讯录权限涉及到用户隐私的问题，因此我们需要采取一些措施来确保信息的安全性，尤其是在与第三方库交互时。
2. 兼容性问题
在封装H5页面通讯录权限时，需要考虑兼容性问题，因为不同终端的支持可能存在差异。我们应该先根据平台和浏览器的不同特点，选择兼容性较好的方法进行封装。
3. 参数传递问题
在H5与原生应用之间交互时，需要考虑参数一致性的问题。由于H5与原生应用使用的是不同的编程语言，传递参数时需要将其进行序列化处理。在具体实现中，我们可以使用JSON格式将参数进行编码和解码。
总之，在封装通讯录权限之前，我们需要仔细设计和分析需求，考虑到安全性和兼容性等问题，才能确保其稳定性和良好的用户体验。
