收藏
评论

云开发短信跳小程序(自定义开发版)教程官方

写在前面

如果你想要自主开发,但没有云开发相关经验,可以采用演示视频来学习本教程:



一、能力介绍

境内非个人主体的认证的小程序,开通静态网站后,可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接,用户打开页面后可一键跳转至你的小程序。

这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。

总之,短信跳转能力的实现分为两个步骤,「配置拉起网页」和「发送短信」。本教程将介绍如何执行操作完成短信跳转小程序的能力。

如果你想要无需写代码就能完成短信跳转小程序的能力,可以参照无代码版教程进行逐步实现。


二、操作指引

1、网页创建

首先我们需要构建一个基础的网页应用,在任何代码编辑器创建一个 html 文件,在教程这里命名为 index.html

在这个 html 文件中输入如下代码,并根据注释提示更换自己的信息:

  window.onload = function(){
    window.web2weapp.init({
      appId: 'wx999999', //替换为自己小程序的AppID
      gh_ID: 'gh_999999',//替换为自己小程序的原始ID
      env_ID: 'tcb-env',//替换小程序底下云开发环境ID
      function: {
        name:'openMini',//提供UrlScheme服务的云函数名称
        data:{} //向这个云函数中传入的自定义参数
      },
      path: 'pages/index/index.html' //打开小程序时的路径
    })
  }

以上引入的 web2weapp.js 文件是教程封装的有关拉起微信小程序的极简应用,我们直接引用即可轻松使用。

如果你想进一步学习和修改其中的一些WEB展示信息,可以前往 github 获取源码并做修改。

有关于网页拉起小程序的更多信息可以访问官方文档

如果你只想体验短信跳转功能,在执行完上述文件创建操作后,继续以下步骤。


2、创建服务云函数

在上面创建网页的过程中,需要填写一个UrlScheme服务云函数。这个云函数主要用来调用微信服务端能力,获取对应的Scheme信息返回给调用前端。

我们在示例中填写的是 openMini 这个命名的云函数。

我们前往微信开发者工具,定位对应的云开发环境,创建一个云函数,名称叫做 openMini 。

在云函数目录中 index.js 文件替换输入以下代码:

const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: '', // 打开小程序时访问路径,为空则会进入主页
      query: '',// 可以使用 event 传入的数据制作特定参数,无需求则为空
    },
    isExpire: true, //是否到期失效,如果为true需要填写到期时间,默认false
    expire_time: Math.round(new Date().getTime()/1000) + 3600
    //我们设置为当前时间3600秒后,也就是1小时后失效
    //无需求可以去掉这两个参数(isExpire,expire_time)
  })
}

保存代码后,在 index.js 右键,选择增量更新文件即可更新成功。

接下来,我们需要开启云函数的未登录访问权限。进入小程序云开发控制台,转到设置-权限设置,找到下方未登录,选择上几步我们统一操作的那个云开发环境(注意:第一步配置的云开发环境和云函数所在的环境,还有此步操作的环境要一致),勾选打开未登录 

接下来,前往云函数控制台,点击云函数权限,安全规则最后的修改,在弹出框中按如下配置: 


3、本地测试

我们在本地浏览器打开第一步创建的 index.html ;唤出控制台,如果效果如下图则证明成功! 需要注意,此处本地打开需要时HTTP协议,建议使用live server等扩展打开。不要直接在资源管理器打开到浏览器,会有跨域的问题! 


4、上传本地创建好的 index.html 至静态网站托管

将本地创建好的 index.html 上传至静态网站托管,在这里静态托管需要是小程序本身的云开发环境里的静态托管。

如果你上传至其他静态托管或者是服务器,你仍然可以使用外部浏览器拉起小程序的能力,但会丧失在微信浏览器用开放标签拉起小程序的功能,也不会享受到云开发短信发送跳转链接的能力。

如果你的目标小程序底下有多个云开发环境,则不需要保证云函数和静态托管在一个环境中,无所谓。

比如你有A、B两个环境,A部署了上述的云函数,但是把 index.html 部署到B的环境静态托管中了,这个是没问题的,符合各项能力要求。只需要保证第一步 index.html 网页中的云开发环境配置是云函数所在环境即可。

部署成功后,你便可以访问静态托管的所在地址了,可以通过手机外部浏览器以及微信内部浏览器测试打开小程序的能力了。


5、短信发送云函数的配置

在上面创建 openMini 云函数的环境中再来一个云函数,名字叫 sendsms 。

在此云函数 index.js 中配置如下代码:

