頁(yè)面分析

1.后臺(tái)需要拿到開鎖密碼，然后顯示在頁(yè)面上

2.我們需要一個(gè)定時(shí)器，規(guī)定多長(zhǎng)時(shí)間用來(lái)檢查車輛，這期間可以點(diǎn)擊回首頁(yè)去車輛報(bào)障鏈接，當(dāng)然也就取消了本次掃碼。

3.檢查時(shí)長(zhǎng)完成后，自動(dòng)跳轉(zhuǎn)到計(jì)費(fèi)頁(yè)面

1.頁(yè)面布局

<!--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>請(qǐng)使用密碼解鎖，{{time}}s后開始計(jì)費(fèi)</text>
        <view class="tips-action" bindtap="moveToWarn">
            車輛有問題?
            <text class="tips-href">回首頁(yè)去車輛報(bào)障</text>
        </view>
    </view>
</view>

2.頁(yè)面樣式

.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
}

3.頁(yè)面數(shù)據(jù)邏輯

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

注意：這里的this.timer不會(huì)被傳參到pages/index/index.js里的onload函數(shù)里，被傳參到首頁(yè)的定時(shí)器是計(jì)費(fèi)頁(yè)的定時(shí)器，后面會(huì)講到

tips: onload函數(shù)參數(shù)說(shuō)明: options的值是掃碼成功后請(qǐng)求服務(wù)器獲取的單車編號(hào)和開鎖密碼

// pages/index/index.js
// 點(diǎn)擊立即用車，判斷當(dāng)前是否正在計(jì)費(fèi)
      case 2: if(this.timer === "" || this.timer === undefined){
          // 沒有在計(jì)費(fèi)就掃碼
          wx.scanCode({
            success: (res) => {
              // 正在獲取密碼通知
              wx.showLoading({
                title: '正在獲取密碼',
                mask: true
              })
              // 請(qǐng)求服務(wù)器獲取密碼和車號(hào)
              wx.request({
                url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',
                data: {},
                method: 'GET', 
                success: function(res){
                  // 請(qǐng)求密碼成功隱藏等待框
                  wx.hideLoading();
                  // 攜帶密碼和車號(hào)跳轉(zhuǎn)到密碼頁(yè)
                  wx.redirectTo({
                    url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,
                    success: function(res){
                      wx.showToast({
                        title: '獲取密碼成功',
                        duration: 1000
                      })
                    }
                  })           
                }
              })
            }
          })
        // 當(dāng)前已經(jīng)在計(jì)費(fèi)就回退到計(jì)費(fèi)頁(yè)
        }else{
          wx.navigateBack({
            delta: 1
          })
        }  
        break;
// pages/scanresult/index.js
onload: function(options){
  console.log(options); // { password: "", number: "" }
}

6.編寫計(jì)費(fèi)頁(yè)（billing文件夾）

上節(jié)中我們?cè)O(shè)置了計(jì)時(shí)器完成后，跳轉(zhuǎn)到計(jì)費(fèi)頁(yè)，它是醬的：

頁(yè)面分析：

1.后臺(tái)需要拿到單車編號(hào)，并顯示在頁(yè)面上

2.我們需要一個(gè)計(jì)時(shí)器累加騎行事件用來(lái)計(jì)費(fèi)，而且可以顯示最大單位是小時(shí)

3.兩個(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)到地圖。

4.點(diǎn)擊回到地圖會(huì)把計(jì)時(shí)器狀態(tài)帶給首頁(yè)，首頁(yè)做出判斷，判定再次點(diǎn)擊立即用車響應(yīng)合理邏輯（已經(jīng)在計(jì)費(fèi)，不能重復(fù)掃碼。已經(jīng)停止計(jì)費(fèi)了，需要重新掃碼）

1.頁(yè)面結(jié)構(gòu)

