关于微信小程序的动态跳转页面

来源：互联网发布：单片机怎样驱动12v 编辑：程序博客网时间：2024/05/19 19:14

最近在研究微信小程序。在做一个简单的购物小程序时，遇到一个问题：如何通过扫码实现动态的跳转页面功能，

通过研究终于找到了解决方法：

首先当然要实现扫码解析功能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才动态跳转

阅读全文

0 0