云开发--实现发送邮件+短信+链接跳转小程序功能

Posted 抄代码抄错的小牛马

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了云开发--实现发送邮件+短信+链接跳转小程序功能相关的知识，希望对你有一定的参考价值。

目录

1、小程序实现发送邮件

准备一个qq邮箱，并启动SMTP服务

确定小程序云开发环境，并新建云函数

 2、小程序实现发送短信

确定应用

确定签名  

确定模板

编写云函数-发送短信

3、链接跳转小程序

H5 配置

学习记录：

1、小程序实现发送邮件

  • 准备一个qq邮箱，并启动SMTP服务

在QQ邮箱的账户设置开启：SMTP服务

 再点击下面生成授权码。

  • 确定小程序云开发环境，并新建云函数

在新建的云函数处，右键点击--在外部终端打开

输入： npm install nodemailer  命令进行安装依赖。

  •  代码部分
// 云函数入口文件
const cloud = require('wx-server-sdk')
//引入发送邮件的类库
var nodemailer = require('nodemailer')

//云开发环境初始化
cloud.init(
    env: '你的云开发环境ID', //所对应的环境ID
    traceUser: true
)

// 创建一个SMTP客户端配置
var config = 
    host: 'smtp.qq.com', //网易163邮箱 smtp.163.com
    port: 465, //网易邮箱端口
    auth: 
        user: '你开启SMTP的邮箱', //邮箱账号
        pass: '点击生成的授权码' //邮箱的授权码
    
;
// 创建一个SMTP客户端对象
var transporter = nodemailer.createTransport(config);
// 云函数入口函数
exports.main = async (event, context) => 
    // 创建一个邮件对象
    var mail = 
        // 发件人
        from: '移通校园跑腿儿 <yxhlhm@foxmail.com>',
        // 主题
        subject: '订单状态提醒',
        // 收件人
        to: '2109145872@qq.com',
        // 邮件内容，text或者html格式
        text: '被人接单啦，尽快回到小程序查看吧' //可以是链接，也可以是验证码
    ;

    let res = await transporter.sendMail(mail);
    return res;

最后，上传并部署云函数即可：

  • 调用测试

wxml：

<button style="margin-top: 20px; width: 70%;" type="default" bindtap="clk1">点击发送邮件</button>

<button style="margin-top: 20px; width: 70%;" type="default" bindtap="clk2">点击发送短信</button>

js：

Page(

    clk1() 
        // 调用 云函数 发送 邮件
        wx.cloud.callFunction(
            name: 'send_email',
            success(res) 
                console.log("发送成功：", res)
            ,
            fail(err) 
                console.log("失败：", err)
            
        )
    ,

    clk2() 
        // 调用 云函数 发送 短信
        wx.cloud.callFunction(
            name: 'send_message',
            success(res) 
                console.log("发送成功：", res)
            ,
            fail(err) 
                console.log("失败：", err)
            
        )
    ,


)

结果：

目标手机：

 控制台：

 2、小程序实现发送短信

 这个我之前是在腾讯云申请的：登录 - 腾讯云https://console.cloud.tencent.com/smsv2

结果，因为我是用的云开发，可以直接在云开发控制台中申请短信服务的。

 如果直接在这里申请的话，个人会送100条，企业会送1000条。而且云开发调用它也很方便，但我后面才看到：

 腾讯云控制台：

 微信开发者工具中：

 新人才会免费增送额度 ！！！ 50块钱 可以买 1000 条短信额度。

直接用云开发+静态资源 发送短信简单些。而且发送的短信可以带链接，可以直接打开跳转到小程序。

还是先把免费的用了再说：先要有一个应用哈~

  • 确定应用

  • 确定签名  

  • 确定模板

  • 编写云函数-发送短信

我的云函数名称：send_message  ，右键它，点击在外部终端打开--输入以下命名 SDK 安装依赖：

npm install --save sms-node-sdk

代码：替换其中标注的内容即可

// 云函数入口文件
const cloud = require('wx-server-sdk')
const 
    SmsClient
 = require('sms-node-sdk');