<!--pages/billing/index.wxml-->
<view class="container">
    <view class="number">
        <text>當(dāng)前單車編號(hào): {{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">結(jié)束騎行</button>
        <button type="primary" bindtap="moveToIndex">回到地圖</button>
    </view>
</view>

2.頁(yè)面樣式

.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;
}

3.頁(yè)面數(shù)據(jù)邏輯

// pages/billing/index.js
Page({
  data:{
    hours: 0,
    minuters: 0,
    seconds: 0,
    billing: "正在計(jì)費(fèi)"
  },
// 頁(yè)面加載
  onLoad:function(options){
    // 獲取車牌號(hào)，設(shè)置定時(shí)器
    this.setData({
      number: options.number,
      timer: this.timer
    })
    // 初始化計(jì)時(shí)器
    let s = 0;
    let m = 0;
    let h = 0;
    // 計(jì)時(shí)開始
    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)  
  },
// 結(jié)束騎行，清除定時(shí)器
  endRide: function(){
    clearInterval(this.timer);
    this.timer = "";
    this.setData({
      billing: "本次騎行耗時(shí)",
      disabled: true
    })
  },
// 攜帶定時(shí)器狀態(tài)回到地圖
  moveToIndex: function(){
    // 如果定時(shí)器為空
    if(this.timer == ""){
      // 關(guān)閉計(jì)費(fèi)頁(yè)跳到地圖
      wx.redirectTo({
        url: '../index/index'
      })
    // 保留計(jì)費(fèi)頁(yè)跳到地圖
    }else{
      wx.navigateTo({
        url: '../index/index?timer=' + this.timer
      })
    }
  }
})

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

7.編寫維修報(bào)障頁(yè)（warn文件夾）

點(diǎn)擊舉報(bào)控件，頁(yè)面是醬的：

頁(yè)面分析：

1.頁(yè)面可以勾選故障類型，所以需要用到復(fù)選框組件；可以選擇上傳或拍攝圖片，所以要使用wx.chooseImage({})選取圖片API；可以輸入車牌號(hào)好備注，所以需要使用input輸入組件。

2.勾選類型，選擇圖片，輸入備注信息完成后，后臺(tái)需要獲取這些輸入的數(shù)據(jù)提交到服務(wù)器以獲得反饋。

3.必須勾選類型和選擇周圍環(huán)境圖片才能提交，否則彈窗提示?？梢赃x擇多張圖片，也可以取消選擇的圖片。

1.頁(yè)面結(jié)構(gòu)

<!--pages/warn/index.wxml-->
<view class="container">
    <view class="choose">
        <view class="title">請(qǐng)選擇故障類型</view> 
        <checkbox-group bindchange="checkboxChange" class="choose-grids">
            <!-- itemsValue是data對(duì)象里定義的數(shù)組，item代表數(shù)組的每一項(xiàng)，此處語(yǔ)法為循環(huán)輸出數(shù)組的每一項(xiàng)并渲染到每一個(gè)復(fù)選框。下面還有類似語(yǔ)法 -->
            <block wx:for="{{itemsValue}}" wx:key="{{item}}">
                <view class="grid">
                    <checkbox value="{{item.value}}" checked="{{item.checked}}" color="{{item.color}}" />{{item.value}}
                </view>
            </block>
        </checkbox-group>        
    </view>
    <view class="action">
        <view class="title">拍攝單車周圍環(huán)境，便于維修師傅找車</view>
        <view class="action-photo">
        <block wx:for="{{picUrls}}" wx:key="{{item}}" wx:index="{{index}}">
            <image src="{{item}}"><icon type="cancel" data-index="{{index}}" color="red" size="18" class ="del" bindtap="delPic" /></image>
        </block>
            <text class="add" bindtap="bindCamera">{{actionText}}</text>
        </view>
        <view class="action-input">
            <input bindinput="numberChange" name="number" placeholder="車牌號(hào)（車牌損壞不用填）" />
            <input bindinput="descChange" name="desc" placeholder="備注" />            
        </view>
        <view class="action-submit">
            <button class="submit-btn" type="default" loading="{{loading}}" bindtap="formSubmit" style="background-color: {{btnBgc}}">提交</button>
        </view>
    </view>
</view>

2.頁(yè)面樣式

