微信小程序开发之扫码和带参数跳转（扫码进入小程序带参数）

投稿用户 • 2024年5月10日 pm12:58 • 科研百科 • 阅读 449

前言

之所以把扫码和带参数跳转放到一起是因为这两个都涉及到页面间传参。

1. 小程序之扫码

在现在的移动互联网中，扫码是一个非常重要的应用场景。在眼查查中也得到广泛应用，从最开始的扫会员二维码到扫描预约码到现在的扫描带筛查码的菊花码。

在小程序中扫码需要使用微信官方提供的api，其底层是使用的微信的扫一扫，通过调起微信客户端的扫码界面进行扫码。

具体的Api使用请参考官方文档。需要注意的是在这个过程中，扫描二维码和扫描菊花码是不同处理过程。

扫描普通二维码结果在result中拿，扫描菊花码结果在path中拿。在下一节中将会具体说明。

2. 实际项目中的扫码

上代码进行说明

scan() {

let that = this;

wepy.scanCode({

onlyFromCamera: false, //是否只能从相机扫码，不允许从相册选择图片,

success: res => {}

}).then(res => {

that.onScanResult(res);

});

在调用wepy.scanCode后，将结果交由onScanResult方法处理

/**

* 扫描成功

onScanResult(res) {

if (res == null) {

return;

}

// 扫到了二维码

if (res.scanType == \”QR_CODE\”) {

this.getDataByCode(res.result)

this.$apply();

} else if (res.scanType == \”WX_CODE\”) {

if (stringUtils.isNullOrEmpty(res.path)) {

this.getScreenDetail(res.result);

this.$apply();

} else {

let path = decodeURIComponent(res.path)

let senceIndex = path.indexOf(\”=\”)

let code = path.substring(senceIndex 1, path.length);

this.getDataByCode(code);

this.$apply();

}

在具体的处理中根据scanType的不同从不同的字段中取数据。

此处需要特别注意的是菊花码的生成，如果只是小程序的二维码可以在微信小程序后台中直接下载物料，但是如果是需要生成自定义的带参数的小程序二维码则需要调用对应的接口才能实现。获取自定义的小程序码有如下两种方式：

l 使用官方工具：

https://mp.weixin.qq.com/wxamp/wxaqrcode/weappcode?simple=1&token=2009620926&lang=zh_CN

但是这种方式只能生成指定页面的小程序码，无法再带参数。

l 使用https接口获取：可通过后台调用或者使用网络请求工具模拟。除了可以指定页面路径外还可以指定接口。官方提供了ABCD4个接口我们使用的是B接口，page指定页面路径，scene指定页面参数。

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html

此外还需要注意使用时需要用到accessToken

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

3. 页面带参数跳转

页面带参数跳转这个功能主要用于小程序被外部应用打开时使用，比如从公众号的自定义菜单项和眼查查App中跳转二来。

由于小程序的页面栈逻辑，如果直接跳转至对应页面，在退出这个页面后将直接退出小程序无法进入其他页面，所以我们采用的方案是所有跳转交由home页面执行，在home页面拿到对应的参数后做出跳转动作。

var page, param;

console.log(\”option\”, option)

if (option != null) {

if (option.src) {

this.enablePageSwitch = true;

page = option.src;

}

if (option.param) {

param = option.param

}

this.$parent.loginToServer().then(() => {

if (page) {

this.switchToPage(page, param)

this.enablePageSwitch = false;

} else {

this.bannerList();

this.getHomeTags();

}

})

/**

* 跳转至页面

switchToPage(page, param) { // TODO: 跳转至具体的页面

}

参考资料

1.微信小程序扫码说明

https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html

2. 小程序码的参数获取

https://www.jianshu.com/p/108233ed7ed0

微信小程序开发之扫码和带参数跳转（扫码进入小程序带参数）

前言

1. 小程序之扫码

2. 实际项目中的扫码

3. 页面带参数跳转

参考资料

相关推荐