小程序の异步api封装&插槽/混入

异步API的封装

1. 为什么要封装微信的异步API?
   1. 因为异步的原因,可能会与我们代码逻辑有所冲突
   2. 因为微信提供的异步API很繁琐,我们通过你自己的进一步封装,可以更好的调用,减少代码的体积
2. 如何封装?
   1. 使用promise封装
   2. 示例:

      // 我们这里使用微信提供的请求API进行演示,封装逻辑都是一样的
      const baseUrl = 'xxx'
      const request = (params,token) => {
        return new Promise((resolve, reject) => {
          wx.request({
            ...params,
            url: params.baseUrl ? params.baseUrl + params.url : baseUrl + params.url,
            success: (result) => {
              // 注意: resolve只能传递一个参数,多个参数可以使用对象传递
              resolve(result.data)
            },
            // 因为fail这里一定返回的是错误信息并reject也是一个方法的调用,所以这里可以简写
            fail: reject,
            complete: (res) => {},
          })
        })
      }
      export default request

这样,我们在其它js文件引入后,可以进行async await的解析或者promise链式调用

slot(插槽)

1. slot 用法和vue的默认插槽一样(也有具名插槽)

   // 使用:
   
   //子组件
   <view>
     <slot name="name"></slot>
   </view>
   
   Component({
     options: {
       // 设置属性开启具名插槽
       multipleSlots: true
     }
   })
   
   // 父组件中
   <component>
     <view slot="name"></view>
   </component>
   
   

2. 如何在封装包含插槽的组件时,如果不传递传参默认展示其它内容?

   1. 通过传递属性控制(不推荐)
      这里就不做展示了,因为比较容易想到思路且代码比较冗余

   2. 法1:通过css

      wxml中:
        <view class="slot-wrapper">
          <view class="slot" > <slot></slot> </view> 
          <view clas="default" > 展示默认内容 </view>
        </view>
      
      wxss中:
        // 思路: 通过非空选择器判断元素是否存在之后兄弟选择器进行配置显隐
        // 注意: 兄弟选择器只能选择同级下方的属性,所以要注意dom结构
        .slot-wrapper .slot:empty+.default{
          display: flex;
        }
         .slot-wrapper .slot{
           display: none;
           justify-content:center;
         }

behaviors(混入)

1. 用法类似于vue的Mixin

   const behaviorsOne = require('behaviorsOne')
   Component({ 
     behaviors:[ behaviorsOne ]
   })

值得注意:
(1) 这是组件专有的属性
(2) 如果组件中有同名变量,组件中的变量会覆盖behaviors里的变量,如果变量是引用类型,则会进行合并
(3) behaviors里的生命周期快于组件里的生命周期,如果一个behaviors文件被一个组件引用多次,那么只会执行一次该生命周期函数