/* pages/wallet/index.wxss */
.choose{
    background-color: #fff;
}
.choose-grids{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 50rpx;
}
.choose-grids .grid{
    width: 45%;
    height: 100rpx;
    margin-top: 36rpx;
    border-radius: 6rpx;
    line-height: 100rpx;
    text-align: center;
    border: 2rpx solid #b9dd08;
}
.choose-grids .grid:first-child,
.choose-grids .grid:nth-of-type(2){
    margin-top: 0;
}
.action .action-photo{
    background-color: #fff;
    padding: 40rpx 0px 40rpx 50rpx;
}
.action .action-photo image{
    position: relative;
    display: inline-block;
    width: 120rpx;
    height: 120rpx;
    overflow: visible;
    margin-left: 25rpx;
}
.action .action-photo image icon.del{
    display: block;
    position: absolute;
    top: -20rpx;
    right: -20rpx;
}
.action .action-photo text.add{
    display: inline-block;
    width: 120rpx;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    font-size: 24rpx;
    color: #ccc;
    border: 2rpx dotted #ccc;
    margin-left: 25rpx;
    vertical-align: top;
}
.action .action-input{
    padding-left: 50rpx;
    margin-top: 30rpx;
    background-color: #fff;
}
.action .action-input input{
    width: 90%;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
}
.action .action-input input:first-child{
    border-bottom: 2rpx solid #ccc;
    padding-bottom: 20rpx;
}
.action .action-input input:last-child{
    padding-top: 20rpx;
}
.action .action-submit{
    padding: 40rpx 40rpx;
    background-color: #f2f2f2;
}

3.頁(yè)面數(shù)據(jù)邏輯

// pages/wallet/index.js
Page({
  data:{
    // 故障車周圍環(huán)境圖路徑數(shù)組
    picUrls: [],
    // 故障車編號(hào)和備注
    inputValue: {
      num: 0,
      desc: ""
    },
    // 故障類型數(shù)組
    checkboxValue: [],
    // 選取圖片提示
    actionText: "拍照/相冊(cè)",
    // 提交按鈕的背景色，未勾選類型時(shí)無(wú)顏色
    btnBgc: "",
    // 復(fù)選框的value，此處預(yù)定義，然后循環(huán)渲染到頁(yè)面
    itemsValue: [
      {
        checked: false,
        value: "私鎖私用",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "車牌缺損",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "輪胎壞了",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "車鎖壞了",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "違規(guī)亂停",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "密碼不對(duì)",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "剎車壞了",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "其他故障",
        color: "#b9dd08"
      }
    ]
  },
// 頁(yè)面加載
  onLoad:function(options){
    wx.setNavigationBarTitle({
      title: '報(bào)障維修'
    })
  },
// 勾選故障類型，獲取類型值存入checkboxValue
  checkboxChange: function(e){
    let _values = e.detail.value;
    if(_values.length == 0){
      this.setData({
        btnBgc: ""
      })
    }else{
      this.setData({
        checkboxValue: _values,
        btnBgc: "#b9dd08"
      })
    }   
  },
// 輸入單車編號(hào)，存入inputValue
  numberChange: function(e){
    this.setData({
      inputValue: {
        num: e.detail.value,
        desc: this.data.inputValue.desc
      }
    })
  },
// 輸入備注，存入inputValue
  descChange: function(e){
    this.setData({
      inputValue: {
        num: this.data.inputValue.num,
        desc: e.detail.value
      }
    })
  },
// 提交到服務(wù)器
  formSubmit: function(e){
    if(this.data.picUrls.length > 0 && this.data.checkboxValue.length> 0){
      wx.request({
        url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',
        data: {
          // picUrls: this.data.picUrls,
          // inputValue: this.data.inputValue,
          // checkboxValue: this.data.checkboxValue
        },
        method: 'get', // POST
        // header: {}, // 設(shè)置請(qǐng)求的 header
        success: function(res){
          wx.showToast({
            title: res.data.data.msg,
            icon: 'success',
            duration: 2000
          })
        }
      })
    }else{
      wx.showModal({
        title: "請(qǐng)?zhí)顚懛答佇畔?quot;,
        content: '看什么看，趕快填反饋信息，削你啊',
        confirmText: "我我我填",
        cancelText: "勞資不填",
        success: (res) => {
          if(res.confirm){
            // 繼續(xù)填
          }else{
            console.log("back")
            wx.navigateBack({
              delta: 1 // 回退前 delta(默認(rèn)為1) 頁(yè)面
            })
          }
        }
      })
    }

  },
// 選擇故障車周圍環(huán)境圖 拍照或選擇相冊(cè)
  bindCamera: function(){
    wx.chooseImage({
      count: 4, 
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'], 
      success: (res) => {
        let tfps = res.tempFilePaths;
        let _picUrls = this.data.picUrls;
        for(let item of tfps){
          _picUrls.push(item);
          this.setData({
            picUrls: _picUrls,
            actionText: "+"
          });
        }
      }
    })
  },
// 刪除選擇的故障車周圍環(huán)境圖
  delPic: function(e){
    let index = e.target.dataset.index;
    let _picUrls = this.data.picUrls;
    _picUrls.splice(index,1);
    this.setData({
      picUrls: _picUrls
    })
  }
})

