要扫的二维码, 通过草料二维码生成的, 这个网站挺好的, 用起来比较简单方便, 可以直接输入文字生成二维码, 也可以放入链接生成二维码.
草料二维码: 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
效果
其余的二维码工具; 一个文艺的在线生成漂亮的二维码工具网站
顺手写的 demo 放在了 GitHub 上面了, 有需要的可以直接点击链接下载.
GitHub 地址: https://github.com/wangxiaoting666/bind
来源: http://www.jianshu.com/p/413c5831ddd6