const AppID = 666666; //你的SDK AppID  是1400开头
// 短信应用SDK AppKey ，替换为你本身的 AppKey
const AppKey = '666666';
// 须要发送短信的手机号码
const phoneNumber = '19115314436';
// 短信模板ID，须要在短信应用中申请
const templId = 666666;
// 签名，替换为你本身申请的签名
const smsSign = '移通校园跑腿儿';
// 实例化smsClient
//cloud.init()
//云开发环境初始化
cloud.init(
    env: 'cloud1-7g1a0u3je2bf6f8d', //你原开发所对应的环境ID
    traceUser: true
)
// 云函数入口函数
exports.main = async (event, context) => 
    let order_people = '自定义内容'; // 这个地方是 你创建模板 自定义内容的地方
    let smsClient = new SmsClient(
        AppID,
        AppKey
    );
    return await smsClient.init(
        action: 'SmsSingleSendTemplate',
        data: 
            nationCode: '86',
            phoneNumber,
            templId: templId,
            params: [order_people],
            sign: smsSign
            // 签名参数未提供或者为空时，会使用默认签名发送短信
        
    )

你需要修改的东西在如下图：

 到这里，保存，上传部署云函数，就OK 了。

注意的是：短信它不允许 发送链接，发送也是携带固定的且备案的链接，这个是很严格的。

调用：控制台中

 目标手机中：

3、链接跳转小程序

腾讯云模板携带链接很麻烦，但后面云开发+静态资源是免鉴权直接跳转小程序端的，后面腾讯云免费额度用完了，我会选择云开发发送短信，所以就很有必要了解一下：链接跳转小程序。

官方文档：

可知道：

  1. 使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。
  2. 只能生成已发布的小程序的 URL Link。
  3. 在微信内或者安卓手机打开 URL Link 时，默认会先跳转官方 H5 中间页，如果需要定制 H5 内容，可以使用云开发静态网站。

  • H5 配置

 修改：

点进去--记事本打开-- 搜索：<!-- replace --> 查看到所有需要替换的地方

 修改完成，保存。云开发后台上传 H5

 到这里就不用管了。

  • 获取小程序 URL Link，适用于短信、邮件、网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序链接，有数量限制，目前仅针对国内非个人主体的小程序开放，详见获取 URL Link

还是自己要新建一个云函数哈

代码：

const cloud = require('wx-server-sdk')
//云开发环境初始化
cloud.init(
    env: 'cloud1-7g1a0u3je2bf6f8d', //你的云开发所对应的环境ID
    traceUser: true
)
exports.main = async (event, context) => 
    try 
        const result = await cloud.openapi.urllink.generate(
            "path": '/pages/get/get',
            "query": '',
            "isExpire": true,
            "expireType": 1,
            "expireInterval": 1,
            "envVersion": 'release',
            // "cloudBase": 
            //   "env": 'xxx',
            //   "domain": 'xxx.xx',
            //   "path": '/jump-wxa.html',
            //   "query": 'a=1&b=2'
            //   
            // 不填就跳转 默认 H5 页面
        )
        return result
     catch (err) 
        return err

短信现在不能携带链接，我就在邮件中携带：微调一下，你们自己传个参数进去就可以

 效果：

拜~ 

下次再见~

借助云开发实现小程序短信验证码的发送

最近在做小程序验证码登陆时，用到了短信发送验证码的需求，自己也研究了下，用云开发结合云函数来实现验证码短信发送还是很方便的。

老规矩，先看效果图

技术图片
这是我调用腾讯云的短信平台发送的登陆验证码。核心代码其实只有下面这么多
技术图片
是不是感觉实现起来特别简单，怎么说呢，我们代码调用其实就这么几行，就可以实现短信的发送，但是腾讯云短信模板的审核比较繁琐，还有我们先去申请短信模板，短信模板审核通过后才可以使用。
我们就先来说代码实现，然后再带大家简单的学习下短信模板的申请。

一，安装node类库

