微信小程序-其它

文档

wx-js-utils

• 小程序用户
• 小程序模板消息
• 小程序统一消息
• 小程序动态消息
• 小程序码
• 微信支付

微信支付

• node-tenpay

技巧、方法与工具

• 编译配置： 可以配置不同的页面作为起始页面

相对路径，绝对路径

• 绝对路径：以/开头： /pages/index/index
• 相对路径：不以/开头

调试

异常

• catch…try
• window.onerror

回调函数

示例：

   // 带回调函数的函数
  getData:function(callback){
    if(!callback){
      callback=res=>{}
    }
    wx.showLoading({
      title: 'load data',
    })
    todos.get().then(res => {
      // console.log(res.data)
      this.setData({
        tasks: res.data
      },res=>{
        callback()
        wx.hideLoading()
      })
    })
  }
  // 传入回调函数
     this.getData(res=>{
      wx.stopPullDownRefresh()
    })

事件

事件绑定与冒泡捕获

事件绑定的写法和组件属性一致，以key="value"的形式，其中：

• key以bind或者catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。同时bind和catch前还可以加上capture-来表示捕获阶段。
• value是一个字符串，需要在对应的页面Page构造器中定义同名的函数，否则触发事件时在控制台会有报错信息。
• bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段，其触发的顺序如下
• 

<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>
返回：
handleTap2、handleTap4、handleTap3、handleTap1

事件回调

  setMsg:function(eve){
    var s
    s = eve.type //是inner view组件
    this.setData({msg:s})
    console.log(eve)
  },

其中 eve就是回调返回的事件对象。
控制台输出：

这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。

• 事件对象属性

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

常见的事件类型

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发

加粗样式

数据本地化

• 存储：setStorageData, setStorageDataSync
• 读取：getStorageData, getStorageDataSync
  demo:

  tapSetStorage:function(eve){
      wx.setStorage({
        key: 'storeData',
        data: 'value1',
        success:function(){
          console.log("set storage successfully")
        },
        fail:function(){
          console.log("set storage fail")
        }
      })
  },
  tapSetStorageSync: function (eve) {
    try{
      wx.setStorageSync('storeDataSync', 'valueSync')
      console.log("set storageSync successfully")

    }catch(e){
      console.log("set storageSync fail")
    }
  },
  tapGetStorage: function (eve) {
    wx.getStorage({
      key: 'storeData',
      success: function(res) {
        console.log(res.data)
      },
    })
  },
  tapGetStorageSync: function (eve) {
    var value
    try{
      value=wx.getStorageSync('storeDataSync')
    }catch(e){
      console.log(e.data)
    }
    console.log(value.data)
  },

API

官网详细说明：https://developers.weixin.qq.com/miniprogram/dev/api/
小程序提供的API按照功能主要分为几大类：网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口，我们介绍一下API一般调用的约定：

• wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个 Callback 函数作为参数。当该事件触发时，会调用 Callback 函数。
• 如未特殊约定，多数 API 接口为异步接口 ，都接受一个Object作为参数。
  API的Object参数一般由success、fail、complete三个回调来接收接口调用结果，示例代码如代码清单3-17所示，详细说明如表3-9所示。
• wx.get* 开头的API是获取宿主环境数据的接口。
• wx.set* 开头的API是写入数据到宿主环境的接口。

wx.request({
	url: 'test.php',
	data: {},
	header: { 'content-type': 'application/json' },
	success: function(res) {
	 // 收到https服务成功后返回
	 console.log(res.data)
	},
	fail: function() {
	 // 发生网络错误等情况触发
	},
	complete: function() {
	 // 成功或者失败后触发
	}
})

程序与页面

分享

1：在onShareAppMessage内设置分享参数
2：在onLoad里获取分享参数，进行逻辑处理

  onShareAppMessage:function(eve){
    return {
      title: `房间-${this.data.roomid}`,
      path: `/pages/dbtest/dbtest?roomid=${this.data.roomid}`,
    }
  }

