微信小程序掃描二維碼概念怎么實現

發(fā)布時間：2022-03-10 14:42:08 來源：億速云閱讀：300 作者：iii 欄目：開發(fā)技術

這篇“微信小程序掃描二維碼概念怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序掃描二維碼概念怎么實現”文章吧。

頁面分析

后臺需要拿到開鎖密碼，然后顯示在頁面上
我們需要一個定時器，規(guī)定多長時間用來檢查單車是否損壞，這期間如果單車故障，可以點擊回首頁去車輛報障，當然也就取消了本次掃碼。
如果單車沒有問題，檢查時長完成后，自動跳轉到計費頁面

頁面布局

<view class="container">
<view class="password-title">
<text>開鎖密碼</text>
</view>
<view class="password-content">
<text>{{password}}</text>
</view>
<view class="tips">
<text>請使用密碼解鎖，{{time}}s后開始計費</text>
<view class="tips-action" bindtap="moveToWarn">
車輛有問題?
<text class="tips-href">回首頁去車輛報障</text>
</view>
</view>
</view>

微信小程序的頁面元素有自己的一套名字，用的是weui設計風格，但是元素種類比較少，比如說<view>就代表著<div>，<text>是行內元素，<image>是圖片標簽等，所以頁面標簽這一塊只要有html基礎就很容易理解

頁面樣式

.container{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: #fff;
}
.password-title,.tips{
width: 100%;
flex: 1;
text-align: center;
padding: 60rpx 0;
}
.password-content{
width: 100%;
flex: 8;
text-align: center;
font-size: 240rpx;
font-weight: 900;
}
.tips{
font-size: 32rpx;
}
.tips .tips-action{
margin-top: 20rpx;
}
.tips .tips-href{
color: #b9dd08
}

樣式方面完全是css，注意這里的單位是rpx，是小程序為了自適應所有設備而設定的單位，按寬度為750px的設備計算，1rpx = 0.5px。其他比例換算可以看官方文檔。
先來了解兩個知識點：

數據渲染頁面：前面我們在地圖組件中設置了數據模板，然后在js里通過服務器獲取數據動態(tài)給模板數據賦值，每當js數據改變，頁面就會重新渲染數據。所以核心思想是數據驅動頁面。我們在結構里設置了數據模板{{time}}，說明這個數據是需要我們去改變的，所以先在data對象里賦予初始值9（為了調試方便，特意把時間調的很短）
為元素綁定事件：和傳統html里不同，小程序頁面為元素綁定事件不能操作元素，不然就違背了數據驅動頁面的初衷，所以小程序在元素內聲明一個變量如 bindtap="moveToWarn"來為指定元素綁定點擊事件，然后在js里實現這個事件的功能。還可以綁定很多事件類型，更多可以查閱事件文檔

先來回頭看一下首頁地圖立即用車事件代碼，如果當前沒有在計費，將可以掃碼，掃碼成功后將會傳遞參數（密碼和車牌號）并跳轉到../scanresult/index，也就是本頁面。

// 地圖控件點擊事件
bindcontroltap: function(e){
// 判斷點擊的是哪個控件 e.controlId代表控件的id，在頁面加載時的第3步設置的id
switch(e.controlId){
// 點擊定位控件
case 1: this.movetoPosition();
break;
// 點擊立即用車，判斷當前是否正在計費
case 2: if(this.timer === "" || this.timer === undefined){
// 沒有在計費就掃碼
wx.scanCode({
success: (res) => {
// 正在獲取密碼通知
wx.showLoading({
title: '正在獲取密碼',
mask: true
})
// 請求服務器獲取密碼和車號
wx.request({
url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',
data: {},
method: 'GET',
success: function(res){
// 請求密碼成功隱藏等待框
wx.hideLoading();
// 攜帶密碼和車號跳轉到密碼頁
wx.redirectTo({
url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,
success: function(res){
wx.showToast({
title: '獲取密碼成功',
duration: 1000
})
}
})
}
})
}
})
// 當前已經在計費就回退到計費頁
}else{
wx.navigateBack({
delta: 1
})
}
break;
// 點擊保障控件，跳轉到報障頁
case 3: wx.navigateTo({
url: '../warn/index'
});
break;
// 點擊頭像控件，跳轉到個人中心
case 5: wx.navigateTo({
url: '../my/index'
});
break;
default: break;
}
},

我們在js里面寫下如下代碼，本頁面的options就是上面?zhèn)鬟f過來的參數。試試打印出來是什么！

