一、微信小程序的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})}
})