简单元素使用

view、text、checkbox、if、hidden、image、icon

<view> {{ msg}} </view> 开发者工具的view代替了div, 引用data里面的数据也是用{{}}来接

<text selectable decode> 1111111111111 2222222222 </text> text和span差不多，selectable标签：长按文字复制; decode标签：对文本内容进行解码,像这里的 &nbsp 会转换成空格

<checkbox checked="{{true}}"></checkbox> 单选框，根据 checked 来判断是否选中

wx:if <view wx:if="true"> 显示 </view> hidden <view hidden="{{true}}"> 隐藏 </view>

<image mode="widthFix" src="../../imgs/T.jpg"></image> mode有缩放模式和裁剪模式，最常用的就是widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变以及 heightFix 、scaleToFill等

<icon type="success" size="60" color="yellow"></icon> 图标可以设置样式大小颜色等

遍历数组

遍历数组 my_list:[{id: 1, name:"小白"}, {id: 2, name:"小黑"}, {id: 3, name:"小希"}]

<view>
    <!-- 普通数组 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>

使用 block 不会渲染到页面

QQ图片20211110153326.png

QQ图片20211110153427.png

点击事件带参

<view bindtap="ToMyWallet" data-num="{{index}}"></view> bindtap对应点击事件的函数，data-num中的num就是传到函数中 {{index}}对于的参数名

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

通过 e.currentTarget.dataset.对应的参数名就可以获取数据了

与vue不同，给data中的元素（goodsId）赋值需要使用setData

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

radio-group

<radio-group bindchange="handleChange">
    <radio color="red" value="male">男</radio>
    <radio color="red" value="female">女</radio>
</radio-group>
<view>你选中的是： {{gender}} </view>

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

checkbox-group

和radio-group不一样的地方是接收需要使用数组来接，因为多选可能是一个或者多个

<view>
<checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
        {{ item.name }}
    </checkbox>
</checkbox-group>
</view>
<view>你选中的是： {{checkedList}} </view>

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

父组件像子组件传值

父组件调用<Tabs tabs="{{tabs}}" bind:itemChange="handleFatherChange"></Tabs>后，子组件可以通过接收tabs 将{{tabs}}内容拿到

 properties: {
    tabs:{
      type: Array,
      value:""
    }
  }

子组件像父组件传值

handleItemTap(e){
    const {index} = e.currentTarget.dataset;
    // 子组件向父组件传递信息
    this.triggerEvent("itemChange", {index})
}

通过itemChange激活父组件的handleFatherChange函数（bind:itemChange="handleFatherChange"）

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

请求优化

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

引入用来请求的方法 import { request } from "../../request/index.js";

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

这样如果有再多请求在后面 .then 就可以了，看上去会比较整洁

使用缓存技术

当我们需要从 https://*/*/* 这个后台接口中获取数据时，可以将获取到的数据通过wx.setStorageSync('cates', {time: Date.now(), data: result.data.message})存到Storage里面，格式就是 {time:Date.now(), data:[...]}，通过获取wx.getStorageSync('cates')，如果里面存在并且没有过期就直接使用，负责重新请求数据

 // 接口的返回数据
  Cates: [],
/* 生命周期函数--监听页面加载 */
  onLoad: function (options) {
      // 使用缓存技术
      const Cates = wx.getStorageSync('cates');
      if( !Cates ) {//不存在，发送请求获取数据
        this.getCates();
      }else{
        // 有旧的数据，定义一个过期时间 10s
        if(Date.now() - Cates.time > 1000*10){
          this.getCates();
        }else{
          console.log("可以使用旧的数据");
          this.Cates = Cates.data;
        }
      }
  },
  getCates(){
    request({url: "http://2z55s62479.qicp.vip/advert/search"})
    .then(result=>{ 
      // this.setData({
      //   swiperList: result.data.message
      // })
      // 把接口中的数据存入到本地存储中（使用缓存技术）
      wx.setStorageSync('cates', {time: Date.now(), data: result.data.message})
      console.log(result);
    })
  }

微信开发者工具入门