注意： 這里選擇的圖片，路徑為本地路徑，如果要上傳到服務(wù)器，需要調(diào)用API上傳圖片而不是上傳本地路徑。即不能把picUrls數(shù)組上傳到服務(wù)器。

8.編寫登錄/未登錄頁(yè)（my文件夾）

點(diǎn)擊頭像控件，未登錄，頁(yè)面是醬的

點(diǎn)擊頭像控件，已登錄，頁(yè)面是醬的

頁(yè)面分析

1.個(gè)人中心頁(yè)有兩種狀態(tài)，即未登錄和已登錄，所以要求數(shù)據(jù)驅(qū)動(dòng)頁(yè)面表現(xiàn)形式

2.點(diǎn)擊登錄/退出登錄按鈕需要響應(yīng)合理邏輯，并改變按鈕樣式

3.只有登錄狀態(tài)下才會(huì)顯示我的錢包按鈕

1.頁(yè)面結(jié)構(gòu)（wx:if 是條件語(yǔ)句）

<!--pages/my/index.wxml-->
<view class="container">
    <view class="user-info">
    <!-- 用戶未登錄就沒有頭像-->
    <block wx:if="{{userInfo.avatarUrl != ''}}">
        <image src="{{userInfo.avatarUrl}}"></image>
    </block>
        <text>{{userInfo.nickName}}</text>
    </view>
    <!-- 用戶未登錄就沒有錢包按鈕-->
    <block wx:if="{{userInfo.avatarUrl != ''}}">
    <view class="my-wallet tapbar" bindtap="movetoWallet">
        <text>我的錢包</text>
        <text>></text>
    </view>
    </block>
    <button bindtap="bindAction" class="btn-login" hover-class="gray" type="{{bType}}" >{{actionText}}</button>
</view>

2.頁(yè)面樣式

/* pages/my/index.wxss */
.user-info{
    background-color: #fff;
    padding-top: 60rpx;
}
.user-info image{
    display: block;
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    margin: 0 auto 40rpx;
    box-shadow: 0 0 20rpx rgba(0,0,0,.2)
}
.user-info text{
    display: block;
    text-align: center;
    padding: 30rpx 0;
    margin-bottom: 30rpx;
}
.btn-login{
    position: absolute;
    bottom: 60rpx;
    width: 90%;
    left: 50%;
    margin-left: -45%;
}
.gray{
    background-color: #ccc;
}

3.頁(yè)面數(shù)據(jù)邏輯

