关于微信小程序的动态跳转
最近在研究微信小程序。在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能,
通过研究终于找到了解决方法:
首先当然要实现扫码解析功能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才动态跳转
关于微信小程序的动态跳转的更多相关文章
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- 微信小程序和微信小程序之间的跳转和传参示例代码附讲解
一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ...
- 微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json
微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- 微信小程序页面无法跳转
推荐网址:https://www.jianshu.com/p/e56b55334585 1.无法跳转原因分析 要跳转的路径在app.js里未注册过或路径写错 要跳转的路径是否位于TabBar中 页 ...
- 微信小程序:页面跳转时传递数据到另一个页面
一.功能描述 页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示 二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序之 页面跳转 及 调用本地json的假数据调试
一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...
- 微信小程序如何动态增删class类名达到切换tabel栏的效果
微信小程序和vue还是有点差别的,要想实现通过动态切换class来达到切换css的效果,请看代码: //wxml页面: <view class="tab"> <v ...
随机推荐
- mysql事务隔离级别回顾
事务隔离级别是针对读数据库数据的一种规则.事务隔离级别是数据库属性不是事务属性. 1.读未提交(read uncommited) 可以读到其他事务修改未提交的数据.(有 脏读,不可重复读,幻读) 事务 ...
- sklearn的train_test_split函数
train_test_split函数用于将矩阵随机划分为训练子集和测试子集,并返回划分好的训练集测试集样本和训练集测试集标签. from sklearn.model_selection import ...
- mybatis 学习笔记(二):mybatis SQL注入问题
mybatis 学习笔记(二):mybatis SQL注入问题 SQL 注入攻击 首先了解下概念,什么叫SQL 注入: SQL注入攻击,简称SQL攻击或注入攻击,是发生于应用程序之数据库层的安全漏洞. ...
- [51nod]1229 序列求和 V2(数学+拉格朗日差值)
题面 传送门 题解 这种颓柿子的题我可能死活做不出来-- 首先\(r=0\)--算了不说了,\(r=1\)就是个裸的自然数幂次和直接爱怎么搞怎么搞了,所以以下都假设\(r>1\) 设 \[s_p ...
- 洛谷P4502 [ZJOI2018]保镖(计算几何+三维凸包)
题面 传送门 题解 我对计蒜几盒一无所知 顺便\(xzy\)巨巨好强 前置芝士 三维凸包 啥?你不会三维凸包?快去把板子写了->这里 欧拉公式 \[V-E+F=2\] \(V:vertex\)顶 ...
- 如何查看Centos版本
使用命令 cat /etc/centos-release 查看效果如下图 当然,你也可以查看红帽的版本 cat /etc/redhat-release 郴州软件开发培训 郴州软件培训 郴州java培训 ...
- ansible基本模块-server
ansible XXX -m service -a "name=XXX state=started enabled=yes"
- php Apache No input file
RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 变为 RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
- C++_代码重用3-私有继承
使用包含:易于理解,类声明中包含表示被包含类的显式命名对象,代码可以通过名称引用这些对象: 使用继承:将使关系更抽象,且继承会引起很多问题,尤其是从多个基类继承时. 私有继承所提供的特性确实比包含多. ...
- LeetCode109. 有序链表转换二叉搜索树
109. 有序链表转换二叉搜索树 问题描述 给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超 ...