本教程的目标是展示如何从您的 iOS 或 Android 联系人列表中提取联系人到 NativeScript 应用程序,并准备短信进行发送。它利用了我构建的两个 NativeScript 扩展:nativescript-contacts 和 nativescript-messenger.
本教程假定您已经对 NativeScript 有相当的了解。如果您是 NativeScript 的新手,我建议您遵循 入门文档.
需要注意的是,为了实际发送短信,您需要使用连接的设备。模拟器不支持发送或测试短信。如果您没有设备,您仍然可以按照以下步骤操作,从模拟器中提取联系人,并相信如果没有连接的设备,它将发送短信。
从我们的命令行/命令提示符开始,我们将创建一个新的应用程序
tns create myApp
接下来,cd 进入我们的应用程序目录。
cd myApp
现在我们将安装我们的插件。
tns plugin add nativescript-messenger
tns plugin add nativescript-contacts
在构建此应用程序时,我们将进入 livesync 模式。
tns run ios|android
提示:如果您在 Android 上测试,您需要在 AndroidManifest.xml
文件中添加以下权限
<uses-permission android:name="android.permission.READ_CONTACTS" />
您也可以设置 android:targetSdkVersion="22"
以避免恼人的权限错误。
在我们开始构建应用程序的核心之前,让我们用这个新的代码段覆盖默认的 CSS,以提高可读性。
StackLayout{
text-align:center;
}
Label{
font-size:16;
color: #555;
}
.btn {
margin:20 0;
font-size: 15;
background-color: #ff7070;
color: #fff;
padding: 10 15;
border-radius: 5;
horizontal-align: center;
}
我们将使用 main-page.xml 作为我们简单应用程序示例的核心布局。
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<Button text="Choose a contact" tap="getContact" class="btn" />
<Label text="{{ contact_name }}" visibility="{{ contact_name ? 'visible' : 'collapse' }}" />
<Button text="{{ 'Send text to: ' + contact_name }}" class="btn" tap="sendMessage" visibility="{{ contact_name ? 'visible' : 'collapse' }}"/>
</StackLayout>
</Page>
让我解释一下上面的内容。我们使用堆栈布局为我们的内部元素(即按钮、标签和按钮)创建一个块。
第一个按钮将打开我们的联系人列表,并带回一个联系人,以便我们对它进行操作。它与我们稍后将创建的函数相关联。该标签将显示所选联系人的姓名。最后一个按钮将使用我们在稍后的 JavaScript 代码中定义的预定义文本触发短信。
后两个元素的可见性由是否已经选择联系人决定。
此文件包含我们的模型,我们将在此存储将由我们上面的视图显示的数据。
// require the observable
var observable = require("data/observable");
// define our model
var model = new observable.Observable({
contact_name: "",
phone: ""
});
// export it to the view
module.exports = model;
这是魔法发生的地方。首先,我们需要设置我们的依赖项并定义 pageLoaded 方法,该方法定义了我们希望用于数据的模型。我们的依赖项是应用程序模块(用于授予我们访问检查用户正在运行的操作系统的权限)、两个插件和我们的模型。
// lets require our dependencies
var contacts = require('nativescript-contacts');
var messenger = require('nativescript-messenger');
var model = require("./main-view-model");
// lets set up our model so its accessible in the page
exports.pageLoaded = function(args) {
var page = args.object;
page.bindingContext = model;
}
接下来,让我们从设备中的联系人获取一些数据。我们将从创建一个可以从视图中调用的函数开始。
exports.getContact = function(){
// code here
}
现在我们可以将我们的插件代码添加到此函数中
contacts.getContact().then(function(result){
var contact = result.data;
model.set("contact_name", contact.name.given);
// grab the first phone number in contact
if(contact.phoneNumbers.length > 0){
model.set("phone", contact.phoneNumbers[0].value);
}
});
联系人插件会返回一个包含联系人详细信息的数据对象。
var contact = result.data;
现在我们可以将这些值分配给我们的模型
model.set("contact_name", contact.name.given);
if(contact.phoneNumbers.length > 0){
model.set("phone", contact.phoneNumbers[0].value);
}
可以在 GitHub 上找到其他可用属性的完整列表。
让我们在 getContact()
函数下方添加另一个函数。这个函数很简单 - 我们要做的就是从所选联系人中获取电话号码,并调用 messenger.send(numbers, message, subject)
方法来发送短信。
exports.sendMessage = function(){
var phonenumber = model.phone;
messenger.send(phonenumber, "my message", "my subject").then(function(args){
// after send you can do stuff
alert("Message sent to: " + phonenumber);
}, function (e) {
// if something went wrong
alert(e.toString());
console.log("Error occurred " + e);
});
}
同样,该消息不会在模拟器上发送,您将收到一个提示说“错误:您无法发送短信。请检查设备设置。”但是,如果您能够在 iPhone 上测试应用程序,它将打开撰写消息视图,并允许您发送短信。
如果您是 NativeScript 开发人员,我希望您发现这两个插件很有用。如果您想看到其他功能或支持,它们都是开源的,我邀请任何拥有专业知识的人贡献代码。