小程序开发教程之内部参数传递方法

小程序开发教程之内部参数传递方法，本文讲 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 代码

  
    1. 
    消费详情
  
  
  
    插座名称： {{chazuo}}
    插座编号： 00000000002
    插座地址： 广州电视台1楼
    使用时间：
      60分钟
    
    消耗费用：
      ￥40
    
    
  


  
    提示：实际费用以系统计算时间为准！
  


  
    2. 
    支付方式
  
  
    余额支付
      钱包余额： 9568
    
  


  实付款： ￥40.00
  支付费用

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 请查看官方文档。

到此为止，简单入门小程序教程已经结束。希望这个教程能让你有所收获。