微信小程序的视图层总结

淡淡的烟草味﹌ 2022-12-21 03:12 140阅读 0赞

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

1.  **条件渲染**  
    条件渲染可以通过`wx:if`指令，还可以`wx:elif`、`wx:else`等等去进行条件渲染，代码示例如下

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

1.  **模版**  
    在模板中定义代码片段，然后在不同的地方调用。在定义模版`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
        }
      },

1.  **点击事件**  
    小程序中的点击事件使用 `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"
        })
      }

1.  微信小程序点击事件的一些方法总结：

*  如果是普通的点击事件，那么就可以用 `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`，示例代码如下：

1.  微信小程序关于发起请求的一些总结：

*  如果想进行发起请求，可以使用 `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)
    })

1.  微信小程序中关于获取详情页的一些方法总结：

*  在微信小程序中，如果想要实现点击后，获取到页面的一些详情信息，可以在`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
        })
      }
    })