This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Wechat developer tools and VUE still have a lot of similarities, so vUE is a good basis for entry

Use of simple elements

View, text, CheckBox, if, Hidden, Image, Icon

{{MSG}}
Developer tools view instead of div, reference data inside the data also use {{}}}

1111111111111  2222222222
Text is the same as span. Decode tags: Decode text content, such as & NBSP converted to Spaces

Check whether the item is checked according to the checked item

Wx :if

Display
hidden

< / image > mode has a zoom mode and cutting mode, the most commonly used is widthFix | zoom mode, width, height, automatically change the original aspect ratio unchanged and heightFix, scaleToFill, etc

Through the array

Iterate through group my_list: [{id: 1, name: “little white”}, {id: 2, name: “little black”}, {id: 3, name: “little bush”}]

<view> <! -- Plain array wx:key ="*this" -->
    <view class="my_list" wx:for="{{my_list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
      {{index}} : {{item.name}}
    </view>
  </view>
Copy the code

Blocks do not render to the page

Click the event parameter

bindtap=” {{index}}”

ToMyWallet(e){
    console.log(e.currentTarget.dataset.num);
}
Copy the code

The dataset can be retrieved from the parameter name corresponding to e.currenttarget.dataset

Unlike VUE, assigning a value to an element in data (goodsId) requires using setData

this.setData({
    goodsId: e.currentTarget.dataset.num
})
Copy the code

radio-group

<radio-group bindchange="handleChange">
    <radio color="red" value="male">male</radio>
    <radio color="red" value="female">female</radio>
</radio-group>
<view>You have selected: {{gender}}</view>

handleChange(e){
    let gender = e.detail.value;
    this.setData({
    gender: gender
   })
}
Copy the code

checkbox-group

Unlike radio-groups, receivers need to use arrays, because multiple selections can be one or more

<view>
<checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
        {{ item.name }}
    </checkbox>
</checkbox-group>
</view>
<view>You checked: {{checkedList}}</view>

handleItemChange(e){
    const checkedList = e.detail.value;   
    this.setData({
        checkedList: checkedList
    })
}
Copy the code

Parent components pass values like children

After the parent component calls
, the child component can get the {{Tabs}} content by receiving the Tabs

 properties: {
    tabs: {type: Array.value:""}}Copy the code

Child components pass values like parent components

handleItemTap(e){
    const {index} = e.currentTarget.dataset;
    // The child passes information to the parent
    this.triggerEvent("itemChange", {index})
}
Copy the code

Activate the parent component’s handleFatherChange function with itemChange (bind:itemChange=”handleFatherChange”)

handleFatherChange(e){
    const {index} = e.detail;
    console.log(index);
    let {tabs} = this.data;
    this.setData({tabs})
 }
Copy the code

Request to optimize

// request/index.js
export const request=(params) = >{
  return new Promise((resolve, reject) = >{ wx.request({ ... params,success:(result) = >{
        resolve(result);
      },
      fail:(err) = >{ reject(err); }})})}Copy the code

Import {request} from “.. /.. /request/index.js”;

request({url: 'https://***/*****/****'})
    .then(result= >{
      this.setData({
        swiperList: result.data.message
      })
    })
Copy the code

If there are more requests. Then, it will look cleaner

Use caching technology

Wx.setstoragesync (‘cates’, {time: date.now (), data: wx.setStoragesync (‘cates’, {time: date.now (), data: Result.data.message}) {time: date.now (), data:[… }, get wx.getStoragesync (‘cates’) and use it if it exists and has not expired, responsible for rerequesting data

 // The interface returns data
  Cates: []./* Lifecycle functions -- listen for page loads */
  onLoad: function (options) {
      // Use caching techniques
      const Cates = wx.getStorageSync('cates');
      if( !Cates ) {// It does not exist, send a request for data
        this.getCates();
      }else{
        // There is old data, define an expiration time of 10s
        if(Date.now() - Cates.time > 1000*10) {this.getCates();
        }else{
          console.log("You can use old data.");
          this.Cates = Cates.data; }}},getCates(){
    request({url: "http://2z55s62479.qicp.vip/advert/search"})
    .then(result= >{ 
      // this.setData({
      // swiperList: result.data.message
      // })
      // Store the data in the interface to local storage (using caching technology)
      wx.setStorageSync('cates', {time: Date.now(), data: result.data.message})
      console.log(result); })}Copy the code