HLG随笔

Appearance

本文总阅读量 次

1、使用 weui 框架 ​

在 app.json 文件中写入 ​

js
  "useExtendedLib": {
    "weui": true
  }

在 pages 目录下的目标文件中的.json 文件中写入 ​

js
  "usingComponents": {
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar",
  }

这里调用了 weui 的基础组件 searchbar，规范命名改为 mp-searchbar。 ​

wxml

js
<view class="page__hd">
    <view class="page__title">Form</view>
    <view class="page__desc">表单输入</view>
</view>
<mp-searchbar></mp-searchbar>

2、使用 computed 和 watch 扩展能力 ​

插件地址 ​

用方式 2 引入，将克隆的项目文件 demo\miniprogram_npm 根目录即可

demo ​

html
<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view>A = {{ac}}</view>
  <view>B = {{bc}}</view>
  <view>SUM = {{sumc}}</view>
  <button bindtap="onTapComputed">click</button>

  <view>A = {{a}}</view>
  <view>B = {{b}}</view>
  <view>SUM = {{sum}}</view>
  <button bindtap="onTapWatch">click</button>
</scroll-view>
js
// index.js
const computedBehavior = require('miniprogram-computed').behavior
Page({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
    sum: 2,

    ac: 1,
    bc: 1,
    sumc: 2
  },
  computed: {
    sumc(data) {
      // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
      // 这个函数的返回值会被设置到 this.data.sum 字段中
      return data.ac + data.bc
    }
  },
  watch: {
    'a, b': function (a, b) {
      console.log('watch')
      this.setData({
        sum: a + b
      })
    }
  },
  onTapComputed() {
    this.setData({
      ac: this.data.bc,
      bc: this.data.ac + this.data.bc
    })
  },
  onTapWatch() {
    this.setData({
      a: this.data.b,
      b: this.data.a + this.data.b
    })
  }
})

3、 程序代码优化 ​

关键帧动画 小程序基础库 2.9.0 开始支持

分包预下载 小程序基础库 2.3.0 开始支持

组件按需注入 小程序基础库 2.11.1 开始支持

长列表组件 小程序基础库 2.2.2 开始支持