文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序码生成,扫码携带参数进入指定页面

2023-09-05 11:55

关注

一、准备工作

(1)微信小程序后台获取小程序的appIdsecret

小程序后台管理(开发管理➡开发设置)

(2)扫码跳转的页面在app.json中已经注册

注册的路径与传过去的路径一致

(3)小程序已经有已发布的线上版本,否则会找不到页面报错

体验版的不行,找不到相应的页面报错

二、前端模拟获取

1、获取AccessToken

获取小程序全局唯一后台接口调用凭据,token有效期为7200s。
参考文档:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html

getAccessToken() {  let that = this  let appId = 'XXX'  let secret = 'XXX'  wx.request({    url: `https://api.weixin.qq.com/cgi-bin/token?appid=${appId}&secret=${secret}&grant_type=client_credential`,    data: {},    header:{      'content-type':'json'    },    success:function(res) {      console.log(res);      that.getWxQrCode(res.data.access_token)    }  })}

在这里插入图片描述

2、获取不限制的小程序二维码

适用于需要的码数量极多的业务场景。通过该接口生成的小程序码,永久有效,数量暂无限制。
参考文档:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html

getWxQrCode(access_token) {   wx.request({     url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`,     data:JSON.stringify({       scene: '1',       page: 'pages/aboutMall/detail/detail'     }),     header:{       'content-type':'json'     },     method: 'POST',     success:function(res) {       console.log(res);     }   }) }

在这里插入图片描述
注意点:scene最大32个可见字符,只支持数字,大小写英文以及部分特殊字符。如果传的字符串比较长就会报错。

三、调用后端接口获取

在实际的开发中,生成小程序码的操作放在了后端,因为后端要把前端传过去的参数在生成码的过程中放进去,用户在扫码的时候就能进入到指定页面并且携带参数调用接口。如:在商品的详情页生成分享海报携带小程序码,小程序码中包含商品id,用户扫码后能跳转到小程序的商品详情页并且拿到商品id调用接口等。

getWxQrCode() {let data = {}data.path = 'pages/aboutMall/detail/detail'    data.scene = this.data.goodId    getWxQrCode(data).then(res => {      if(res.data.code === 1) {        // 后端返回小程序码的url      } else {        wx.showToast({          title: res.data.msg,          icon: 'none'        })      }    })}

后端调用以上两个接口后拿到小程序码的流式文件,经过处理后存到服务器上给前端返回一个url路径,方便小程序进行处理。

附上错误码如下:

在这里插入图片描述

四、小程序页面中接收参数

onLoad中进行接收,拿到值之后(如id)再调用对应的接口

onLoad(options) {console.log(options.scene)}

五、注意点

(1)一般使用微信扫小程序二维码携带参数进入到指定页面,该页面所有调用的接口是不进行token校验的,用户还没有登录,当跳转到需要用户必须先登录的页面(如:下单支付)时再进行授权登录。

(2)跳转到的页面是无法返回上一页的,因为页面栈中没有上一页,但很多时候用户想要看到整个小程序,解决思路是:回到首页,在首页有小程序所有页面的入口,按正常流程来走通过扫码进来到某个页面,页面的左上角显示的是返回箭头,返回一下就退出小程序了。我这边的解决方案是跳转进入的页面用自定义导航栏

如果通过扫码进入,左上角就显示一个小房子图片,点击小房子就能回到首页;如果是正常从上一页进入,就显示箭头,点击返回上一页。

onClickLeft() {    if(this.data.enterWay == 'scan') {      wx.reLaunch({        url: '/pages/index/index',      })    } else {      wx.navigateBack({        delta:1      })    }  },

来源地址:https://blog.csdn.net/m0_46613429/article/details/131066588

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