文章目录
文档
wx-js-utils
- 小程序用户
- 小程序模板消息
- 小程序统一消息
- 小程序动态消息
- 小程序码
- 微信支付
微信支付
技巧、方法与工具
- 编译配置: 可以配置不同的页面作为起始页面
相对路径,绝对路径
- 绝对路径:以/开头: /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 ]。
扫描二维码关注公众号,回复: 8798144 查看本文章 -
使用 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