wxmp_note1

setData

• 类似于 nextTick 原理

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n6" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">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; 这样是可以赋值 但是不触发渲染的</pre>

• 生命周期函数中 有两个 可以用于加载数据

  • onLoad和onReady(页面加载完成 第一次操作或者render DOM的时候) 一般封装成 promise 进行操作

分包加载

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

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

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="json" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">"subPackages"： [
  "root":"...",
  "page":"[]" 具体可以看官方文档
  ]</pre>

小程序组件传值

• A是父组件 B是子组件

• 父传子

  父组件

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="wxml" cid="n25" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">
  <view>
  <componentB paramAtoB='{{paramAtoB}}'></componentB>
  </view></pre>

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

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="json" cid="n27" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
  "componentB": "../../components/son/son"
  }
  }</pre>

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n28" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">//父组件A js
  // view/father/father.js
  Page({
  /**

  • 页面的初始数据
    */
    data: {
    paramAtoB: "我是A向B传值"
    }
    })</pre>

• 子组件

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="wxml" cid="n31" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">
  <view class="inner">
  {{paramAtoB}}
  </view></pre>

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n32" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">//子组件B js
  Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
  paramAtoB: {
  type: String,//类型
  value: 'default value'//默认值
  }
  },
  data: {

  }
  })</pre>

  //子组件B json

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="json" cid="n34" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">{
  "component": true,
  "usingComponents": {}
  }</pre>

• 子传父

  父组件

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="wxml" cid="n38" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">
  <view>
  <componentB paramAtoB='{{paramAtoB}}' bind:myevent="onMyEvent"></componentB>
  {{ paramBtoA }}
  </view></pre>

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n39" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">// view/father/father.js
  Page({
  ​
  /**

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

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

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="json" cid="n41" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
  "componentB": "../../components/son/son"
  }
  }</pre>

  子组件

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="json" cid="n43" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
  "componentB": "../../components/son/son"
  }
  }</pre>

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="wxml" cid="n44" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">
  <view class="inner">
  {{paramAtoB}}
  <button bindtap='change'>向A中传入参数</button>
  </view></pre>

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

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n46" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">//子组件B js
  Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
  paramAtoB: {
  type: String,//类型
  value: 'default value'//默认值
  }
  },
  data: {

  },
  methods: {
  //触发change事件向A传值
  change: function () {
  this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
  }
  }
  })</pre>

  //子组件B json

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="json" cid="n48" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">{
  "component": true,
  "usingComponents": {}
  }</pre>

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是小程序的全局配置

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n93" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">pages 配置小程序的组成页面，第一个代表小程序的初始页面
  window 设置小程序的状态栏、标题栏、导航条、窗口背景颜色
  tabBar 配置小程序tab栏的样式和对应的页面</pre>

页面周期函数（page）

![ image

]

• onLoad(页面加载，一个页面只会调用一次)

• onShow(页面显示，页面每次打开都会调用)

• onReady(页面完成初次渲染)

app.js的生命周期

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

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n109" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">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'
  }</pre>

• 当然也可以在里面设置一些全局的变量，然后在其他页面对应的js文件中通过下面的方式来获取到里面定义的全局变量。

  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n112" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">var app = getApp();
  var globalData = app.globalData</pre>