无遮无挡三级动态图,熟女人妻高清一区二区三区,午夜精品一区二区三区 ,色吧成人网,无码爆乳护士让我爽

注冊(cè)

微信小程序開(kāi)發(fā)之OFO共享單車(chē),微信小程序掃描二維碼

2017-12-20
導(dǎo)讀：上一節(jié)我們實(shí)現(xiàn)首頁(yè)地圖，也響應(yīng)了控件點(diǎn)擊和用戶拖動(dòng)地圖事件。這一節(jié)我們實(shí)現(xiàn)一下點(diǎn)擊立即用車(chē)掃碼成功之后的頁(yè)面邏輯。 這里我用了我自己微信號(hào)的二維碼，你們可以用你們自...
上一節(jié)我們實(shí)現(xiàn)首頁(yè)地圖，也響應(yīng)了控件點(diǎn)擊和用戶拖動(dòng)地圖事件。這一節(jié)我們實(shí)現(xiàn)一下點(diǎn)擊立即用車(chē)掃碼成功之后的頁(yè)面邏輯。

這里我用了我自己微信號(hào)的二維碼，你們可以用你們自己的，掃碼成功后的頁(yè)面是醬的：


頁(yè)面分析
  • 后臺(tái)需要拿到開(kāi)鎖密碼，然后顯示在頁(yè)面上
  • 我們需要一個(gè)定時(shí)器，規(guī)定多長(zhǎng)時(shí)間用來(lái)檢查單車(chē)是否損壞，這期間如果單車(chē)故障，可以點(diǎn)擊回首頁(yè)去車(chē)輛報(bào)障，當(dāng)然也就取消了本次掃碼。
  • 如果單車(chē)沒(méi)有問(wèn)題，檢查時(shí)長(zhǎng)完成后，自動(dòng)跳轉(zhuǎn)到計(jì)費(fèi)頁(yè)面


頁(yè)面布局
  1. <!--pages/scanresult/index.wxml-->
  2. <view class="container">
  3.     <view class="password-title">
  4.         <text>開(kāi)鎖密碼</text>
  5.     </view>
  6.     <view class="password-content">
  7.         <text>{{password}}</text>
  8.     </view>
  9.     <view class="tips">
  10.         <text>請(qǐng)使用密碼解鎖，{{time}}s后開(kāi)始計(jì)費(fèi)</text>
  11.         <view class="tips-action" bindtap="moveToWarn">
  12.             車(chē)輛有問(wèn)題?
  13.             <text class="tips-href">回首頁(yè)去車(chē)輛報(bào)障</text>
  14.         </view>
  15.     </view>
  16. </view>
復(fù)制代碼

微信小程序的頁(yè)面元素有自己的一套名字，用的是weui設(shè)計(jì)風(fēng)格，但是元素種類(lèi)比較少，比如說(shuō)<view>就代表著<div>，<text>是行內(nèi)元素，<image>是圖片標(biāo)簽等，所以頁(yè)面標(biāo)簽這一塊只要有html基礎(chǔ)就很容易理解

頁(yè)面樣式
  1. .container{
  2.         width: 100%;
  3.         display: flex;
  4.         flex-direction: column;
  5.         align-items: center;
  6.         justify-content: space-between;
  7.         background-color: #fff;
  8. }
  9. .password-title,.tips{
  10.         width: 100%;
  11.         flex: 1;
  12.         text-align: center;
  13.         padding: 60rpx 0;
  14. }
  15. .password-content{
  16.         width: 100%;
  17.         flex: 8;
  18.         text-align: center;
  19.         font-size: 240rpx;
  20.         font-weight: 900;
  21. }
  22. .tips{
  23.         font-size: 32rpx;
  24. }
  25. .tips .tips-action{
  26.         margin-top: 20rpx;        
  27. }
  28. .tips .tips-href{
  29.         color: #b9dd08
  30. }
復(fù)制代碼

樣式方面完全是css，注意這里的單位是rpx，是小程序?yàn)榱俗赃m應(yīng)所有設(shè)備而設(shè)定的單位，按寬度為750px的設(shè)備計(jì)算，1rpx = 0.5px。其他比例換算可以看官方文檔。

