關於微信小程式的動態跳轉頁面
阿新 • • 發佈：2019-01-08
最近在研究微信小程式。在做一個簡單的購物小程式時，遇到一個問題：如何通過掃碼實現動態的跳轉頁面功能，
通過研究終於找到了解決方法：
首先當然要實現掃碼解析功能js的程式碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
click:
function () {
var
that = this;
var
show;
wx.scanCode({
success:
(res) => {
//
this.show = "--result:" + res.result + "--scanType:" + res.scanType + "--charSet:" + res.charSet + "--path:" + res.path;this.show
= res.result;
that.setData({
show:
this.show
})
},
fail:
(res) => {
wx.showToast({
title:
'失敗',
icon:
'success',
duration:
2000
})
},
complete:
(res) => {
}
})
},
|
wxml如下：
| 1 |
<view class="saoma"
bindtap="click">點我掃一掃</view>
|
然後在解析的程式碼中新增跳轉的程式碼在：
| 1 2 3 4 5 6 7 8 9 10 11 |
wx.scanCode({
success:
(res) => {
//
this.show = "--result:" + res.result + "--scanType:" + res.scanType + "--charSet:" + res.charSet + "--path:" + res.path;
this.show
= res.result;
that.setData({
show:
this.show
})
wx.navigateTo({
url:
'../dingdan/dingdan'})
},
|
那如何實現動態的跳轉呢？其實引用data中的show變數就好，首先
| 1 |
url:
'../dingdan/dingdan'的格式是這樣動態的格式就是：
|
| 1 2 3 4 5 |
var
test = this.data.show; //讀取data中show的值
wx.navigateTo({
//url:
'../dingdan/dingdan?money=100'
url:
'../' + test + '/' + test//動態跳轉頁面
})
|
通過程式碼我們可以知道變數test其實為data的show值，而show的值通過上邊的掃碼解析實現了動態改變show的值
如果我們要跳轉到url: '../no1/no1'的頁面只要我們生成內容為‘no1’的二維碼就可以了
*要跳轉到url: '../no1/no1'首先要app.json存在pages/no1/no1
*要有no1這個資料夾
*no1的二維碼解析後show將變為no1，所以要在改變後才引用show才動態跳轉