微信小程式的檢視層總結

一、微信小程式的WXML語法

1. 資料繫結
   將 data 中的變數用大括號進行包裹起來，{{}}，類似插值表示式，如 {{ message}}
2. 列表渲染
   列表渲染通過wx:for指令可以對data資料進行渲染，渲染時加上wx:key，進行唯一標識，通過wx:for-item可以指定陣列當前元素的變數名，通過wx:for-index可以指定陣列當前下標的變數名，程式碼示例如下

 <view wx:for="{{ items }}" wx:key="{{ index }}">
    {{ item }} --- {{ index }}
  </view> 

data: {
    message: "hello view",
    otherMessage: "other message",
    items: [1, 2, 3, 4],
    show: false
  }

3. 條件渲染
   條件渲染可以通過wx:if指令，還可以wx:elif、wx:else等等去進行條件渲染，程式碼示例如下

<view wx:if="{{show}}">
    {{ message }}
  </view>
  <view wx:else="{{!show}}">
    {{otherMessage}}
  </view>

4. 模版
   在模板中定義程式碼片段，然後在不同的地方呼叫。在定義模版template的時候，使用name屬性，裡面就是程式碼的內容。使用模版template的時候，使用is屬性，知道是使用的哪一個模版。如果使用模版的時候，想要傳遞資料，可以通過data，示例程式碼如下

<template name="header">
  <view>Header {{message}}</view>
</template>

<template is="header" data="{{message}}"></template>

如果 data 中的資料是一個物件，想要獲得物件中的某一個值，那麼就使用 ...，結構賦值，示例程式碼如下

<template name="header">
  <view>Header {{name}} {{age}}</view>
</template>

<template is="header" data="{{...mes}}"></template>

data: {
    message: "hello view",
    otherMessage: "other message",
    items: [1, 2, 3, 4],
    show: false,
    mes: {
      name: "張三",
      age: 23
    }
  },

5. 點選事件
   小程式中的點選事件使用 bindTap，如果需要修改值，使用this.setData()，點選後資料發生變化，示例程式碼如下

<view wx:if="{{show}}">
    {{ message }}
  </view>
  <view wx:else="{{!show}}" bindtap="handleTap">
    {{otherMessage}}
  </view>

handleTap() {
    // console.log("tap")
    this.setData({
      otherMessage: "new message"
    })
  }

6. 微信小程式點選事件的一些方法總結：

• 如果是普通的點選事件，那麼就可以用 bindtap，示例程式碼如下：

<view class="content" bindtap="handleAddressClick">{{address}}</view>

• 如果是radio-group，單選按鈕的一些點選事件，那麼就可以用 bindchange，示例程式碼如下：

<radio-group bindchange="handleTypeChange">
    <label>
      <radio value="buy" checked="true" class="buy">求購</radio>
      <radio value="sell">轉讓</radio>
    </label>
</radio-group>

• 如果是input輸入框的一些點選事件，那麼就可以用 bindinput，示例程式碼如下：

<input placeholder="填寫您的具體需求" class="info-input" bindinput="handleMessageChange"></input>

7. 微信小程式關於發起請求的一些總結：

• 如果想進行發起請求，可以使用 wx.request() 這個 API，進行發起請求，程式碼示例如下：

const data = Object.assign({}, this.staticData, {
      address: this.data.address,
      distinct: app.globalData.distinct
})

wx.request({
  url: 'https://nuanwan.wekeji.cn/student/index.php/trade/add_item', 
  data: data,
  method: "POST",
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  success: this.handleSubmitScuuess.bind(this)
})

8. 微信小程式中關於獲取詳情頁的一些方法總結：

• 在微信小程式中，如果想要實現點選後，獲取到頁面的一些詳情資訊，可以在onLoad() 事件中去實現，在onLoad() 生命週期函式中，傳入options選項，獲取id，頁面一載入就會執行了，程式碼示例如下：

// pages/detail/detail.js
const app = getApp()
const header = require("../../components/header/header.js")
const data = Object.assign({}, header.data, {
    address: "",
    type: "",
    message: "",
    contact: ""
})

Page({
  // data: {
  //   // address: "",
  //   // type: "",
  //   // message: "",
  //   // contact: ""
  // },
  data: data,
  // 頁面一載入的時候就會獲取到相應的詳情資訊，通過id發起請求，獲取到具體的資訊
  onLoad(options) {
    // console.log(options)
    this.getDetailInfo(options.id);
  },
  getDetailInfo(id) {
    wx.request({
      url: 'https://nuanwan.wekeji.cn/student/index.php/trade/get_item',
      data: {
        distinct: app.globalData.distinct,
        id: id
      },
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: this.getDetailSucc.bind(this)
    })
  },
  getDetailSucc(res) {
    const result = res.data.data;
    this.setData({
      address: result.address,
      type: result.type,
      message: result.message,
      contact: result.contact
    })
  }
})