小程序日常小记

1.wx常用的跳转方法

2. bindtap与catchtap的区别

3.小程序分包的问题

⚠️ 分包之后文件会自动创建

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

4.data自定义属性（组件上触发）

• data的使用方法：data的属性名不能包含大写，data-(任意字符串)。这样定义true，其类型为字符串。

<view bindtap="goPage" data-type="1">
</view>
<view bindtap="goPage" data-type="true">
</view>

  goPage (e: any) {
    // 如何取值
    const dataset = e.currentTarget.dataset;
    // 这里的true，打印的会是字符串true哦
    const type = dataset.type;
  }

5.如何获取屏幕高度

  wx.getSystemInfo({
      success(res) {
        // 获取屏幕高度
        const cliH = res.widowHeight;
        cliW = res.screenWidth,
        rpxR = 750 / cliW;
        const windowHeight: number = cliH * rpxR;
      }
    })

6.小程序父子传值的方法

• （1）属性值绑定

<view>父组件中的name为： {{ name }}</view>
<!-- 通过组件中的name属性将值传入 -->
<my-child name="{{ name }}"></my-child>

• (2) 事件绑定

<view>父组件中的name为： {{ name }}</view>
<!-- 通过组件中的name属性将值传入 -->
<my-child name="{{ name }}" bind:emitSetTap="setTap"></my-child>

// 子组件
  const name = 'name'
  this.triggerEvent('emitSetTAp', name);

  setTap (e: any) {
    const detail = e.detail;
    const name: string = detail.name;
    console.log(name, '子组件传过来的name')
  }

• (3) 获取组件实例

可在父组件里调用 this.selectComponent（类名/id） ，获取子组件的实例对象。（父组件将会获取 class 为 my-component 的子组件实例对象，即子组件的 this） ⚠️：默认情况下，小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例（将返回 null）

getChildComponent () {
    const child = this.selectComponent('.my-child');
    console.log(child)
  }

<view>父组件中的name为： {{ name }}</view>
<!-- 通过组件中的name属性将值传入 -->
<my-child name="{{ name }}" bind:emitSetTap="setTap" class="my-child"></my-child>

小程序组件数据监听

可以监听类型number、object、string、boolean
（1）可以同时监听多个、一次 setData 最多触发每个监听器一次。同时，监听器可以监听子数据字段
（2）仅使用通配符 ** 可以监听全部 setData
（3）需要监听所有子数据字段的变化，可以使用通配符 **。 例如对象下面的所有字段变化的监听

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})

Component({
  observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.field': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.field.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})

7.behaviors 的使用

定义： 用于实现组件间代码共享的特性，类似于vue的"mixins"

**behaviors原文： **https://blog.csdn.net/weixin_46112225/article/details/122408691

后续后期再更新哦，敬请期待😄😄