扫描设备二维码携带参数跳转到微信小程序指定页面(微信小程序二维码配置规则)

本文涉及的产品
.cn 域名,1个 12个月
简介: 扫描设备二维码携带参数跳转到微信小程序指定页面(微信小程序二维码配置规则)

***1:打开微信公众平台: https://mp.weixin.qq.com 扫码登录***
在这里插入图片描述

2.点击左侧边栏开发=>开发管理=>开发设置=>服务器域名(必须是https服务 不可以是http)

提示:进行操作上线的项目千万不要忘记配置域名 不然你的接口请求不到数据 本机测试可以把开发工具的不校验域名打开是可以获取数据的
① request合法域名是发送请求获取数据的
② uploadFile合法域名是调用官方api上传文件需要使用
不一一列举
如下图开始配置:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.点击左侧边栏开发=>开发管理=>开发设置=>服务器域名=>扫普通链接二维码打开小程序

点击右侧添加:

在这里插入图片描述

点击添加进入此界面:
在这里插入图片描述
点击保存

保存后自动跳转到这里
在这里插入图片描述

为了让大家看得清楚我一一拆分

1:二维码地址
在这里插入图片描述
2:小程序界面路径
在这里插入图片描述
3.点击操作的发布即可
在这里插入图片描述

以上二维码配置规则完毕----疑问链接配置好了 二维码怎么看?

教程

: 打开 百度搜索草料二维码生成器 https://cli.im/ 二维码生成工具,输入配置好的二维码规则即可生成二维码,

在这里插入图片描述
然后在你要跳转到的界面代码进行接收参数
在这里插入图片描述

 onLoad(options) {
 if (options.q) {
var scan_url = decodeURIComponent(options.q);
// var scan_url = "https://api.cloudmis.com?id='8'&orderId=8BE519DE9A6A426988B88AE5FD391280"正则匹配这个链接
var reg = /[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i;
var arr = scan_url.match(reg);
            this.orderId = arr[6]//获取二维码链接传输的OrderId参数进行赋值保存(用的是vue语法)
            this.urlq = options.q//获取二维码传输的链接和所有参数
        }
        }
        

如果你是用的hbuild编辑器发布代码 要使用发行进行打包 不要点击运行 运行是测试的时候使用的
当然点击运行发布代码也可以正常使用(不建议)在这里插入图片描述

接下来检查好代码无误打开微信开发者工具就开始上传了:
在这里插入图片描述
上传成功后再次打开微信公众平台https://mp.weixin.qq.com
点击左侧边栏管理=>版本管理=>开发版本=>点击提交审核
在这里插入图片描述
审核通过后看审核版本点击发布
在这里插入图片描述
点击发布之后就是线上版本了 就可以打开草料二维码生成二维码扫码进入指定界面了
(注意需要发布代码需要填写你的小程序信息下期讲解 这期不是重点主题)
在这里插入图片描述
成果展示
在这里插入图片描述
下期出什么教程请留言
在这里插入图片描述

相关文章
|
21天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
328 7
|
21天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
402 1
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
46 1
|
25天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
133 1
|
26天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
415 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
21天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
230 0
|
25天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
351 0
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
31 0
|
2月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
21天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
146 3