返回博客首页
← 所有文章

使用 NativeScript 向手机联系人发送短信

2018 年 6 月 26 日 — 作者 Ryan Lebel

本教程的目标是展示如何从您的 iOS 或 Android 联系人列表中提取联系人到 NativeScript 应用程序,并准备短信进行发送。它利用了我构建的两个 NativeScript 扩展:nativescript-contactsnativescript-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" 以避免恼人的权限错误。

main-page.css

在我们开始构建应用程序的核心之前,让我们用这个新的代码段覆盖默认的 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

我们将使用 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 代码中定义的预定义文本触发短信。

后两个元素的可见性由是否已经选择联系人决定。

main-page-model.js

此文件包含我们的模型,我们将在此存储将由我们上面的视图显示的数据。

// 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;

main-page.js

这是魔法发生的地方。首先,我们需要设置我们的依赖项并定义 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 开发人员,我希望您发现这两个插件很有用。如果您想看到其他功能或支持,它们都是开源的,我邀请任何拥有专业知识的人贡献代码。