这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

async

es7的async号称的解决回调的最终方案，async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成，也是在等async 函数返回的一个 Promise对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果

支持async/await语法，按需注入regeneratorRuntime，目录位置与辅助函数一致，只引用但不使用 import regeneratorRuntime from '../../lib/runtime/runtime' ， runtime.js需要自己去下载

在request模板中加入公共的url(https://*/api/public/v1)，加在请求过来的url前面（/categories）就会变成 https://*/api/public/v1/categories

export const request=(params)=>{
  //定义公共的url
  const baseUrl = "https://*/api/public/v1"
  return new Promise((resolve, reject)=>{
    wx.request({
      ...params, 
      url: baseUrl + params.url,
      success:(result)=>{
        resolve(result);
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}

把接口的数据通过 wx.setStorageSync 存入到本地存储中格式：{time:Date.now(), data:[...]}

// 获取数据
  async getCates(){
    const res = await request({url: "/categories"});
    this.Cates = res.data.message;
    wx.setStorageSync('cates', {time:Date.now(), data:this.Cates})
  },

动态导航栏

父组件tabs数据，如果isActive是true就把字体设置为红色，在页面中通过表达式显示{{item.isActive?'active':''}}

 tabs: [{id: 0, value: "综合", isActive: true},
        {id: 1, value: "销量", isActive: false},
        {id: 2, value: "价格", isActive: false}]

<Tabs tabs="{{tabs}}" bind:tabsItemChange="handleTabsItemChange"></Tabs> 引入子组件Tabs, 子组件点击 tabsItemChange 函数激活父组件 handleTabsItemChange 函数向父组件传递数据

子组件通过 properties 接收父组件数据（tabs），并渲染到页面

properties: {
    tabs: {
      type: Array,
      value: []
    }
  },

子组件通过this.triggerEvent向父组件传递数据，将被点击的下标传递回去

<view class="tabs">
  <view class="tabs_title">
    <view
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="handleItemTap" data-index="{{index}}"
    > {{item.value}} </view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>

handleItemTap(e){
    // 获得点击索引
    const {index} = e.currentTarget.dataset;
    this.triggerEvent("tabsItemChange", {index});  
}

点击handleItemTap函数会将索引传递到父组件 <slot></slot> 相当于一个占位符，显示父组件放在子组件中的内容

<Tabs tabs="{{tabs}}" bind:tabsItemChange="handleTabsItemChange">
  <block wx:if="{{tabs[0].isActive}}">0</block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
</Tabs>

遍历tabs中的元素，将传递过来的index（被点击的导航栏下标）和元素的下标进行比对，改变data里tabs内容的 isActive ，以区分活动导航栏。

 // 子组件传递过来的
  handleTabsItemChange(e){
    const {index} = e.detail;
    let {tabs} = this.data;
    tabs.forEach((v, i)=>i===index?v.isActive=true:v.isActive=false);
    this.setData({
      tabs
    })
  }

微信小程序开发async和活动导航栏

async

动态导航栏