const cloud = require('wx-server-sdk')
cloud.init({
	env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
	try {
		const config = {
			env: event.env,
			content: event.content ? event.content : '发布了短信跳转小程序的新能力',
			path: event.path,
			phoneNumberList: event.number
		}
		const result = await cloud.openapi.cloudbase.sendSms(config)
		return result
	} catch (err) {
		return err
	}
}

保存代码后,在 index.js 右键,选择增量更新文件即可更新成功。


6、测试短信发送能力

在小程序代码中,在 app.js 初始化云开发后,调用云函数,示例代码如下:

App({
  onLaunch: function () {
    wx.cloud.init({
      env:"tcb-env", //短信云函数所在环境ID
      traceUser: true
    })
    wx.cloud.callFunction({
      name:'sendsms',
      data:{
        "env": "tcb-env",//网页上传的静态托管的环境ID
        "path":"/index.html",//上传的网页相对根目录的地址,如果是根目录则为/index.html
        "number":[
          "+8616599997777" //你要发送短信的目标手机,前面需要添加「+86」
        ]
      },success(res){
        console.log(res)
      }
    })
  }
})

重新编译运行后,在控制台中看到如下输出,即为测试成功:

你会在发送的目标手机中收到短信,因为短信中包含「退订回复T」字段,可能会触发手机的自动拦截机制,需要手动在拦截短信中查看。

需要注意:你可以把短信云函数和URLScheme云函数分别放置在不同云开发环境中,但必须保证所放置的云开发环境属于你操作的小程序

另外,出于防止滥用考虑,短信发送的云调用能力需要真实小程序用户访问才可以生效,你不能使用云端测试、云开发JS-SDK以及其他非wx.cloud调用方式(微信侧WEB-SDK除外),会提示如下错误:

如果你想在其他处使用此能力,可以使用服务端API来做正常HTTP调用,具体访问官方文档


7、查看短信监控图表

进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控,即可查看短信监控曲线图、短信发送记录。


三、总结

  1. 短信跳转小程序核心是静态网站中配置的可跳转网页,外部浏览器通过URL Scheme 来实现的,这个方式不适用于微信浏览器,需要使用开放标签才可以
  2. URL Scheme的生成是云调用能力,需要是目标小程序的云开发环境的云函数中使用才可以。并且生成的URL Scheme只能是自己小程序的打开链接,不能是任意小程序(和开放标签的任意不一致)
  3. 短信发送能力的体验是每个有免费配额的环境首月100条,如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包,进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请
  4. 短信发送也是云调用能力,需要真实小程序用户调用才可以正常触发,其他方式均报错返回参数错误,出于防止滥用考虑
  5. 云函数和网页的放置可以不在同一个环境中,只需要保证所属小程序一致即可。(需要保证对应环境ID都能接通)
  6. 如果你不需要短信能力,可以忽略最后两个步骤
  7. CMS配置渠道投放、数据统计可参考官方文档
相关主页:
290770浏览
最后一次编辑于  2021-04-07
知识库内容非实时更新,可能已过期、失效或不适用于当前情形,请谨慎参考
收藏
反馈

54 个评论

  • ㅤ背向太阳
    ㅤ背向太阳
    2021-01-13

    获取的地址weixin://dl/business/?t=P5vGfyGFyAl

    会不会过期?怎么设置不过期呢?


    2021-01-13
    赞同
    回复
  • 欢
    2021-01-13

    如果你不需要短信能力,可以忽略最后两个步骤”,就是说,

    1、完成“上传本地创建好的 index.html 至静态网站托管”,后就实现:点击短信中的小程序路径,可以打开小程序。

    2、短信可以通过第三方应用发放,在短信内容上贴上小程序的路径path就行?


    2021-01-13
    赞同
    回复
  • 冰冰冰
    冰冰冰
    2021-01-13

    我再cms上发送短信 显示发送成功 但是接收方一直收不到短信,也没有触发限频规则,手机也是正常使用的

    2021-01-13
    赞同
    回复 8
    • 疯狂的小辣椒
      疯狂的小辣椒
      2021-01-13
      文章中有提到
      2021-01-13
      回复
    • 冰冰冰
      冰冰冰
      2021-01-13回复疯狂的小辣椒
      您好 手机并没有拦截 试了几个人的手机号都是收不到
      2021-01-13
      回复
    • 冰冰冰
      冰冰冰
      2021-01-13回复疯狂的小辣椒
      2021-01-13
      回复
    • 冰冰冰
      冰冰冰
      2021-01-13回复冰冰冰
      这些规则都是没有触发的,也收不到短信
      2021-01-13
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2021-01-13回复冰冰冰
      提供下小程序的appid,还有收不到短信的手机号,下发短信的时间建议也提供下,另外,这些信息通过私信的方式发给我,进入我本人的个人主页可找到私信入口,提供后在这里也答复下。
      2021-01-13
      回复
    查看更多(3)
  • 小宝
    小宝
    2021-01-13

    我的需求是同一个path,但是query参数不一样,云函数调用生成URL scheme,每天上限也是1000个吗?我看服务端API调用是有每天1000个数量限制。

    2021-01-13
    赞同
    回复 6
    • 刘盛
      刘盛
      2021-01-13
      临时的schema没有限制,永久的有条数限制
      2021-01-13
      回复
    • 小宝
      小宝
      2021-01-13回复刘盛
      我是要生成订单详情页的URL scheme,用临时的过期了用户就进不来了,用永久的又不够用。
      2021-01-13
      1
      回复
    • 刘憑
      刘憑
      2021-01-14回复疯狂的小辣椒
      请问跳转条件小程序用户是指别人家的小程序用户还是自己家的小程序用户?
      2021-01-14
      回复
    • 刘盛
      刘盛
      2021-01-14回复小宝
      不建议在短信里带生成好的schema
      1、你发送链接是带个订单ID
      2、H5中间页用这个订单ID去请求生成临时schema
      3、通过schema拉起小程序
      2021-01-14
      回复
    • 小宝
      小宝
      2021-01-16回复刘盛
      知道了,谢谢你。
      2021-01-16
      回复
    查看更多(1)

正在加载...

登录 后发表内容