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

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

首先当然要实现扫码解析功能js的代码:

 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如下:

<view class="saoma" bindtap="click">点我扫一扫</view>

  然后在解析的代码中添加跳转的代码在:

   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变量就好,首先

url: '../dingdan/dingdan'的格式是这样动态的格式就是:
 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才动态跳转

关于微信小程序的动态跳转的更多相关文章

  1. 微信小程序之动态获取元素宽高

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  2. 微信小程序和微信小程序之间的跳转和传参示例代码附讲解

    一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ...

  3. 微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json

    微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app ...

  4. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  5. 微信小程序页面无法跳转

    推荐网址:https://www.jianshu.com/p/e56b55334585 1.无法跳转原因分析 要跳转的路径在app.js里未注册过或路径写错   要跳转的路径是否位于TabBar中 页 ...

  6. 微信小程序:页面跳转时传递数据到另一个页面

    一.功能描述 页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示 二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...

  7. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  8. 微信小程序之 页面跳转 及 调用本地json的假数据调试

    一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...

  9. 微信小程序如何动态增删class类名达到切换tabel栏的效果

    微信小程序和vue还是有点差别的,要想实现通过动态切换class来达到切换css的效果,请看代码: //wxml页面: <view class="tab"> <v ...

随机推荐

  1. C# 接口(3)

    这么半天说了如何使用,实现接口.相信也都发现了接口和抽象类很多相似的地方. 但是! 这两个根本就是不一样的. 抽象类 :                                         ...

  2. 【转】分析.net中的object sender与EventArgs e

    源地址:http://blog.csdn.net/feihu19851111/article/details/7523118

  3. uoj #111. 【APIO2015】Jakarta Skyscrapers

    #111. [APIO2015]Jakarta Skyscrapers 印尼首都雅加达市有 NN 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 00 到 N−1N−1.除了这 NN 座摩 ...

  4. 洛谷P4493 [HAOI2018]字串覆盖(后缀自动机+线段树+倍增)

    题面 传送门 题解 字符串就硬是要和数据结构结合在一起么--\(loj\)上\(rk1\)好像码了\(10k\)的样子-- 我们设\(L=r-l+1\) 首先可以发现对于\(T\)串一定是从左到右,能 ...

  5. 微服务架构下分布式事务解决方案——阿里云GTS

    https://blog.csdn.net/jiangyu_gts/article/details/79470240 1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单.松耦合的服务,这 ...

  6. 伪元素改变date类型input框的默认样式实例页面

    CSS代码: ::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); } ::-web ...

  7. [HAOI2011]Problem b BZOJ2301 数学

    题目描述 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 输入输出格式 输入格式: 第一行一个整数 ...

  8. screen虚拟终端

    screen命令相当于后台执行(虚拟终端) 用法:在一些要执行很久的操作,比如我有个文件有10个G,要传输一天左右,你如果是直接传输,万一你的连接断了.是不是意味着你的操作白费的呢,这时我们可以打开一 ...

  9. C++_函数4-函数重载与函数模板

    函数重载 多个函数,函数名相同,但是调用的时候,参数不同. 函数多态是C++在C语言的基础上新增的功能.多态指的是有多种形式,因此函数多态允许函数可以有多种形式.术语“函数重载”指的是可以有多个同名的 ...

  10. [BZOJ 5330][SDOI2018] 反回文串

    传送门 怎么说呢,一道不可多得的反演题吧,具体解释之后再补 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) ...