// pages/my/index.js
Page({
  data:{
    // 用戶信息
    userInfo: {
      avatarUrl: "",
      nickName: "未登錄"
    },
    bType: "primary", // 按鈕類型
    actionText: "登錄", // 按鈕文字提示
    lock: false //登錄按鈕狀態(tài)，false表示未登錄
  },
// 頁(yè)面加載
  onLoad:function(){
    // 設(shè)置本頁(yè)導(dǎo)航標(biāo)題
    wx.setNavigationBarTitle({
      title: '個(gè)人中心'
    })
    // 獲取本地?cái)?shù)據(jù)-用戶信息
    wx.getStorage({
      key: 'userInfo',
      // 能獲取到則顯示用戶信息，并保持登錄狀態(tài)，不能就什么也不做
      success: (res) => {
        wx.hideLoading();
        this.setData({
          userInfo: {
            avatarUrl: res.data.userInfo.avatarUrl,
            nickName: res.data.userInfo.nickName
          },
          bType: res.data.bType,
          actionText: res.data.actionText,
          lock: true
        })
      }
    });
  },
// 登錄或退出登錄按鈕點(diǎn)擊事件
  bindAction: function(){
    this.data.lock = !this.data.lock
    // 如果沒有登錄，登錄按鈕操作
    if(this.data.lock){
      wx.showLoading({
        title: "正在登錄"
      });
      wx.login({
        success: (res) => {
          wx.hideLoading();
          wx.getUserInfo({
            withCredentials: false,
            success: (res) => {
              this.setData({
                userInfo: {
                  avatarUrl: res.userInfo.avatarUrl,
                  nickName: res.userInfo.nickName
                },
                bType: "warn",
                actionText: "退出登錄"
              });
              // 存儲(chǔ)用戶信息到本地
              wx.setStorage({
                key: 'userInfo',
                data: {
                  userInfo: {
                    avatarUrl: res.userInfo.avatarUrl,
                    nickName: res.userInfo.nickName
                  },
                  bType: "warn",
                  actionText: "退出登錄"
                },
                success: function(res){
                  console.log("存儲(chǔ)成功")
                }
              })
            }     
          })
        }
      })
    // 如果已經(jīng)登錄，退出登錄按鈕操作     
    }else{
      wx.showModal({
        title: "確認(rèn)退出?",
        content: "退出后將不能使用ofo",
        success: (res) => {
          if(res.confirm){
            console.log("確定")
            // 退出登錄則移除本地用戶信息
            wx.removeStorageSync('userInfo')
            this.setData({
              userInfo: {
                avatarUrl: "",
                nickName: "未登錄"
              },
              bType: "primary",
              actionText: "登錄"
            })
          }else {
            console.log("cancel")
            this.setData({
              lock: true
            })
          }
        }
      })
    }   
  },
// 跳轉(zhuǎn)至錢包
  movetoWallet: function(){
    wx.navigateTo({
      url: '../wallet/index'
    })
  }
})

我們將用戶信息使用wx.setStorage({})和wx.getStorage({})這兩個(gè)API來(lái)設(shè)置和獲取本地存儲(chǔ)，用于模擬維護(hù)用戶登錄狀態(tài)。真實(shí)情況下需要使用session

9.編寫我的錢包頁(yè)

假設(shè)用戶已登錄，點(diǎn)擊錢包，頁(yè)面是醬的：

頁(yè)面分析

1.需要獲取錢包余額數(shù)據(jù)并顯示在頁(yè)面上，充值后數(shù)據(jù)會(huì)自動(dòng)更新

2.其他可點(diǎn)擊按鈕分別顯示對(duì)應(yīng)的模態(tài)框，因?yàn)槲⑿胖辉试S五個(gè)頁(yè)面層級(jí)，避免過多頁(yè)面層級(jí)造成用戶迷失。

1.頁(yè)面結(jié)構(gòu)

<!--pages/wallet/index.wxml-->
<view class="container">
    <view class="overage">
        <view>
            <text class="overage-header">我的余額（元）</text>
        </view>
        <view>
            <text class="overage-amount">{{overage}}</text>
        </view>
        <view>
            <text bindtap="overageDesc" class="overage-desc">余額說(shuō)明</text>
        </view>       
    </view>
    <button bindtap="movetoCharge" class="btn-charge">充值</button>
    <view bindtap="showTicket" class="my-ticket tapbar">
        <text>我的用車券</text>
        <text><text class="c-g">{{ticket}}張</text>></text>
    </view>
    <view bindtap="showDeposit" class="my-deposit tapbar">
        <text>我的押金</text>
        <text><text class="c-y">99元，押金退款</text>></text>
    </view>
    <view bindtap="showInvcode" class="my-invcode tapbar">
        <text>關(guān)于ofo</text>
        <text>></text>
    </view>