onLoad:function (eve){
    that = this;
    // 随机获得roomid, 并设置watcher
    if(JSON.stringify(eve)=='{}'){
      console.log("eve==null")
      ...
    }else{
      ...
    }
}

Page 构造器的参数

参数属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数–监听页面加载，触发时机早于onShow和onReady
onReady	Function	生命周期函数–监听页面初次渲染完成
onShow	Function	生命周期函数–监听页面显示，触发事件早于onReady
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数–监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
其他	Any	可以添加任意的函数或数据，在Page实例的其他函数中用 this 可以访问

页面数据

可以在Page实例下的方法调用this.setData把数据传递给渲染层，从而达到更新界面的目的。由于小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。
setData其一般调用格式是 setData(data, callback)，其中data是由多个key: value构成的Object对象。

Page({
  onLoad: function(){
    this.setData({
      text: 'change data'
    }, function(){
      // 在这次setData对界面渲染完毕后触发
    })
  }
})

• 实际在开发的时候，页面的data数据会涉及相当多的字段，你并不需要每次都将整个data字段重新设置一遍，你只需要把改变的值进行设置即可，宿主环境会自动把新改动的字段合并到渲染层对应的字段中，如下代码所示。data中的key还可以非常灵活，以数据路径的形式给出，例如 this.setData({“d[0]”: 100}); this.setData({“d[1].text”: ‘Goodbye’});

页面跳转和路由

• 页面跳转
  我们采用这样的方式进行描述页面栈：[ pageA, pageB, pageC ]，其中pageA在最底下，pageC在最顶上，小程序宿主环境限制了这个页面栈的最大层级为10层 ，也就是当页面栈到达10层之后就没有办法再推入新的页面了。我们下面来通过上边这个页面栈描述以下几个和导航相关的API。

• 使用 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
  小程序提供了原生的Tabbar支持，我们可以在app.json声明tabBar字段来定义Tabbar页

"tabBar":{
    "list": [
      {
        "text": "Tab1",
        "pagePath": "pages/index/index"
      },
      {
        "text": "Tab2",
        "pagePath": "pages/ui/index"
      },
    ]
  }

使用wx.switchTab({ url: ‘pageF’ })，此时原来的页面栈会被清空

渲染

数据驱动

小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面

坑

• Cannot read property ‘setData’ of undefined
  this 指针被回调函数覆盖
  原因：在回调函数中this 不是原来的this，因此没有setData方法
  解决：在外面定义 that=this
• cannot find document with _id ${res._id}, please make sure that the document exists and you have the corresponding access permission;
  引号错误
  原因

url: '../todoinfo/todoinfo?id=${res._id}'

这儿不应该是单引号’’, 而是``

解决：改为：

url: `../todoinfo/todoinfo?id=${res._id}`

• cannot find document with _id undefined
  外层的res参数被内层的覆盖、
  解决：

.then(res=>{
      wx.showToast({
        title: 'success',
        icon:'success',
        success:res=>{
          console.log(res._id)
          wx.redirectTo({
            url: `../todoinfo/todoinfo?id=${res._id}`,
          })
        }
      })
    })

• js每个语句后面记得加分号;
• 在使用一个object时注意其是否为null，或者它的属性为null
  反面例子：
  mtask.data.location.name 由于我没有选择location，location就是null，没有属性name，报错：
  error message Cannot read property ‘name’ of null;

参考文档

• 小程序运营文档地址：https://mp.weixin.qq.com/debug/wxadoc/product/index.html
• 设计文档地址：https://mp.weixin.qq.com/debug/wxadoc/design/index.html
• 微信开发者社区：https://developers.weixin.qq.com/home
• 小程序自定义分析说明文档：https://mp.weixin.qq.com/debug/wxadoc/analysis/custom/
• 微信开发者社区地址：https://developers.weixin.qq.com