博客

网页教程一般不步及带参打开页面。只能自己改造一个

实现步骤分析

• 发送短信，短信内容包含网址
• 打开网页,跳转到小程序

具体操作

1.开发工具中，打开云开发面板，开通静态网页托管

2.下载腾讯提供的资源包

（https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/msg-miniprogram.html）

里面包括一个HTML页面jump-mp.html，一个云函数代码cloudfunctions

3.编辑上传jump-mp.html

有 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

4. 部署云函数

资源包中的 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),
  })
}

5. 部署发短信的云函数sendmsg

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
  }
}

6. 调用云函数发短信

  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进行跳转。