发送短信打开带参数小程序


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

实现步骤分析

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

具体操作

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在PHP中生成小程序参数,可以使用微信开放平台提供的接口来实现。具体步骤如下: 1. 首先,你需要获取到小程序的access_token。可以通过发送HTTP请求到微信开放平台的接口来获取,具体的请求地址为:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=YOUR_APPID&secret=YOUR_APPSECRET。其中,YOUR_APPID和YOUR_APPSECRET分别为你的小程序的AppID和AppSecret。 2. 使用上一步获取到的access_token,发送HTTP POST请求到微信开放平台的接口,生成小程序码。请求地址为:https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN,其中,ACCESS_TOKEN为上一步获取到的access_token。 3. 在请求中,需要传递一个JSON数据,包含生成小程序码所需的参数,例如: ```php $postData = array( 'path' => 'pages/index/index', // 小程序页面路径 'width' => 430, // 小程序码的宽度 'scene' => 'param1=value1&param2=value2', // 自定义参数,可用于后续业务处理 // 其他参数... ); ``` 4. 将JSON数据转换为字符串,并发送POST请求到微信开放平台的接口,获取小程序码的二进制数据。 5. 将获取到的二进制数据保存为图片文件,例如: ```php $file = fopen('qrcode.jpg', 'w'); fwrite($file, $response); // 将二进制数据写入文件 fclose($file); ``` 以上是使用PHP生成小程序参数的基本步骤,具体实现代码可以根据你的需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值