小程式掃碼成功後帶著引數跳轉到指定頁面
摘要：
要掃的二維碼，通過草料二維碼生成的，這個網站挺好的，用起來比較簡單方便，可以直接輸入文字生成二維碼，也可以放入連結生成二維碼。
草料二維碼： https://cli.im/
index.wxml
<view class="container">
...
要掃的二維碼，通過草料二維碼生成的，這個網站挺好的，用起來比較簡單方便，可以直接輸入文字生成二維碼，也可以放入連結生成二維碼。
草料二維碼： ofollow,noindex">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
原文作者：祈澈姑娘。 技術部落格： https://www.jianshu.com/u/05f416aefbe1
90後前端妹子一枚，愛程式設計，愛運營，愛折騰。長期堅持總結工作中遇到的技術問題。