# Advancement

# 自定义组件

components鼠标右键新建组件即可自动生成

外部
<test name="yiki"></test>
---
<text>{{name}}</text>
---
// components/test/test1.js
Component({
  properties: {//组件的属性列表
  // 接收外部
  name:{
    type:String
  }
  //or
  name:String
  },
  data: {//组件的初始数据
  },
  methods: {//组件的方法列表
  }
})

局部/全局(app.json)引用 .json里写

被引用的页面json里

  {
  "usingComponents": {
    "testxx":"/components/test/test1" 
  }
}
----页面直接用
<testxx></testxx>

不要用id，尽量用class选择器
stylesolation 修改组件样式隔离
- docs

  Component({
  options: {
    styleIsolation: 'isolated'
  }
})

# 组件通信

docs
事件绑定
- 通过方法传父bind:事件名=“eventfunc" 父可以在event: function(e){e.detail}拿到子的传参
- 子 this.triggerEvent('事件名', myEvent参数对象, myEventOption)
获取组件实例
- this.selectComponent(selector) ，获取子组件的实例对象
- 给是实例对象进行它自己内部的东西

# 组件生命周期

docs

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  creat: function(){
    // 此时还不能调用 setData,只应该用于给组件 this 添加一些自定义属性字段
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

# 数据监听器

observers

docs

Component({
  observers: {
    'A, B': function(numberA, numberB) {
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})

# 插槽

父

{
  "usingComponents": {
    "my-slot": "/components/my-slot/my-slot"
  }
}
----
<my-slot id="myslot"/>

<my-slot>
<button slot="slot1">插槽插入1</button>
<button slot="slot2">插槽插入2</button>
</my-slot>

你的插槽就是个component

<!--components/my-slot/my-slot.wxml
可以给插槽起名来区分啦啦啦啦(前提要添加option-multipleSlots)～
-->
<slot name='slot1'/>//显示： 插槽插入1
<slot name='slot2'/> // 显示： 插槽插入2

# behaviors

用于组件间代码共享的特性，类似于一些编程语言中的 mixins(引用生效)

-- 'my-behavior ---
module.exports = Behavior({
  properties:{},
  dta:{},
  methods:{}
})

-----
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  ...

# mobx全局数据共享

状态管理

# 分包

按需加载
- pages / subpages
- 主包启动和tab-bar 公共资源 + 多个分包私有资源
优化首次启动的下载时间
解耦

# promise化

回调地狱
npm miniprogram-api-promise

import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp) // wx转存到wxp

然后可以愉快使用 async 和 await 啦

# npm

不支持node内置包
不支持浏览器内置对象的包
不支持c++插件

Last Updated: 2022/6/26 上午11:43:14

← The Basic yiki→