小程序扫码成功后带着参数跳转到指定页面
时间:2022-06-16
本文章向大家介绍小程序扫码成功后带着参数跳转到指定页面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
要扫的二维码,通过草料二维码生成的,这个网站挺好的,用起来比较简单方便,可以直接输入文字生成二维码,也可以放入链接生成二维码。
草料二维码:https://cli.im/
index.wxml
<view class="container">
<button bindtap='getScancode'>绑定车辆</button>
</view>
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
result: ''
},
onLoad: function() {
},
getScancode: function() {
var _this = this;
// 允许从相机和相册扫码
wx.scanCode({
success: (res) => {
wx.navigateTo({
url: '../navigator/navigator?title=' + res.result
})
var result = res.result;
_this.setData({
result: result,
})
}
})
}
})
navigator.wxml
<view> {{title}} </view>
navigator.js
Page({
data: {},
onLoad: function (options) {
// 生命周期函数--监听页面加载
this.setData({
title: options.title
})
}
})
简单的效果:没有写css相关的代码了,主要是实现这个过程
更加详细的demo:(项目之中实现了一下)
index.wxml
<!-- 底部的按钮 -->
<button class='Scancode' bindtap='getScancode'>绑定车辆</button>
index.wxss
/* 底部按钮 */
.Scancode {
font-size: 39rpx;
background: #010101;
position: fixed;
bottom: 35rpx;
display: flex;
width: 90%;
justify-content: center;
color: #fff;
border-radius:10rpx;
margin-left:30rpx;
margin-right: 30rpx;
z-index:999;
}
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
result: ''
},
onLoad: function() {
},
getScancode: function() {
var _this = this;
// 允许从相机和相册扫码
wx.scanCode({
success: (res) => {
wx.navigateTo({
url: '../bind/bind?title=' + res.result
})
var result = res.result;
_this.setData({
result: result,
})
}
})
}
})
要跳转到bind
bind.wxml
<view class='page_row'>
<view class="search">
<input class='carid' placeholder=" {{title}}" focus="{{focus}}" />
<input class='carnumber' placeholder="请输入车牌号和驾驶证号码" focus="{{focus}}" />
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> 绑定</button>
</view>
<view class='tip'>
定位标签和车辆绑定后即可看跟踪车辆位置
</view>
</view>
bind.wxss
.search input {
height: 100rpx;
border-radius: 5px;
border: 1px solid #d0d0d0;
margin: 100rpx 30rpx;
padding: 0 15rpx;
}
.search button {
border-radius: 5px;
border: 1px solid #d0d0d0;
margin: 100rpx 30rpx;
}
.tip {
text-align: center;
font-size: 34rpx;
}
/* 搜索列表名称 */
.list_name {
position: relative;
width: 100%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ddd;
}
/* 列表名称 */
.lab_name {
position: absolute;
left: 30rpx;
}
bind.js
Page({
data: {
focus: false,
inputValue: ''
},
onLoad: function(options) {
// 生命周期函数--监听页面加载
this.setData({
title: options.title
})
}
})
要扫的二维码
图片.png
效果
- python和C语言混编的几种方式
- 通过“四大行为”对WCF的扩展[实例篇]
- 古中国数学家的计算力真是惊人
- 基于Apache Spark机器学习的客户流失预测
- 数据库连接字符串的处理方法!加密解密连接字符串。
- ASP.net实现无扩展名的URL重写。简单、方便、无需ISAPI。
- 通过自定义ServiceHost实现对WCF的扩展[实例篇]
- 通过自定义ServiceHost实现对WCF的扩展[原理篇]
- python使用rsa库做公钥解密(网上别处找不到)
- 通过“四大行为”对WCF的扩展[原理篇]
- WCF客户端运行时架构体系详解[下篇]
- WCF客户端运行时架构体系详解[上篇]
- WCF服务端运行时架构体系详解[续篇]
- [WCF-Discovery] 实例演示:如何利用服务发现机制实现服务的“动态”调用?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- OpenWRT配置Apache Webdav By HKL,
- 我向面试官讲解了单例模式,他对我竖起了大拇指
- 47 张图带你 MySQL 进阶!!!
- 新特性解读 | InnoDB-Cluster 扫盲-日常运维
- Laravel 框架实现无限极分类
- 这样设置IDEA,让你爽到飞起!
- 这些年,我写过的BUG(一)
- Selenium处理下拉列表
- 掌握好这几个css属性,少写100行js代码
- 计算机基础知识总结与操作系统 PDF 下载
- Kafka工作流程及文件存储机制
- JS破解初探,折腾到头秃的美拍视频采集下载
- 去哪儿景点信息爬取并使用Django框架网页展示
- Kubernetes v1.15.3 升级到 v1.18.5 心得
- 结巴分词seo应用,Python jieba库基本用法及案例参考