(https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/msg-miniprogram.html)
里面包括一个HTML页面jump-mp.html,一个云函数代码cloudfunctions
有 6 处要修改的地方(通过“replace”搜索可以快速定位修改的地方)填入自己的环境参数
因为要实现动态传参,所以有些地方要改一下, 本例传参数为id,如
xxxxxxxxxxxx.com/jump_mp.html?id=1564664
<script>
//加一个取URL参数的函数
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
//。。。。。。。。。。
//下面这个在普通浏览器中调用的JS函数,功能是调用云函数获取跳转的小程序地址
async function openWeapp(onBeforeJump) {
var c = window.c
const res = await c.callFunction({
name: 'public',
data: {
action: 'getUrlScheme',
id:getQueryVariable("id") //此处加上这个动态参数,就可以把id传给云函数了
},
})
........
}
script>
......
//下面修改在微信中打开网页时的动态参数设置法
//path=""即可,然后是JS动态赋值
<wx-open-launch-weapp id="launch-btn" username="gh_fa6d8ee08101" path="">
<template>
<button style="....">打开小程序button>
template>
wx-open-launch-weapp>
<script>
//将小程序路径动态给wx-open-launch-weapp标签的path属性
document.getElementById("launch-btn").setAttribute("path","/pages/feed/feed?id="+getQueryVariable("id"));
script>
body>
html>
上传至静态托管空间,如/jump.mp.html
资源包中的 cloudfunctions 文件夹下面有个 public 文件夹,拖到自己项目的云开发函数中,然后替换自己小程序的path,完成后别忘记上传部署云函数。
传参问题一块解决:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
switch (event.action) {
case 'getUrlScheme': {
return getUrlScheme(event.id) //event.id可以取到jump_mp.html传来的id参数
}
}
return 'action not found'
}
async function getUrlScheme(idnumb) {
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: '/pages/feed/feed',
query: 'id='+idnumb //将参数附在小程序path后面
},
isExpire: false,
expireTime: parseInt(Date.now() / 1000 + 60),
})
}
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.cloudbase.sendSms({
"env": 'env_id', //填自己的云环境ID
"phoneNumberList": [
"+86"+event.phone //动态接收要发送的手机号
],
"smsType": 'Notification',
"templateId": '844110', //小程序跳转的固定模板ID
"templateParamList": [
"打开小程序查看精彩",
"/jump-mp.html?id="+event.id //静态空间的跳转页地址,同时传id参数
]
})
return result
} catch (err) {
return err
}
}
sendMsg(e) {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.data.basicinfo.companyPhone)) {
wx.showToast({ title: "手机号不合法" })
return
}
//把手机号与id参数做成对象
let params = { phone: this.data.Phone, id: this.data.id }
wx.cloud.callFunction({
name: 'sendmsg',
data: params //传给发短信云函数
}).then(res => {
wx.showToast({ title: res.result.errCode == 'ok' ? "发送成功" : "发送失败" })
console.log(res)
}).catch(e => { console.log(e) })
},
流程是这样:
1、在页面JS中触发发短信的函数 sendMsg()
2、sendMsg函数调用发短信的云函数sendmsg,把手机号与动态id发给它。
3、sendmsg云函数获取到手机号与动态id,调用cloud.openapi.cloudbase.sendSms,根据手机号把短信发出去。短信中包括静态托管页的地址和ID参数,如xxxxxx.com/jump_mp.html?id=1111111
4、用户收到短信,点击链接,打开网页。
5、网页jump_mp.html中的openWeapp函数,远程调用云函数public,并把id传过去。
6、public云函数将代码中指定的小程序地址和传来的id用cloud.openapi.urlscheme.generate合成一个小程序跳转地址如:weixin://dl/business/?t=gNDxuDpy9il,返回给jump_mp.html
7、jump_mp.html根据跳转地址进行跳转小程序
如果在第三步中生成的地址在微信中打开,会触发微信网页跳转功能,根据wx-open-launch-weapp标签的path进行跳转。