// pages/scanresult/index.js
Page({
data:{
time: 9 // 默認計時時長，這里設短一點，用于調試，ofo app是90s
},
// 頁面加載
onLoad:function(options){
// 獲取密碼
this.setData({
password: options.password
})
// 設置初始計時秒數
let time = 9;
// 開始定時器
this.timer = setInterval(() => {
this.setData({
time: -- time // 倒計時
});
// 讀完秒后攜帶單車號碼跳轉到計費頁
if(time = 0){
clearInterval(this.timer)
wx.redirectTo({
url: '../billing/index?number=' + options.number
})
}
},1000)
},
// 點擊去首頁報障
moveToWarn: function(){
// 清除定時器
clearInterval(this.timer)
wx.redirectTo({
url: '../index/index'
})
}
})

當倒計時完成之后，就應該自動跳轉到計費頁

頁面分析

后臺需要拿到單車編號，并顯示在頁面上
我們需要一個計時器累加騎行事件用來計費，而且可以顯示最大單位是小時
兩個按鈕：結束騎行，回到地圖。其中，點擊結束騎行，關閉計時器，根據累計時長計費；點擊回到地圖，如果計時器已經關閉了，就關閉計費頁，跳轉到地圖。如果計時器仍然在計時，保留當前頁面，跳轉到地圖。
點擊回到地圖需要把計時器狀態(tài)帶給首頁，首頁做出判斷，判定再次點擊立即用車響應合理邏輯（已經在計費，不能重復掃碼。已經停止計費了，需要重新掃碼）

頁面結構（看看我們哪些是數據模板？，為元素綁定了什么事件？）

<view class="container">
<view class="number">
<text>當前單車編號: {{number}}</text>
</view>
<view class="time">
<view class="time-title">
<text>{{billing}}</text>
</view>
<view class="time-content">
<text>{{hours}}:{{minuters}}:{{seconds}}</text>
</view>
</view>
<view class="endride">
<button type="warn" disabled="{{disabled}}" bindtap="endRide">結束騎行</button>
<button type="primary" bindtap="moveToIndex">回到地圖</button>
</view>
</view>

頁面樣式

.container{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: #fff;
}
.number,.endride{
padding: 60rpx 0;
flex: 2;
width: 100%;
text-align: center;
}
.time{
text-align: center;
width: 100%;
flex: 6;
}
.time .time-content{
font-size: 100rpx;
}
.endride button{
width: 90%;
margin-top: 40rpx;
}

數據邏輯（看注釋更好理解哦）

// pages/billing/index.js
Page({
data:{
hours: 0,
minuters: 0,
seconds: 0,
billing: "正在計費"
},
// 頁面加載
onLoad:function(options){
// 獲取掃碼成功頁傳過來的車牌號，再定義一個定時器
this.setData({
number: options.number,
timer: this.timer
})
// 初始化計時器
let s = 0;
let m = 0;
let h = 0;
// 計時開始
this.timer = setInterval(() => {
this.setData({
seconds: s++
})
if(s == 60){
s = 0;
m++;
setTimeout(() => {
this.setData({
minuters: m
});
},1000)
if(m == 60){
m = 0;
h++
setTimeout(() => {
this.setData({
hours: h
});
},1000)
}
};
},1000)
},
// 結束騎行，清除定時器
endRide: function(){
clearInterval(this.timer);
this.timer = "";
this.setData({
billing: "本次騎行耗時",
disabled: true
})
},
// 攜帶定時器狀態(tài)回到地圖
moveToIndex: function(){
// 如果定時器為空
if(this.timer == ""){
// 關閉計費頁跳到地圖
wx.redirectTo({
url: '../index/index'
})
// 保留計費頁跳到地圖，帶上計時器狀態(tài)
}else{
wx.navigateTo({
url: '../index/index?timer=' + this.timer
})
}
}
})

頁面分析的第4步，主要實現在moveToIndex函數里。結束騎行之后，設置定時器值為空，當點擊回到地圖時判斷計時器的狀態(tài)（值是否為空）。如果為空，關閉計費頁，結束本次騎行。如果不為空，攜帶定時器狀態(tài)跳轉到首頁，首頁立即用車點擊事件就會對傳過來的參數（計時器狀態(tài)）響應合理邏輯。再回去上面看一下立即用車的判斷條件，當本頁面?zhèn)鬟^去的計時器不滿足條件時，我們在地圖首頁點擊立即用車將會回到本頁面

以上就是關于“微信小程序掃描二維碼概念怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

微信小程序掃描二維碼概念怎么實現

猜你喜歡

最新資訊

相關推薦

相關標簽