Summary of the view layer of the WeChat applet

1. WXMLGrammar of WeChat Mini Program

1. Binding Data
   The datavariables wrapping braces, { {}}similar interpolation expressions, such as{ { message}}
2. List rendering
   List rendering wx:forcan render the datadata through instructions , add it when rendering wx:key, for unique identification, by wx:for-itemspecifying the variable name of the current element of the array , and by specifying the variable name of the wx:for-indexcurrent subscript of the array, the code example is as follows

 <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. Conditional rendering
   Conditional rendering can be performed by wx:ifinstructions, you can also wx:elif, wx:elseetc. to perform conditional rendering, the code example is as follows

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

4. Templates
   Define code snippets in templates and then call them in different places. When defining the template template, use the nameattribute, which is the content of the code. When using a template template, use isattributes to know which template is used. If you want to pass data when using the template, you can pass it data. The sample code is as follows

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

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

If the datadata is an object that you want to get the value of a certain object, then use ..., in assignment, the following sample code

<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. Click event
   Use the click event in the applet bindTap, if you need to modify the value, use it this.setData(), and the data will change after the click. The sample code is as follows

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

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

6. Summary of some methods of WeChat applet click events:

• If it is a normal click event, then it can be used bindtap. The sample code is as follows:

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

• If it is radio-group, some click events of the radio button can be used bindchange. The sample code is as follows:

<radio-group bindchange="handleTypeChange">
    <label>
      <radio value="buy" checked="true" class="buy">求购</radio>
      <radio value="sell">转让</radio>
    </label>
</radio-group>

• If it is inputsome click event of the input box, then it can be used bindinput. The sample code is as follows:

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

7. Some summary of the WeChat applet about initiating a request:

• If you want to initiate a request, can use wx.request()this API, for initiating a request, the following sample code:

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. A summary of some methods for obtaining the detail page in the WeChat applet:

• In the WeChat applet, if you want to obtain some detailed information of the page after clicking it, you can do it in the onLoad()event. In the onLoad()life cycle function, pass in the optionsoption, get id, and the page will be executed as soon as the page is loaded. Code example as follows:

// 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
    })
  }
})