先來(lái)了解兩個(gè)知識(shí)點(diǎn)：
  • 數(shù)據(jù)渲染頁(yè)面：前面我們?cè)诘貓D組件中設(shè)置了數(shù)據(jù)模板，然后在js里通過(guò)服務(wù)器獲取數(shù)據(jù)動(dòng)態(tài)給模板數(shù)據(jù)賦值，每當(dāng)js數(shù)據(jù)改變，頁(yè)面就會(huì)重新渲染數(shù)據(jù)。所以核心思想是數(shù)據(jù)驅(qū)動(dòng)頁(yè)面。我們?cè)诮Y(jié)構(gòu)里設(shè)置了數(shù)據(jù)模板{{time}}，說(shuō)明這個(gè)數(shù)據(jù)是需要我們?nèi)ジ淖兊?，所以先在data對(duì)象里賦予初始值9（為了調(diào)試方便，特意把時(shí)間調(diào)的很短）
  • 為元素綁定事件：和傳統(tǒng)html里不同，小程序頁(yè)面為元素綁定事件不能操作元素，不然就違背了數(shù)據(jù)驅(qū)動(dòng)頁(yè)面的初衷，所以小程序在元素內(nèi)聲明一個(gè)變量如 bindtap="moveToWarn"來(lái)為指定元素綁定點(diǎn)擊事件，然后在js里實(shí)現(xiàn)這個(gè)事件的功能。還可以綁定很多事件類(lèi)型，更多可以查閱事件文檔


先來(lái)回頭看一下首頁(yè)地圖立即用車(chē)事件代碼，如果當(dāng)前沒(méi)有在計(jì)費(fèi)，將可以掃碼，掃碼成功后將會(huì)傳遞參數(shù)（密碼和車(chē)牌號(hào)）并跳轉(zhuǎn)到../scanresult/index，也就是本頁(yè)面。
  1. // 地圖控件點(diǎn)擊事件
  2.   bindcontroltap: function(e){
  3.     // 判斷點(diǎn)擊的是哪個(gè)控件 e.controlId代表控件的id，在頁(yè)面加載時(shí)的第3步設(shè)置的id
  4.     switch(e.controlId){
  5.       // 點(diǎn)擊定位控件
  6.       case 1: this.movetoPosition();
  7.         break;
  8.       // 點(diǎn)擊立即用車(chē)，判斷當(dāng)前是否正在計(jì)費(fèi)
  9.       case 2: if(this.timer === "" || this.timer === undefined){
  10.           // 沒(méi)有在計(jì)費(fèi)就掃碼
  11.           wx.scanCode({
  12.             success: (res) => {
  13.               // 正在獲取密碼通知
  14.               wx.showLoading({
  15.                 title: '正在獲取密碼',
  16.                 mask: true
  17.               })
  18.               // 請(qǐng)求服務(wù)器獲取密碼和車(chē)號(hào)
  19.               wx.request({
  20.                 url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',
  21.                 data: {},
  22.                 method: 'GET',
  23.                 success: function(res){
  24.                   // 請(qǐng)求密碼成功隱藏等待框
  25.                   wx.hideLoading();
  26.                   // 攜帶密碼和車(chē)號(hào)跳轉(zhuǎn)到密碼頁(yè)
  27.                   wx.redirectTo({
  28.                     url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,
  29.                     success: function(res){
  30.                       wx.showToast({
  31.                         title: '獲取密碼成功',
  32.                         duration: 1000
  33.                       })
  34.                     }
  35.                   })           
  36.                 }
  37.               })
  38.             }
  39.           })
  40.         // 當(dāng)前已經(jīng)在計(jì)費(fèi)就回退到計(jì)費(fèi)頁(yè)
  41.         }else{
  42.           wx.navigateBack({
  43.             delta: 1
  44.           })
  45.         }  
  46.         break;
  47.       // 點(diǎn)擊保障控件，跳轉(zhuǎn)到報(bào)障頁(yè)
  48.       case 3: wx.navigateTo({
  49.           url: '../warn/index'
  50.         });
  51.         break;
  52.       // 點(diǎn)擊頭像控件，跳轉(zhuǎn)到個(gè)人中心
  53.       case 5: wx.navigateTo({
  54.           url: '../my/index'
  55.         });
  56.         break;
  57.       default: break;
  58.     }
  59.   },
復(fù)制代碼

