每天都有奇怪的知识增加,嘻嘻嘻。
今天试试用uniapp 做小程序云开发,通过腾讯云给手机发送短信。
之前没用过uniapp,找了会儿uniapp 小程序云开发,没找到答案。害~
就瞎鸡儿试呗,反正又不要钱。
操作如下:
还是先去申请一个小程序账号。
在开发者工具中先生成一个。勾选云开发新建。
建云开发根据提示来就可以,操作完后
打开HBulidX,新建项目选uni-app
我的目录如下
去manifest.json中配置
App.vue中初始化云函数,env是你云函数的环境变量。
再运行到微信开发者工具。
记得配置你的云环境,就是你的云开发后台里的那个环境变量
这里新建一个云函数。
就有相应的文件出来。
都是鼠标右键操作。这里使用腾讯云的短信平台,需要下载他的sdk。
就可以使用npm 下载。
当然你还得先去申请账号。
腾讯云官网
这里我使用的个人认证,并领取了免费的200条短信套餐。穷人落泪。
一步一步来。
签名: 就是短信前面括号里的字。最后图中的‘共享爸爸’
模板: 就是你短信的内容。可以插入变量,具体看文档说明。
审核:截图小程序后台的设置页面。小程序必须是已经上线,而且可以搜索到的。
最后等审核通过就可以搞了。
下node.js版的SDK
在你创建的云函数的终端里
npm install tencentcloud-sdk-nodejs --save
然后index.js文件中
// 云函数入口文件
const cloud = require('wx-server-sdk')
const tencentcloud = require("./node_modules/tencentcloud-sdk-nodejs");
// 导入 SMS 模块的 client models
const smsClient = tencentcloud.sms.v20190711.Client;
const models = tencentcloud.sms.v20190711.Models;
const Credential = tencentcloud.common.Credential;
const ClientProfile = tencentcloud.common.ClientProfile;
const HttpProfile = tencentcloud.common.HttpProfile;
/* 必要步骤:
* 实例化一个认证对象,入参需要传入腾讯云账户密钥对 secretId 和 secretKey
* 本示例采用从环境变量读取的方式,需要预先在环境变量中设置这两个值
* 您也可以直接在代码中写入密钥对,但需谨防泄露,不要将代码复制、上传或者分享给他人
* CAM 密匙查询: https://console.cloud.tencent.com/cam/capi*/
//let cred = new Credential(process.env.TENCENTCLOUD_SECRET_ID, process.env.TENCENTCLOUD_SECRET_KEY);
let cred = new Credential("你的secretId ", "你的secretKey");
/* 非必要步骤:
* 实例化一个客户端配置对象,可以指定超时时间等配置 */
let httpProfile = new HttpProfile();
/* SDK 默认使用 POST 方法
* 如需使用 GET 方法,可以在此处设置,但 GET 方法无法处理较大的请求 */
httpProfile.reqMethod = "POST";
/* SDK 有默认的超时时间,非必要请不要进行调整
* 如有需要请在代码中查阅以获取最新的默认值 */
httpProfile.reqTimeout = 30;
httpProfile.endpoint = "sms.tencentcloudapi.com";
// 实例化一个 client 选项,可选,无特殊需求时可以跳过
let clientProfile = new ClientProfile();
/* SDK 默认用 TC3-HMAC-SHA256 进行签名,非必要请不要修改该字段 */
clientProfile.signMethod = "HmacSHA256";
clientProfile.httpProfile = httpProfile;
/* SDK 会自动指定域名,通常无需指定域名,但访问金融区的服务时必须手动指定域名
* 例如 SMS 的上海金融区域名为 sms.ap-shanghai-fsi.tencentcloudapi.com */
/* 实例化 SMS 的 client 对象
* 第二个参数是地域信息,可以直接填写字符串 ap-guangzhou,或者引用预设的常量 */
let client = new smsClient(cred, "ap-guangzhou", clientProfile);
/* 实例化一个请求对象,根据调用的接口和实际情况,可以进一步设置请求参数
* 您可以直接查询 SDK 源码确定 SendSmsRequest 有哪些属性可以设置
* 属性可能是基本类型,也可能引用了另一个数据结构
* 推荐使用 IDE 进行开发,可以方便地跳转查阅各个接口和数据结构的文档说明 */
let req = new models.SendSmsRequest();
/* 基本类型的设置:
* SDK 采用的是指针风格指定参数,即使对于基本类型也需要用指针来对参数赋值
* SDK 提供对基本类型的指针引用封装函数
* 帮助链接:
* 短信控制台:https://console.cloud.tencent.com/smsv2
* sms helper:https://cloud.tencent.com/document/product/382/3773 */
/* 短信应用 ID: 在 [短信控制台] 添加应用后生成的实际 SDKAppID,例如1400006666 */
req.SmsSdkAppid = "你的SDKAppID";
/* 短信签名内容: 使用 UTF-8 编码,必须填写已审核通过的签名,可登录 [短信控制台] 查看签名信息 */
req.Sign = "你的签名"; //必须是审核过了的签名
/* 短信码号扩展号: 默认未开通,如需开通请联系 [sms helper] */
req.ExtendCode = "";
/* 国际/港澳台短信 senderid: 国内短信填空,默认未开通,如需开通请联系 [sms helper] */
req.SenderId = "";
/* 用户的 session 内容: 可以携带用户侧 ID 等上下文信息,server 会原样返回 */
req.SessionContext = "";
cloud.init()
function mySend (req){
return new Promise((res,rej)=>{
// 通过 client 对象调用想要访问的接口,需要传入请求对象以及响应回调函数
client.SendSms(req, function (err, response) {
// 请求异常返回,打印异常信息
if (err) {
rej(err)
}
// 请求正常返回,打印 response 对象
res(response.SendStatusSet[0])
});
})
}
// 云函数入口函数
exports.main = async (event, context) => {
// const wxContext = cloud.getWXContext()
/* 下发手机号码,采用 e.164 标准,+[国家或地区码][手机号]
* 例如+8613711112222, 其中前面有一个+号 ,86为国家码,13711112222为手机号,最多不要超过200个手机号*/
let num = '+86' + event.num
req.PhoneNumberSet = [num];
/* 模板 ID: 必须填写已审核通过的模板 ID,可登录 [短信控制台] 查看模板 ID */
req.TemplateID = "你的模板ID";
/* 模板参数: 若无模板参数,则设置为空*/
let code = event.code
req.TemplateParamSet = [code];
let res = await mySend(req)
return res;
}
这些都是在微信开发者工具编辑器里写的。
然后在去HBuildx里,我们的页面中调用云函数,
要记得的是,云函数写完之后,需要上传并部署云函数之后,才能使用。
页面调用
<template>
<view class="body">
<input type="text" v-model="num" placeholder="请输入手机号" />
<input type="text" v-model="code" placeholder="请输入取件码" />
<button type="default" @click="getopenId">发送短信</button>
</view>
</template>
<script>
export default {
data() {
return {
num:'',
code:''
}
},
methods: {
getopenId(){
if(this.num.length!=11) {
uni.showToast({
title:"手机号码格式错误",
icon:"none"
})
return
}
wx.cloud.callFunction({
name: 'sendMSG',
data: {
num:this.num,
code:this.code
}
}).then(res=>{
console.log(res,'..')
if(res.result.Code !== 'Ok'){
uni.showToast({
title:res.result.Code,
icon:"none",
duration:3000
})
} else {
uni.showToast({
title:'发送成功'
})
}
})
}
}
}
</script>
<style>
.body{
margin-top: 200rpx;
}
</style>