</view>

2.頁(yè)面樣式

/* pages/wallet/index.wxss */
.overage{
    background-color: #fff;
    padding: 40rpx 0;
    text-align: center;
}
.overage-header{
    font-size: 24rpx;
}
.overage-amount{
    display: inline-block;
    padding: 20rpx 0;
    font-size: 100rpx;
    font-weight: 700;
}
.overage-desc{
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    border-radius: 40rpx;
    border: 1px solid #666;
}
.my-deposit{
    margin-top: 2rpx;
}
.my-invcode{
    margin-top: 40rpx;
}
.c-y{
    color: #b9dd08;
    padding-top: -5rpx;
    padding-right: 10rpx;
}
.c-g{
    padding-top: -5rpx;
    padding-right: 10rpx;
}

3.頁(yè)面數(shù)據(jù)邏輯

// pages/wallet/index.js
Page({
  data:{
    overage: 0,
    ticket: 0
  },
// 頁(yè)面加載
  onLoad:function(options){
     wx.setNavigationBarTitle({
       title: '我的錢包'
     })
  },
// 頁(yè)面加載完成，更新本地存儲(chǔ)的overage
  onReady:function(){
     wx.getStorage({
      key: 'overage',
      success: (res) => {
        this.setData({
          overage: res.data.overage
        })
      }
    })
  },
// 頁(yè)面顯示完成，獲取本地存儲(chǔ)的overage
  onShow:function(){
    wx.getStorage({
      key: 'overage',
      success: (res) => {
        this.setData({
          overage: res.data.overage
        })
      }
    }) 
  },
// 余額說(shuō)明
  overageDesc: function(){
    wx.showModal({
      title: "",
      content: "充值余額0.00元+活動(dòng)贈(zèng)送余額0.00元",
      showCancel: false,
      confirmText: "我知道了",
    })
  },
// 跳轉(zhuǎn)到充值頁(yè)面
  movetoCharge: function(){
    // 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到指定頁(yè)面，返回時(shí)將不會(huì)回到當(dāng)前頁(yè)面
    wx.redirectTo({
      url: '../charge/index'
    })
  },
// 用車券
  showTicket: function(){
    wx.showModal({
      title: "",
      content: "你沒有用車券了",
      showCancel: false,
      confirmText: "好吧",
    })
  },
// 押金退還
  showDeposit: function(){
    wx.showModal({
      title: "",
      content: "押金會(huì)立即退回，退款后，您將不能使用ofo共享單車確認(rèn)要進(jìn)行此退款嗎？",
      cancelText: "繼續(xù)使用",
      cancelColor: "#b9dd08",
      confirmText: "押金退款",
      confirmColor: "#ccc",
      success: (res) => {
        if(res.confirm){
          wx.showToast({
            title: "退款成功",
            icon: "success",
            duration: 2000
          })
        }
      }
    })
  },
// 關(guān)于ofo
  showInvcode: function(){
    wx.showModal({
      title: "ofo共享單車",
      content: "微信服務(wù)號(hào)：ofobike,網(wǎng)址：m.ofo.so",
      showCancel: false,
      confirmText: "玩的6"
    })
  }
})

我們將金額信息使用wx.setStorage({})和wx.getStorage({})這兩個(gè)API來(lái)設(shè)置和獲取本地存儲(chǔ)，用于模擬充值邏輯。
設(shè)置本地存儲(chǔ)API官方文檔

10.編寫充值頁(yè)面（charge文件夾）

點(diǎn)擊充值按鈕，頁(yè)面是醬的

頁(yè)面分析

1.輸入金額，存儲(chǔ)在data對(duì)象里，點(diǎn)擊充值后，設(shè)置本地金額數(shù)據(jù)

2.點(diǎn)擊充值按鈕后自動(dòng)跳轉(zhuǎn)到錢包頁(yè)。

1.頁(yè)面結(jié)構(gòu)