我們?cè)趈s里面寫(xiě)下如下代碼，本頁(yè)面的options就是上面?zhèn)鬟f過(guò)來(lái)的參數(shù)。試試打印出來(lái)是什么！
  1. // pages/scanresult/index.js
  2. Page({
  3.   data:{
  4.     time: 9 // 默認(rèn)計(jì)時(shí)時(shí)長(zhǎng)，這里設(shè)短一點(diǎn)，用于調(diào)試，ofo app是90s
  5.   },
  6. // 頁(yè)面加載
  7.   onLoad:function(options){
  8.     // 獲取密碼
  9.     this.setData({
  10.       password: options.password
  11.     })
  12.     // 設(shè)置初始計(jì)時(shí)秒數(shù)
  13.     let time = 9;
  14.     // 開(kāi)始定時(shí)器
  15.     this.timer = setInterval(() => {
  16.       this.setData({
  17.         time: -- time // 倒計(jì)時(shí)
  18.       });
  19.       // 讀完秒后攜帶單車(chē)號(hào)碼跳轉(zhuǎn)到計(jì)費(fèi)頁(yè)
  20.       if(time = 0){
  21.         clearInterval(this.timer)
  22.         wx.redirectTo({
  23.           url: '../billing/index?number=' + options.number
  24.         })
  25.       }
  26.     },1000)
  27.   },
  28. // 點(diǎn)擊去首頁(yè)報(bào)障
  29.   moveToWarn: function(){
  30.     // 清除定時(shí)器
  31.     clearInterval(this.timer)
  32.     wx.redirectTo({
  33.       url: '../index/index'
  34.     })
  35.   }
  36. })
復(fù)制代碼

當(dāng)?shù)褂?jì)時(shí)完成之后，就應(yīng)該自動(dòng)跳轉(zhuǎn)到計(jì)費(fèi)頁(yè)：
微信小程序開(kāi)發(fā)之OFO共享單車(chē),微信小程序掃描二維碼

頁(yè)面分析
  • 后臺(tái)需要拿到單車(chē)編號(hào)，并顯示在頁(yè)面上
  • 我們需要一個(gè)計(jì)時(shí)器累加騎行事件用來(lái)計(jì)費(fèi)，而且可以顯示最大單位是小時(shí)
  • 兩個(gè)按鈕：結(jié)束騎行，回到地圖 。其中，點(diǎn)擊結(jié)束騎行，關(guān)閉計(jì)時(shí)器，根據(jù)累計(jì)時(shí)長(zhǎng)計(jì)費(fèi)；點(diǎn)擊回到地圖，如果計(jì)時(shí)器已經(jīng)關(guān)閉了，就關(guān)閉計(jì)費(fèi)頁(yè)，跳轉(zhuǎn)到地圖。如果計(jì)時(shí)器仍然在計(jì)時(shí)，保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到地圖。
  • 點(diǎn)擊回到地圖需要把計(jì)時(shí)器狀態(tài)帶給首頁(yè)，首頁(yè)做出判斷，判定再次點(diǎn)擊立即用車(chē)響應(yīng)合理邏輯（已經(jīng)在計(jì)費(fèi)，不能重復(fù)掃碼。已經(jīng)停止計(jì)費(fèi)了，需要重新掃碼）


頁(yè)面結(jié)構(gòu)（看看我們哪些是數(shù)據(jù)模板？，為元素綁定了什么事件？）
  1. <!--pages/billing/index.wxml-->
  2. <view class="container">
  3.     <view class="number">
  4.         <text>當(dāng)前單車(chē)編號(hào): {{number}}</text>
  5.     </view>
  6.     <view class="time">
  7.         <view class="time-title">
  8.             <text>{{billing}}</text>
  9.         </view>
  10.         <view class="time-content">
  11.             <text>{{hours}}:{{minuters}}:{{seconds}}</text>
  12.         </view>
  13.     </view>
  14.  
  15.     <view class="endride">
  16.         <button type="warn" disabled="{{disabled}}" bindtap="endRide">結(jié)束騎行</button>
  17.         <button type="primary" bindtap="moveToIndex">回到地圖</button>
  18.     </view>
  19. </view>
復(fù)制代碼

頁(yè)面樣式
  1. .container{
  2.         width: 100%;
  3.         display: flex;
  4.         flex-direction: column;
  5.         align-items: center;
  6.         justify-content: space-between;
  7.         background-color: #fff;
  8. }
  9. .number,.endride{
  10.         padding: 60rpx 0;
  11.         flex: 2;
  12.         width: 100%;
  13.         text-align: center;
  14. }
  15. .time{
  16.         text-align: center;
  17.         width: 100%;
  18.         flex: 6;
  19. }
  20. .time .time-content{
  21.         font-size: 100rpx;
  22. }
  23. .endride button{
  24.         width: 90%;
  25.         margin-top: 40rpx;
  26. }
