如何采用演示视频来学习短信跳转小程序的能力?

优采云 发布时间: 2021-07-22 21:18

  如何采用演示视频来学习短信跳转小程序的能力?

  写在前面

  如果你想独立开发,但没有云开发经验,可以使用演示视频学习本教程:

  一、能力介绍

  国内非个人主体认证小程序,开启静态网站后,可发出支持不认证跳转到对应小程序的短信。短信将收录一个静态网站 链接,可以在微信内或微信外打开。打开页面后,用户可以一键跳转到你的小程序。

  链接的网页使用 URL Scheme 拉起微信在外部浏览器中打开主小程序。

  简而言之,短信重定向能力的实现分为“配置拉起网页”和“发送短信”两步。本教程将介绍如何进行操作来完成短信重定向小程序的能力。

  如果想不写代码也能完成短信重定向小程序,可以参考无代码版教程一步步实现。

  二、操作指南1、网页制作

  首先我们需要构建一个基本的 Web 应用程序,在任何代码编辑器中创建一个 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、local 测试

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

  

  4、上传本地创建的index.html到static网站hosting

  将本地创建的index.html上传到静态网站托管,其中静态托管需要在小程序本身的云开发环境中进行静态托管。

  如果上传到其他静态主机或服务器,仍然可以使用外部浏览器拉起小程序,但是会失去在微信浏览器中拉起带有open标签的小程序的能力,并且不会享受云。开发短信发送跳转链接的能力。

  如果你的目标小程序下有多个云开发环境,你不需要保证云功能和静态托管在同一个环境下,没关系。

  比如你有两个环境A和B,A部署了上面的云功能,但是把index.html部署到B的静态托管环境中,这是没有问题的,满足各种能力的需求。只需确保第一步中index.html网页中的云开发环境配置为云功能所在的环境即可。

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

  5、SMS 发送云功能配置

  在上面创建openMini云函数的环境中,还有一个云函数叫做sendms。

  在这个云函数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、查看短信监控图表

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

  

  三、Summary 短信重定向小程序的核心是静态网站中配置的可重定向网页。外部浏览器实现了 URL Scheme。此方法不适用于微信浏览器,需要使用open标签。 URL Scheme的生成可以是云调用能力,需要在目标小程序的云开发环境的云功能中使用。并且生成的 URL Scheme 只能是自己小程序的打开链接,不能是任何小程序(任何与打开标签不一致的地方)。短信发送能力体验每个环境第一个月100条免费额度,超过额度可以去开发者工具-云开发控制台-对应的现收现付环境-资源包-短信资源打包购买。如果当前资源包不能满足需求,也可以通过云开发工单提交申请

  

  SMS 发送也是一种云调用功能。需要真实小程序用户调用才能正常触发。其他方法报错并返回参数错误。为防止滥用,云功能和网页可以放置在不同的环境中。只要确保小程序属于同一个即可。 (需要保证对应的环境ID可以连接)如果不需要短信能力,可以忽略最后两步cms配置渠道投递,数据统计可以参考

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线