其实我们这里用到了云开发的云函数，我们是在云函数里调用短信发送的。为什么要在云函数里调用呢，因为我们做短信发送，需要用到腾讯云的一个短信发送的类库，而这个类库是node库，所以只能在云函数里调用了。

在安装这个类库之前，我们需要先创建一个云函数，关于云函数的创建，我其实已经讲过很多遍了，不知道的同学，去翻看下我的历史文章，或者看下我录制的云开发入门视频《5小时零基础入门小程序云开发》
我后面也会把这节内容录制出视频出来。

创建完云函数后，右键点击在终端中打开，打开终端后，在终端中输入以下命令来安装qcloudsms_js类库

npm install qcloudsms_js

技术图片
这里需要注意，我们安装类库前需要先下载node并配置npm环境变量，这里我也有写文章的
《nodeJs的安装与npm全局环境变量的配置》

二，编写云函数

上面类库安装好以后，我们就可以来编写云函数了。
其实代码编写起来很简单，就下面这些，对应的注解我也都已经写出来了。
技术图片
这里要发送的手机号，和随机验证码需要动态传进来的。

三，调用云函数

调用云函数这里也很简单，我们需要传入手机号和验证码
技术图片
手机号这里，我做了一个输入框，可以动态的输入。验证码的话，我写了一个方法来随机生成数字和字母的组合验证码。
技术图片
我等下会把完整的代码贴出来给大家。
技术图片
这样我们输入完手机号以后，点击发送短信按钮，就可以成功的发送短信给到对应的手机号了。

  • 可以看到我们生成的随机验证码如下
    技术图片
    我们手机接受到的短信验证码如下
    技术图片
    这样我们做登陆或者做校验时，用户手机短信收到的验证码，和我们随机生成的验证码一样，即代表用户验证成功。
    完整的index.js代码给大家贴出来 
    var chars = [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘, ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘O‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘X‘, ‘Y‘, ‘Z‘];
let phone = ‘‘
Page({
//获取随机验证码，n代表几位
generateMixed(n) {
var res = "";
for (var i = 0; i < n; i++) {
  var id = Math.ceil(Math.random() * 35);
  res += chars[id];
}
return res;
},
//调用云函数发送短信
sendSMS() {
if (phone.length != 11) {
  wx.showToast({
    icon: ‘none‘,
    title: ‘输入11位手机号‘,
  })
  return
}
let code = this.generateMixed(4)
console.log(‘本地生成的验证码‘, code)
wx.cloud.callFunction({
  name: "sendSms",
  data: {
    phone: phone,
    code: code //生成4位的验证码
  }
}).then(res => {
  console.log(‘发送成功‘, res)
}).catch(res => {
  console.log(‘发送失败‘, res)
})
},
//获取要发送的手机号
getPhone(event) {
console.log(event.detail.value)
phone = event.detail.value
},
})

    index.wxml如下
    技术图片
    到这里我们的短信验证码的发送就完整的实现了，是不是很简单。

短信发送参数的设置与获取

首先是去腾讯云自己开通短信功能，然后需要自己去申请模板，填写签名。
技术图片
我这里把所需要的参数，都给大家标准出来了。大家只需要自己去官网设置对应的模板和签名，然后审核通过后，把对应的参数放到我们的云函数里即可。

短信验证的原理讲解

在网上找了一张短信验证的原理图，如下
技术图片

大家可以对照这看下，这个原理图。对应的源码我上面其实已经给大家贴出来了。
如果大家觉得不完整，我也已经把完整源码放到网盘里了，有需要的同学可以到我公号里回复“短信”获取源码。
技术图片

后面我还会分享更多小程序相关的知识点出来，请持续关注。

以上是关于云开发--实现发送邮件+短信+链接跳转小程序功能的主要内容，如果未能解决你的问题，请参考以下文章

小程序群发短信，借助云开发5行代码实现短信群发功能

借助云开发实现小程序短信验证码的发送

vue项目-h5跳转小程序

a标签跳转小程序

小程序可以跳转网页么

微信小程序如何发送短信验证码，无需搭建服务器