簡單入門小程序03

上一節我們講到《智慧插座》me 頁面的製作，本文接下來講 pay 支付頁面的製作。

本文的知識點有：

• 參數在小程序內部的傳遞方法

pay.wxss 代碼

/* pages/pay/pay.wxss */
.title{
  width: 600rpx;
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
  margin: 0 auto;
  font-size: 32rpx;
}

.first{
  color:#666;
  font-size: 30rpx;
  background: #fff;
}

.detail{
  width: 600rpx;
  margin: 0 auto;
  padding-left:60rpx; 
  line-height: 60rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
.tips{
  margin-top: 20rpx;
  background: #fff;
}
.tiptext{
  padding: 20rpx;
}
page{
  background: #eee;
  font-size: 30rpx;
  color: #666;
}

.pay{
  padding: 20rpx;
  border-bottom: 1px solid #eee;
  margin: 0 auto;
  font-size: 32rpx;
  background: #fff;
  margin-top: 20rpx;
}
.paygroup{
  background: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
}

.btn-left{
  width: 500rpx;
  text-align: right;
 line-height: 90rpx;
  height: 90rpx;
  padding-right: 20rpx;
}

.btn-right{
  width: 230rpx;
  text-align: center;
  background: #1296db;
  color: #fff;
  line-height: 90rpx;
  height: 90rpx
}

pay.html 代碼

<!--pages/pay/pay.wxml-->
<view class='first'>
  <view class='title'>
    <view>1. </view>
    <view>消費詳情</view>
  </view>
  <!--這段代碼除了插座的名稱會歲傳進來的參數變化，其他都是寫死的-->
  <view class='detail'>
    <view>插座名稱： {{chazuo}}</view>
    <view>插座編號： 00000000002</view>
    <view>插座地址： 廣州電視臺1樓</view>
    <view>使用時間：
      <text style='color:red'>60分鐘</text>
    </view>
    <view>消耗費用：
      <text style='color:red'>￥40</text>
    </view>
    <view></view>
  </view>
</view>
<view class='tips'>
  <view class='tiptext'>
    提示：實際費用以系統計算時間爲準！
  </view>
</view>
<view class='pay'>
  <view class='title'>
    <view>2. </view>
    <view>支付方式</view>
  </view>
  <view class='detail'>
    <view>餘額支付
      <text style='margin-left:40rpx'>錢包餘額： <text style='color:red'>9568</text></text>
    </view>
  </view>
</view>
<view class='paygroup'>
  <view class='btn-left'>實付款： ￥40.00</view>
  <view class='btn-right' bindtap='pay'>支付費用</view>
</view>

pay.json 代碼

{
  "navigationBarTitleText": "支付頁面"
}

pay.js 代碼

// pages/pay/pay.js
const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },
  // 支付改變插座狀態
  pay() {
    if(this.data.use === 2) {
      app.globalData.use2 = false
      })
      wx.showToast({
        title: '支付成功',
      })
      setTimeout(() => {
        wx.navigateBack()
      }, 2000)
    }
    else {
      app.globalData.use1 = false
      // 微信支付API
      wx.showToast({
        title: '支付成功',
      })
      setTimeout(() => {
        wx.navigateBack()
      }, 2000)
    }

  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(options)
    // option 可以獲取我們傳進來的參數，判斷是插座1還是插座2
    if (options.use === '1') {
      this.setData({
        chazuo: '1號插座',
        use: 1
      })
    }
    else{
      this.setData({
        chazuo: '2號插座',
        use: 2
      })
    }
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

最終效果如下：

總結：本文用到的參數頁面之間的傳遞方法爲 params , 在跳轉 url 加入相應的參數，跳轉後的頁面在onload 即頁面加載時從 option 中獲取，還有一種則是設置獲取全局的 app.globalData 參數。另外還有一種本例子中沒有涉及的是：wx.getStorage(OBJECT) 設置和獲取本地緩存，更多的API 請查看官方文檔。

到此爲止，簡單入門小程序教程已經結束。希望這個教程能讓你有所收穫。

想了解我更多可以前往我的個人博客：小皮咖