自定义组件

1. 新建component
2. 需要的页面导入
3. 当作标签使用
4. 组件样式会隔离，（自带scope）

• app.wxss中全局样式对组件无效
• 只有class选择器有样式隔离效果，id,属性，标签选择器不受样式隔离影响

5. 组件设置

• data 设置组件私有数据
• methods 事件处理函数和自定义方法
• properties 用来接收外界传递到组件的数据（和vue差别是props里数据可以修改）
• observers 数据监听器，类似vue watch
• 纯数据字段 只用来页面渲染的字段

//通过正则表达式匹配字段名称
options:{
	pureDataPattern:/^ $/
}

6. 组件的生命周期

• created 在组件实例刚刚被创建时执行
• attached 在组件实例进入页面节点树时执行
• ready 组件在视图层布局完成后执行
• moved 组件实例被移动到节点树另一个位置时执行
• detached 组件实例从页面节点树移除时执行
• error 组件方法抛出错误时执行

//定义组件生命周期
Component({
	lifetimes:{
    	attached(){},
        detached(){}
    }
})

7. 组件所在页面的生命周期

• show 组件所在页面被展示时执行
• hide 组件所在页面被隐藏时执行
• resize 组件所在页面尺寸改变时执行

Component({
	pageLifetimes:{
    	show:function(){},
        hide:function(){},
    	resize:function(size){}
    }
})

8. 插槽

• 提供一个节点，承载wxml结构

9. 父子组件通信

• 属性绑定
• 事件绑定

1. 父组件js定义一个函数，这个函数通过自定义事件，传递给子组件
2. 父组件的wxml通过自定义事件，将1中定义的函数引用，传递给子组件
3. 子组件js中，通过调用this.triggerEvevt('自定义事件名',{/*参数对象*/}),将数据发送到子组件
4. 父组件js通过e.detail 获取到子组件传递过来的数据

• 获取组件实例

10. behaviors

• 用于组件间代码共享，类似于vue的mixins

 module.exports=Behavior({
 	//属性节点
 	properties:{}
 	//私有数据节点
 	data:{}
 	//事件处理函数和自定义方法节点
 	methods:{}
 	//其他节点。。。
 })

npm包

1. 小程序对npm的支持与限制

• 不支持依赖于Node.js内置库的包
• 不支持依赖于浏览器内置对象的包
• 不支持依赖于C++插件的包

2. Vant Weapp 小程序UI组件库
3. api Promise化

• 通过额外配置，将官方提供的基于回调函数的异步api,改造升级为基于Promise的异步api

4. 全局数据共享方案 Mbox

• mobx-miniprogram 创建store实例
• mobx-miniprogram-bindings 把store数据或方法绑定到组件中

5. 分包

• 加速加载，减少等待时间
• 一个主包+多个分包（主包包含启动页面或TabBar页面，分包只包含和当前分包有关的页面和资源）
• 分包加载规则 1.小程序启动时，默认会下载主包，并启动主包页面
  2. 用户进入分包某个页面时，才会把对应的分包下载下来
• 分包的体积限制（所有和不超过16M，单包不超过2M）
• 分包引用原则
  1. 主包无法引用分包内私有资源
  2. 分包之间不能相互引用私有资源
  3. 分包可以引用主包内的公共资源
• 分布预下载
  1. 进入某个页面时由框架自动预下载可能需要的分包，提升速度