一、準(zhǔn)備工作
（1）微信小程序后臺獲取小程序的appId和secret
小程序后臺管理（開發(fā)管理?開發(fā)設(shè)置）
（2）掃碼跳轉(zhuǎn)的頁面在app.json中已經(jīng)注冊
注冊的路徑與傳過去的路徑一致
（3）小程序已經(jīng)有已發(fā)布的線上版本，否則會找不到頁面報錯
體驗版的不行，找不到相應(yīng)的頁面報錯
二、前端模擬獲取
1、獲取AccessToken
獲取小程序全局唯一后臺接口調(diào)用憑據(jù)，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、獲取不限制的小程序二維碼
適用于需要的碼數(shù)量極多的業(yè)務(wù)場景。通過該接口生成的小程序碼，永久有效，數(shù)量暫無限制。
參考文檔：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個可見字符，只支持?jǐn)?shù)字，大小寫英文以及部分特殊字符。如果傳的字符串比較長就會報錯。
三、調(diào)用后端接口獲取
在實際的開發(fā)中，生成小程序碼的操作放在了后端，因為后端要把前端傳過去的參數(shù)在生成碼的過程中放進去，用戶在掃碼的時候就能進入到指定頁面并且攜帶參數(shù)調(diào)用接口。如：在商品的詳情頁生成分享海報攜帶小程序碼，小程序碼中包含商品id，用戶掃碼后能跳轉(zhuǎn)到小程序的商品詳情頁并且拿到商品id調(diào)用接口等。
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'
})
}
})
}
后端調(diào)用以上兩個接口后拿到小程序碼的流式文件，經(jīng)過處理后存到服務(wù)器上給前端返回一個url路徑，方便小程序進行處理。
附上錯誤碼如下：
四、小程序頁面中接收參數(shù)
在onLoad中進行接收，拿到值之后（如id）再調(diào)用對應(yīng)的接口
onLoad(options) {
console.log(options.scene)
}
五、注意點
（1）一般使用微信掃小程序二維碼攜帶參數(shù)進入到指定頁面，該頁面所有調(diào)用的接口是不進行token校驗的，用戶還沒有登錄，當(dāng)跳轉(zhuǎn)到需要用戶必須先登錄的頁面（如：下單支付）時再進行授權(quán)登錄。
（2）跳轉(zhuǎn)到的頁面是無法返回上一頁的，因為頁面棧中沒有上一頁，但很多時候用戶想要看到整個小程序，解決思路是：回到首頁，在首頁有小程序所有頁面的入口，按正常流程來走通過掃碼進來到某個頁面，頁面的左上角顯示的是返回箭頭，返回一下就退出小程序了。我這邊的解決方案是跳轉(zhuǎn)進入的頁面用自定義導(dǎo)航欄文章來源：http://www.zghlxwxcb.cn/news/detail-615826.html
<image wx:if="{{enterWay == 'scan'}}" class="icon_home" src="/public/image/icon_goHome.png" bindtap="onClickLeft" />
<van-nav-bar title="" left-arrow="{{enterWay != 'scan'}}" bind:click-left="onClickLeft" safe-area-inset-top='false' custom-class='navbar' title-class='titleClass' border='false' />
如果通過掃碼進入，左上角就顯示一個小房子圖片，點擊小房子就能回到首頁；如果是正常從上一頁進入，就顯示箭頭，點擊返回上一頁。文章來源地址http://www.zghlxwxcb.cn/news/detail-615826.html
onClickLeft() {
if(this.data.enterWay == 'scan') {
wx.reLaunch({
url: '/pages/index/index',
})
} else {
wx.navigateBack({
delta:1
})
}
},
到了這里，關(guān)于微信小程序碼生成，掃碼攜帶參數(shù)進入指定頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
