小程序基础语法

| setData

this.setData({
  btnList:ls,
  [`textList[${n}]`]:text
})

| 标签

<block/>：包装元素，不会在页面中做任何渲染，只接受控制属性，如 wx:if wx:for

| 条件渲染

  • wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

  • hidden：组件始终会被渲染，只是简单的控制显示与隐藏。只对块状布局才生效，如设置flex布局则失效

如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

<view wx:if=""> 1 </view>
<view wx:elif=""> 2 </view>
<view wx:else> 3 </view>

| 事件

绑定事件传参：data-xxx； 用 dataset 接收。

事件绑定和冒泡

bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡。

点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

事件的捕获阶段 需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>
事件对象

| 路由跳转传参

页面栈：[ pageA, pageB, pageC ]，其中pageA在最底下，pageC在最顶上，也就是用户所看到的界面。 小程序宿主环境限制了这个页面栈的最大层级为10层 ，也就是当页面栈到达10层之后就没有办法再推入新的页面了。

  • 使用 wx.navigateTo({ url: ‘pageD’ }) 可以往当前页面栈多推入一个 pageD，此时页面栈变成 [ pageA, pageB, pageC, pageD ]。

  • 使用 wx.navigateBack() 可以退出当前页面栈的最顶上页面，此时页面栈变成 [ pageA, pageB, pageC ]。

  • 使用wx.redirectTo({ url: ‘pageE’ }) 是替换当前页变成pageE，此时页面栈变成 [ pageA, pageB, pageE ]。当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转。

  • 　如果要跳转的位置是否位于TabBar中，如果是的话，要使用wx.switchTab 来跳转界面。

⭐详见