<!--pages/charge/index.wxml-->
<view class="container">
    <view class="title">請(qǐng)輸入充值金額</view>
    <view class="input-box">
        <input bindinput="bindInput" />
    </view>
    <button bindtap="charge" class="btn-charge">充值</button>
</view>

2.頁(yè)面樣式

/* pages/charge/index.wxss */
.input-box{
    background-color: #fff;
    margin: 0 auto;
    padding: 20rpx 0;
    border-radius: 10rpx;
    width: 90%;

}
.input-box input{
    width: 100%;
    height: 100%;
    text-align: center;
}

3.頁(yè)面數(shù)據(jù)邏輯

// pages/charge/index.js
Page({
  data:{
    inputValue: 0
  },
// 頁(yè)面加載
  onLoad:function(options){
    wx.setNavigationBarTitle({
      title: '充值'
    })
  },
// 存儲(chǔ)輸入的充值金額
  bindInput: function(res){
    this.setData({
      inputValue: res.detail.value
    })  
  },
// 充值
  charge: function(){
    // 必須輸入大于0的數(shù)字
    if(parseInt(this.data.inputValue) <= 0 || isNaN(this.data.inputValue)){
      wx.showModal({
        title: "警告",
        content: "咱是不是還得給你錢？?。?quot;,
        showCancel: false,
        confirmText: "不不不不"
      })
    }else{
      wx.redirectTo({
        url: '../wallet/index',
        success: function(res){
          wx.showToast({
            title: "充值成功",
            icon: "success",
            duration: 2000
          })
        }
      })
    }
  },
// 頁(yè)面銷毀，更新本地金額，（累加）
  onUnload:function(){
    wx.getStorage({
      key: 'overage',
      success: (res) => {
        wx.setStorage({
          key: 'overage',
          data: {
            overage: parseInt(this.data.inputValue) + parseInt(res.data.overage)
          }
        })
      },
      // 如果沒有本地金額，則設(shè)置本地金額
      fail: (res) => {
        wx.setStorage({
          key: 'overage',
          data: {
            overage: parseInt(this.data.inputValue)
          },
        })
      }
    }) 
  }
})

充值頁(yè)面關(guān)閉時(shí)更新本地金額數(shù)據(jù)，所以需要在unLoad事件里執(zhí)行

擴(kuò)展：使用easy-mock偽造數(shù)據(jù)

小程序多次請(qǐng)求了服務(wù)器“發(fā)送/接受”數(shù)據(jù)，其實(shí)這里使用了easy-mock這個(gè)網(wǎng)站偽造的數(shù)據(jù)。
easy-mock可以作為前端開發(fā)的偽后端，自己構(gòu)造數(shù)據(jù)來(lái)測(cè)試前端代碼。方便又快捷。官網(wǎng)戳這里。
比如我們這個(gè)小程序用到了后端api接口
1.提交報(bào)障信息的反饋
2.單車編號(hào)和解鎖密碼
3.單車經(jīng)緯度

結(jié)語(yǔ)

到這里，ofo小程序的制作就到了尾聲了。開篇我們創(chuàng)建了多個(gè)頁(yè)面，然后一個(gè)一個(gè)頁(yè)面從頁(yè)面分析，到完成數(shù)據(jù)邏輯，分別響應(yīng)著不同的業(yè)務(wù)邏輯，有的頁(yè)面與頁(yè)面之間有數(shù)據(jù)往來(lái)，我們就通過跳轉(zhuǎn)頁(yè)面?zhèn)鲄⒒蛟O(shè)置本地存儲(chǔ)來(lái)將它們建立起聯(lián)系，環(huán)環(huán)相扣，構(gòu)建起了整個(gè)小程序的基本功能。
通過這個(gè)小程序，我們發(fā)現(xiàn)文檔提供的API在不知不覺中已經(jīng)失去了它的神秘感，它們就是不同的工具，為小程序?qū)崿F(xiàn)業(yè)務(wù)請(qǐng)求搭建肢體骨架。
源碼在我的github主頁(yè)上，有需要的歡迎fork