復(fù)制代碼

數(shù)據(jù)邏輯（看注釋更好理解哦）
  1. // pages/billing/index.js
  2. Page({
  3.   data:{
  4.     hours: 0,
  5.     minuters: 0,
  6.     seconds: 0,
  7.     billing: "正在計(jì)費(fèi)"
  8.   },
  9. // 頁(yè)面加載
  10.   onLoad:function(options){
  11.     // 獲取掃碼成功頁(yè)傳過(guò)來(lái)的車(chē)牌號(hào)，再定義一個(gè)定時(shí)器
  12.     this.setData({
  13.       number: options.number,
  14.       timer: this.timer
  15.     })
  16.     // 初始化計(jì)時(shí)器
  17.     let s = 0;
  18.     let m = 0;
  19.     let h = 0;
  20.     // 計(jì)時(shí)開(kāi)始
  21.     this.timer = setInterval(() => {
  22.       this.setData({
  23.         seconds: s++
  24.       })
  25.       if(s == 60){
  26.         s = 0;
  27.         m++;
  28.         setTimeout(() => {         
  29.           this.setData({
  30.             minuters: m
  31.           });
  32.         },1000)      
  33.         if(m == 60){
  34.           m = 0;
  35.           h++
  36.           setTimeout(() => {         
  37.             this.setData({
  38.               hours: h
  39.             });
  40.           },1000)
  41.         }
  42.       };
  43.     },1000)  
  44.   },
  45. // 結(jié)束騎行，清除定時(shí)器
  46.   endRide: function(){
  47.     clearInterval(this.timer);
  48.     this.timer = "";
  49.     this.setData({
  50.       billing: "本次騎行耗時(shí)",
  51.       disabled: true
  52.     })
  53.   },
  54. // 攜帶定時(shí)器狀態(tài)回到地圖
  55.   moveToIndex: function(){
  56.     // 如果定時(shí)器為空
  57.     if(this.timer == ""){
  58.       // 關(guān)閉計(jì)費(fèi)頁(yè)跳到地圖
  59.       wx.redirectTo({
  60.         url: '../index/index'
  61.       })
  62.     // 保留計(jì)費(fèi)頁(yè)跳到地圖，帶上計(jì)時(shí)器狀態(tài)
  63.     }else{
  64.       wx.navigateTo({
  65.         url: '../index/index?timer=' + this.timer
  66.       })
  67.     }
  68.   }
  69. })

頁(yè)面分析的第4步，主要實(shí)現(xiàn)在moveToIndex函數(shù)里。結(jié)束騎行之后，設(shè)置定時(shí)器值為空，當(dāng)點(diǎn)擊回到地圖時(shí)判斷計(jì)時(shí)器的狀態(tài)（值是否為空）。如果為空，關(guān)閉計(jì)費(fèi)頁(yè)，結(jié)束本次騎行。如果不為空，攜帶定時(shí)器狀態(tài)跳轉(zhuǎn)到首頁(yè)，首頁(yè)立即用車(chē)點(diǎn)擊事件就會(huì)對(duì)傳過(guò)來(lái)的參數(shù)（計(jì)時(shí)器狀態(tài)）響應(yīng)合理邏輯。再回去上面看一下立即用車(chē)的判斷條件，當(dāng)本頁(yè)面?zhèn)鬟^(guò)去的計(jì)時(shí)器不滿足條件時(shí)，我們?cè)诘貓D首頁(yè)點(diǎn)擊立即用車(chē)將會(huì)回到本頁(yè)面

其他章節(jié)
微信小程序開(kāi)發(fā)之OFO共享單車(chē)——掃碼
微信小程序開(kāi)發(fā)之OFO共享單車(chē)——單車(chē)報(bào)障頁(yè)
微信小程序開(kāi)發(fā)之OFO共享單車(chē)——個(gè)人中心頁(yè)
微信小程序開(kāi)發(fā)之OFO共享單車(chē)——錢(qián)包與充值
重磅推薦：小程序開(kāi)店目錄

第一部分：小商店是什么

第二部分：如何開(kāi)通一個(gè)小商店

第三部分：如何登錄小商店

第四部分：開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分：小商店可以賣(mài)什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開(kāi)發(fā)