文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

扫码跳转小程序终极方案,详细记录踩过的坑!不信进来看!扫描普通二维码进入小程序功能记录(两种方式)

2023-09-07 21:42

关注

小程序管理平台https://mp.weixin.qq.com/

选择:开发管理->开发设置->扫普通链接二维码打开小程序

校验文件

点击添加进入配置页面

!!!还有一个校验文件,这个必须扔到服务器上面,放在域名下根目录即可,只要在二维码规则下的地址可以访问到即可 放在域名下根目录即可,只要在二维码规则下的地址可以访问到即可否则这个扫码跳转小程序校验不通过。(点击添加进入到的配置页面就可以获取到校验文件)

以上配置的一些说明:二维码规则具体可以查看官方说明:https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

需要注意:测试范围配置项中的开发班和体验版是不支持自定义传参的,也就是说扫了二维码会跳转到空白页面。所以选择了开发版或体验版需要进行测试链接的填写,就好啦!特别的是测试链接与二维码规则要符合一致。(二维码规则在官方说明里面有详细介绍)。普通二维码内部的网址一定要是https://这个不能省略。

如果二维码规则的使用场景是:前面域名不变后面?id=xxx是动态改变的,可以将二维码规则配置成这个https://www.qq.com/a/ ;然后自己生成的二维码url可以是https://www.qq.com/a/ ?id=1 或者https://www.qq.com/a/ ?id=2;等等等动态传参。一定注意这种适配子路径必须以斜杠结尾。

  1. 协议类型”和“选择大小写”均保持默认选项

  1. “二维码规则”:填写自己的URL,比如a.com/demo/

  1. “前缀占用规则”:选择“不占用”

  1. “校验文件”:下载校验文件并上传到自己的域名所在服务器上,注意是放在demo目录下。官方释义:放置于 URL 中声明的最后一级子目录下,若无子目录,则放置于 host 所属服务器的顶层目录下

  1. “小程序功能页面”:此处填写pages/index/index

  1. “测试范围”:开发阶段推荐选择“开发版”。

  1. “测试链接(选填)”:可以不填。如果填写的话,可以写a.com/demo/?id=1

  1. 点击“保存”按钮,添加成功后跳转到列表页。

配置完“扫普通链接二维码打开小程序”列表中会多出一条待发布的记录,不发布的话,扫码二维码也会跳转小程序,发布后也可以修改测试范围。另外如果开发者工具想要二维码编译,配置正确的的前提下,必须发布后才可以在开发者工具里面二维码编译,不然会提示不是小程序二维码的报错!!

经常出现的几个神奇问题

  1. 如果扫码后没有跳转微信小程序而是出现403 Forbidden错误页,也有可以是别的错误状态。此时大概率是测试链接未配置

如果配置正确,但还是无法打开小程序,那就是微信的问题

  1. 扫码后打开的程序不是最新的

出现这种情况是因为在扫码前访问过旧的小程序,删除后重新扫新码有可能会正确

  1. 每次配置完一般需要五分钟后去测试(血泪史呀)

测试范围选体验版,五分钟后扫码打开的小程序就是体验版小程序;如果测试返回选的线上版,则打开的小程序就是线上已经发版的小程序。(注意测试和正式访问的数据库不同)

  1. 但此时同样会有几种情况出现:

至于为什么会出现乱跳的情况,我无法解释,只能把锅甩给微信了。

有人可能会去查微信开放文档中的说明。微信开放文档?我信你个鬼!

  1. 扫码后“页面不存在”

扫码后能打开小程序,但提示页面不存在

这种情况是因为已打开的小程序中不存在二维码中配置的路径

产生的原因一般是:打开的小程序版本不对

解决的办法也很简单,检查一下二维码中的路径是否存在于对应的小程序中,如果不存在,更换正确即可。

小程序通过以下方式接收参数

onLoad: async function (option) {    if (option && option.q) {      const q = decodeURIComponent(option.q) // 获取到二维码原始链接内容      // const scancode_time = parseInt(option.scancode_time) // 获取用户扫码时间 UNIX 时间戳      console.log("option", option);      console.log("q", q);      let erweima_id = this.getUrlSingleParam('id', q)//调用工具函数获取url中传递的参数      console.log("结果", erweima_id);    }}
export let getUrlSingleParam = function (key, url = location.search) {  const reg = new RegExp("(\\?|&)" + key + "=([^&]*)(&|$)");  const r = url.match(reg);  if (r != null) {    return r[2];    // return unescape(r[2]);//unescape函数显示已经废弃  }  return null;}

测试的话可以通过编译器的二维码编译去测试

后端配置生成小程序二维码

官方文档:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getQRCode.html

getQRCode 与getUnlimitedQRCode两种接口的区别:

地址:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getQRCode.html

地址:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html

步骤

  1. 后端通过调用对应的微信api获取二维码url

  1. 前端对应获取

//getQRCode:    const codeInfo = wx.getLaunchOptionsSync()    this.codePath = codeInfo.query//getUnlimitedQRCode:    this.codePath = decodeURIComponent(query.scene)

用户扫码进入后的逻辑:

在onload或者onshow生命周期中获取或者处理参数

onLoad:function(options){  if(options.scene){    let scene=decodeURIComponent(options.scene);    //&是我们定义的参数链接方式    let userId=scene.split("&")[0];    let recommendId=scene.split('&')[1];    //传递多个参数可以这样写"1234&123"    //其他逻辑处理。。。。。比如方式一中的工具函数也可以  }}

来源地址:https://blog.csdn.net/m0_57033755/article/details/128881743

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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