一、H5调用系统通讯录新建的背景
随着移动互联网的快速发展，用户对应用的需求日益多样化。 在这个过程中，许多开发者需要将H5页面与系统通讯录进行交互，以便用户在浏览网页时能够快速添加联系人。 例如，在线教育平台、社交网站、企业内部系统等，都希望用户能够直接在网页上添加联系人，提高用户体验。
二、H5调用系统通讯录新建的方法
1. 使用HTML5的`navigator.contacts` API
HTML5的`navigator.contacts` API是调用系统通讯录的主要方法。 该方法允许开发者访问设备的联系人数据，并创建新的联系人。 以下是一个简单的示例：
```javascript
function createContact() {
var contact = navigator.contacts.create({
name: {
givenName: '张三',
familyName: '李'
},
phoneNumbers: [{
value: '13800138000',
type: 'mobile'
}]
});
contact.save(function(contact) {
alert('联系人添加成功！ ');
}, function(error) {
alert('联系人添加失败：' + error.message);
});
}
```
2. 使用第三方库
由于浏览器对`navigator.contacts` API的支持存在差异，开发者可以通过引入第三方库来简化调用过程。 以下是一些常用的第三方库：
（1）jQuery Mobile
jQuery Mobile是一个基于jQuery的移动端开发框架，它提供了对`navigator.contacts` API的封装。 以下是一个示例：
```javascript
$("#createContactBtn").on("click", function() {
var contact = navigator.contacts.create({
name: {
givenName: '张三',
familyName: '李'
},
phoneNumbers: [{
value: '13800138000',
type: 'mobile'
}]
});
contact.save(function(contact) {
alert('联系人添加成功！ ');
}, function(error) {
alert('联系人添加失败：' + error.message);
});
});
```
（2）Contactify
Contactify是一个专门用于调用系统通讯录的JavaScript库。 以下是一个示例：
```javascript
var contactify = new Contactify();
contactify.create({
name: {
givenName: '张三',
familyName: '李'
},
phoneNumbers: [{
value: '13800138000',
type: 'mobile'
}]
}, function(contact) {
alert('联系人添加成功！ ');
}, function(error) {
alert('联系人添加失败：' + error.message);
});
```
三、重要提醒
1. 调用系统通讯录功能需要用户授权。 在调用前，请确保已经向用户获取相应的权限。
2. 不同浏览器的支持程度不同，在使用`navigator.contacts` API时，请做好兼容性处理。
3. 部分手机系统对通讯录的访问权限有限制，可能无法实现添加联系人的功能。 在这种情况下，建议使用第三方应用来实现。
4. 调用系统通讯录功能可能会对用户隐私造成影响，请确保在合法合规的前提下使用。
5. 在实际开发过程中，请密切关注系统通讯录API的更新，以便及时调整代码。
总之，H5封装调用系统通讯录新建功能是一个具有实际应用价值的技术。 开发者需要了解相关API和第三方库，并注意权限、兼容性和隐私等问题。 希望本文能对您有所帮助。