微信小程序開發(fā)之OFO共享單車,微信小程序掃描二維碼
2017-12-20
導讀:上一節(jié)我們實現(xiàn)首頁地圖,也響應了控件點擊和用戶拖動地圖事件。這一節(jié)我們實現(xiàn)一下點擊立即用車掃碼成功之后的頁面邏輯。 這里我用了我自己微信號的二維碼,你們可以用你們自...
上一節(jié)我們實現(xiàn)首頁地圖,也響應了控件點擊和用戶拖動地圖事件。這一節(jié)我們實現(xiàn)一下點擊立即用車掃碼成功之后的頁面邏輯。
這里我用了我自己微信號的二維碼,你們可以用你們自己的,掃碼成功后的頁面是醬的:
頁面分析
頁面布局
復制代碼
微信小程序的頁面元素有自己的一套名字,用的是weui設計風格,但是元素種類比較少,比如說<view>就代表著<div>,<text>是行內元素,<image>是圖片標簽等,所以頁面標簽這一塊只要有html基礎就很容易理解
頁面樣式
復制代碼
樣式方面完全是css,注意這里的單位是rpx,是小程序為了自適應所有設備而設定的單位,按寬度為750px的設備計算,1rpx = 0.5px。其他比例換算可以看官方文檔。
先來了解兩個知識點:
先來回頭看一下首頁地圖立即用車事件代碼,如果當前沒有在計費,將可以掃碼,掃碼成功后將會傳遞參數(shù)(密碼和車牌號)并跳轉到../scanresult/index,也就是本頁面。
復制代碼
我們在js里面寫下如下代碼,本頁面的options就是上面?zhèn)鬟f過來的參數(shù)。試試打印出來是什么!
復制代碼
當?shù)褂嫊r完成之后,就應該自動跳轉到計費頁:
頁面分析
頁面結構(看看我們哪些是數(shù)據(jù)模板?,為元素綁定了什么事件?)
復制代碼
頁面樣式
復制代碼
數(shù)據(jù)邏輯(看注釋更好理解哦)
頁面分析的第4步,主要實現(xiàn)在moveToIndex函數(shù)里。結束騎行之后,設置定時器值為空,當點擊回到地圖時判斷計時器的狀態(tài)(值是否為空)。如果為空,關閉計費頁,結束本次騎行。如果不為空,攜帶定時器狀態(tài)跳轉到首頁,首頁立即用車點擊事件就會對傳過來的參數(shù)(計時器狀態(tài))響應合理邏輯。再回去上面看一下立即用車的判斷條件,當本頁面?zhèn)鬟^去的計時器不滿足條件時,我們在地圖首頁點擊立即用車將會回到本頁面
其他章節(jié)
微信小程序開發(fā)之OFO共享單車——掃碼
微信小程序開發(fā)之OFO共享單車——單車報障頁
微信小程序開發(fā)之OFO共享單車——個人中心頁
微信小程序開發(fā)之OFO共享單車——錢包與充值
這里我用了我自己微信號的二維碼,你們可以用你們自己的,掃碼成功后的頁面是醬的:
頁面分析
- 后臺需要拿到開鎖密碼,然后顯示在頁面上
- 我們需要一個定時器,規(guī)定多長時間用來檢查單車是否損壞,這期間如果單車故障,可以點擊回首頁去車輛報障,當然也就取消了本次掃碼。
- 如果單車沒有問題,檢查時長完成后,自動跳轉到計費頁面
頁面布局
- <!--pages/scanresult/index.wxml-->
- <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。其他比例換算可以看官方文檔。
先來了解兩個知識點:
- 數(shù)據(jù)渲染頁面:前面我們在地圖組件中設置了數(shù)據(jù)模板,然后在js里通過服務器獲取數(shù)據(jù)動態(tài)給模板數(shù)據(jù)賦值,每當js數(shù)據(jù)改變,頁面就會重新渲染數(shù)據(jù)。所以核心思想是數(shù)據(jù)驅動頁面。我們在結構里設置了數(shù)據(jù)模板{{time}},說明這個數(shù)據(jù)是需要我們去改變的,所以先在data對象里賦予初始值9(為了調試方便,特意把時間調的很短)
- 為元素綁定事件:和傳統(tǒng)html里不同,小程序頁面為元素綁定事件不能操作元素,不然就違背了數(shù)據(jù)驅動頁面的初衷,所以小程序在元素內聲明一個變量如 bindtap="moveToWarn"來為指定元素綁定點擊事件,然后在js里實現(xiàn)這個事件的功能。還可以綁定很多事件類型,更多可以查閱事件文檔
先來回頭看一下首頁地圖立即用車事件代碼,如果當前沒有在計費,將可以掃碼,掃碼成功后將會傳遞參數(shù)(密碼和車牌號)并跳轉到../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過來的參數(shù)。試試打印出來是什么!
- // pages/scanresult/index.js
- Page({
- data:{
- time: 9 // 默認計時時長,這里設短一點,用于調試,ofo app是90s
- },
- // 頁面加載
- onLoad:function(options){
- // 獲取密碼
- this.setData({
- password: options.password
- })
- // 設置初始計時秒數(shù)
- 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'
- })
- }
- })
當?shù)褂嫊r完成之后,就應該自動跳轉到計費頁:
頁面分析
- 后臺需要拿到單車編號,并顯示在頁面上
- 我們需要一個計時器累加騎行事件用來計費,而且可以顯示最大單位是小時
- 兩個按鈕:結束騎行,回到地圖 。其中,點擊結束騎行,關閉計時器,根據(jù)累計時長計費;點擊回到地圖,如果計時器已經關閉了,就關閉計費頁,跳轉到地圖。如果計時器仍然在計時,保留當前頁面,跳轉到地圖。
- 點擊回到地圖需要把計時器狀態(tài)帶給首頁,首頁做出判斷,判定再次點擊立即用車響應合理邏輯(已經在計費,不能重復掃碼。已經停止計費了,需要重新掃碼)
頁面結構(看看我們哪些是數(shù)據(jù)模板?,為元素綁定了什么事件?)
- <!--pages/billing/index.wxml-->
- <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;
- }
數(shù)據(jù)邏輯(看注釋更好理解哦)
- // 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步,主要實現(xiàn)在moveToIndex函數(shù)里。結束騎行之后,設置定時器值為空,當點擊回到地圖時判斷計時器的狀態(tài)(值是否為空)。如果為空,關閉計費頁,結束本次騎行。如果不為空,攜帶定時器狀態(tài)跳轉到首頁,首頁立即用車點擊事件就會對傳過來的參數(shù)(計時器狀態(tài))響應合理邏輯。再回去上面看一下立即用車的判斷條件,當本頁面?zhèn)鬟^去的計時器不滿足條件時,我們在地圖首頁點擊立即用車將會回到本頁面
其他章節(jié)
微信小程序開發(fā)之OFO共享單車——掃碼
微信小程序開發(fā)之OFO共享單車——單車報障頁
微信小程序開發(fā)之OFO共享單車——個人中心頁
微信小程序開發(fā)之OFO共享單車——錢包與充值
第二部分:如何開通一個小商店
您可能感興趣: