wxmp_note1

setData

类似于 nextTick 原理

that.setData({
 commentsList: res.data.data 、
 // 只有setData可以设置data里面的值 (可能是异步)
 // setData 触发渲染的唯一入口
 //https://developers.weixin.qq.com/miniprogram/dev/framework/performa // nce/tips.html
 }, () => {
 this.data.commentsList // 这里是setData设置好值之后的 callback
 });
 
 // this.data.commentsList = res.data.data; 这样是可以赋值 但是不触发渲染的

生命周期函数中有两个可以用于加载数据
- onLoad和onReady(页面加载完成第一次操作或者render DOM的时候) 一般封装成 promise 进行操作

分包加载

在小程序中使用分包加载的组件应该都放置在外面的文件或者一个（规范）subPackages 的文件夹中

易于区分和语义化然后在app.json中模拟即可

"subPackages"： [
 "root":"...",
 "page":"[]" 具体可以看官方文档
 ]

小程序组件传值

A是父组件 B是子组件

父传子

父组件

//父组件Ajson （里面不能有注释）

{
 "navigationBarTitleText": "父子传值",
 "usingComponents": {
 "componentB": "../../components/son/son"
 }
 }

//父组件A js
 // view/father/father.js
 Page({
 /** 
    
    页面的初始数据
 */
 data: {
 paramAtoB: "我是A向B传值"
 }
 })

子组件


 
 {{paramAtoB}}

//子组件B js
 Component({
 //B在这里接收与data类似可以直接在wxml上用
 properties: {
 paramAtoB: {
 type: String,//类型
 value: 'default value'//默认值
 }
 },
 data: {
 }
 })

//子组件B json

{
 "component": true,
 "usingComponents": {}
 }

子传父

父组件


 
 
 {{ paramBtoA }}

// view/father/father.js
 Page({
 
 /** 
    
    页面的初始数据
 */
 data: {
 paramAtoB: "我是A向B传值",
 paramBtoA: 1122
 },
 onMyEvent: function (e) {
 //通过事件接收
 this.setData({
 paramBtoA: e.detail.paramBtoA
 })
 }
 })

//父组件A json （里面不能有注释）

{
 "navigationBarTitleText": "父子传值",
 "usingComponents": {
 "componentB": "../../components/son/son"
 }
 }

子组件

{
 "navigationBarTitleText": "父子传值",
 "usingComponents": {
 "componentB": "../../components/son/son"
 }
 }


 
 {{paramAtoB}}

（注意：子组件的方法需要写在methods：{}里面）

//子组件B js
 Component({
 //B在这里接收与data类似可以直接在wxml上用
 properties: {
 paramAtoB: {
 type: String,//类型
 value: 'default value'//默认值
 }
 },
 data: {
 },
 methods: {
 //触发change事件向A传值
 change: function () {
 this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
 }
 }
 })

//子组件B json

{
 "component": true,
 "usingComponents": {}
 }

wxmp_note

组件名称展示

微信小程序bind事件和catch事件的区别

bindtap 事件绑定不会阻止冒泡事件向上冒泡
catchtap 事件绑定可以阻止冒泡事件向上冒泡

小程序注意事项

App() 必须在 app.js 中注册，且不能注册多个。
编译后的代码包大小需小于 1MB，否则代码包将上传失败。
每个页面需要手动在app.json中进行注册，否则不能访问。
直接修改 this.data无效，无法改变页面的状态，还会造成数据不一致。
tabBar只能配置最少2个、最多5个，tab 按数组的顺序排序。
小程序页面只能同时打开 5 个，如果交互流程较长难以支持。
同时只能存在 5 个url请求。
无法跳转小程序以外的url。
没有cookie。
没有开放加载web页面
没有a标签链接，不可嵌套iframe
没有window变量，但微信提供了wx全局方法集
事件绑定和条件渲染类似Angular，全部写在WXML中

主体

app.js 根目录的app.js很有用,因为在它内部注册的变量或方法，都是可以被所有页面获取到。可以监听并处理小程序的生命周期、声明全局变量。

其余的.js文件可以通过var app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法

app.json是小程序的全局配置

pages 配置小程序的组成页面，第一个代表小程序的初始页面
 window 设置小程序的状态栏、标题栏、导航条、窗口背景颜色
 tabBar 配置小程序tab栏的样式和对应的页面

页面周期函数（page）

image

]

onLoad(页面加载，一个页面只会调用一次)
onShow(页面显示，页面每次打开都会调用)
onReady(页面完成初次渲染)

`app.js`的生命周期

app.js是关于整个小程序项目的方法和属性，类似页面Page({...})函数，也需要一个外层函数包裹App({ ...})

App({
 //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
 onLaunch: function () {
 
 },
 // 当小程序启动，或从后台进入前台显示，会触发 onShow
 onShow: function (options) {
 
 },
 //当小程序从前台进入后台，会触发 onHide
 onHide: function () {
 
 },
 // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
 onError: function (msg) {
 
 }
 })
 // 应用程序的全局变量
 globalData: {
 g_isPlaying: false,
 // 记录当前页面是否播放
 g_currentMusicPost: null,
 // 电影api地址
 doubanBase: 'https://api.douban.com'
 }

当然也可以在里面设置一些全局的变量，然后在其他页面对应的js文件中通过下面的方式来获取到里面定义的全局变量。
```
var app = getApp();
 var globalData = app.globalData
```