wx小程序（1）

简单记录一下微信小程序的学习。

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
// 整个小程序只有一个App实例
|-- app.json (整体配置：窗口样式、网络延迟...)
|-- app.js (总体逻辑：onLaunch、onShow、onHide、onError)
|-- app.wxss (公共样式)
|-- pages
    |-- index
        |-- index.js (页面注册)
        |-- index.json
        |-- index.wxml
        |-- index.wxss
|-- img 图片资源
|-- utils
    |-- common.js (公用方法)

简介

  1. 小程序有appid
  2. 可以使用标签获取用户信息

关键思想 & 设计写法

  1. 响应式数据绑定，逻辑层（js）数据处理，视图层（view）自动更新，需要将页面的数据、方法、生命周期函数注册到框架中。

  2. window、document等DOM和BOM的API不可用，可以调用微信环境提供的各种API，例如：地理定位，扫码，支付。

  3. 页面引用behaviors共享数据字段和方法。

  4. Page适用于简单的页面，Component用于复杂页面。

  5. 页面生命周期
    页面生命周期

  6. 不支持直接引入node_modules，可copy相关代码。

  7. common.js中抽取公共代码，使用module.exports导出，需要使用时通过require导入

  8. 监听事件触发，数据以参数形式传入回调函数.
    wx.onCompassChange(function (res) {...})

  9. 同步API的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常；
    异步API接口接受一个Object类型的参数，Object对象中不包含success/fail/complete时将默认返回 promise，否则仍按回调方式执行，无返回值。

  10. 尺寸单位rpx（responsive pixel）:可以根据屏幕宽度进行自适应。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     // 同步
     try {
      wx.setStorageSync('key', 'value')
     } catch(e) {...}

    // 异步
     wx.login({
      success(res) {
        ...
      }
    })
  11. 1
    2
    3
    4
    // 单向数据绑定
    <input value="{{value}}" />
    // 双向数据绑定
    <input model:value="值为 {{value}}" />

  12. 节点信息查询API可以用于获取节点属性、样式、在界面上的位置等信息

    1
    2
    3
    4
    5
    6
    7
    8
    const query = wx.createSelectorQuery()
    query.select('#the-id').boundingClientRect(function(res){
      res.top // #the-id 节点的上边界坐标（相对于显示区域）
    })
    query.selectViewport().scrollOffset(function(res){
      res.scrollTop // 显示区域的竖直滚动位置
    })
    query.exec()

路阻且长，还得走

  1. 引入TDDesign，编译之后，出现WAServiceMainContext.js:2 Error: module "miniprogram_npm/tdesign-miniprogram/toast/props.js" is not defined，关闭重启dev tools即可。

附录学习资料
wx官网
wx开发者工具
tddesign