微信小程序开发手册

官方文档非常详细,这里就不复制了,只记录一些自己用到的。

框架文档

配置

全局配置app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"tabBar": { // 底部导航配置
"color": "#a9b7b7", // 未选择时底部导航的文字颜色
"selectedColor": "#11cd6e", // 选择时底部导航的文字颜色
"borderStyle":"white", // 底部导航边框的颜色
"list": [{
"selectedIconPath": "images/home_selected.png", // 底部导航被选择时的图片
"iconPath": "images/home.png", // 底部导航未选择时的图片
"pagePath": "pages/index/index",
"text": "首页"
}]
},
}

页面单独配置页面名.json

1
2
3
4
5
6
7
{
"navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色
"navigationBarTextStyle": "black", // 导航栏标题颜色
"navigationBarTitleText": "导航栏标题文字内容",
"backgroundColor": "#eeeeee", // 窗口的背景色
"backgroundTextStyle": "light" // 下拉 loading 的样式
}

框架结构

  • 可以将一些全局变量放在app.js中,这样全局都是能获取到的

页面生命周期

1
2
3
4
5
6
7
onShow			// 监听页面显示,如果是第一次,它发生在onLoad之前
onLoad // 监听页面加载
onReady // 监听页面初次渲染完成
onHide // 监听页面隐藏
onUnload // 监听页面卸载
onPullRefresh // 监听用户下拉动作
onReachBottom // 页面上拉触底事件的处理函数

页面跳转

  • wx.navigateTo(‘/pages/index/index?id=123’): 如果要传递参数,可以在query参数中添加,然后在目标页面的onLoad(options) 中获取options.id即可。需要注意,这个方法不能跳转给Tab,相当于是把一个新页面压入栈中,返回的时候就返回到刚才的页面。

  • wx.navigateBack()不能直接携带参数,但是可以直接在其他页面获取之前栈中页面的page对象,然后直接进行setData:

    1
    2
    3
    4
    let pages = getCurrentPages()
    let lastPage = pages[pages.length - 2];
    lastPage.setData({})
    wx.navigateBack({})
  • wx.reload(options): 直接刷新当前页面

用户信息

登录功能
  • 需要注意的是,可以不经用户统一直接调用登录接口,但是只能获取到其OpenIdsession_key

登录逻辑,官方这张图片很简单了

获取用户信息
  • 敏感信息包含openId/unionId
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 需要自己写一个button让用户主动触发,例如
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"
>登录</button>

// 在js中这样获取
bindGetUserInfo: function(res) {
res.userInfo // 用户信息对象,不包含openid等敏感信息
res.rawData // 不包括敏感想你洗的原始字符串,用于计算签名
res.signature // 签名数据
res.encryptedData // 包含敏感数据在内的完整用户信息的加密数据
res.iv // 加密算法的初始向量
}

// 查看是否授权
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success(res) {
console.log(res.userInfo)
}
})
}
}
})

事件

  • 常用事件有tap(点击)、longtap(长按)

  • 阻止事件冒泡:将bindtap修改为catchtap即可

  • 事件传参数,例如bindtap事件,不能直接像js那样打个括号把参数传递进去,而应该这样子传递

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <view id="myId" data-field="自定义字段,不能大写" bindtap="bindtap"> Click me! </view>

    // 然后在Page里面这样定义和接收参数
    Page({
    bindtap: function (e) {
    console.log(e)
    console.log(e.target) // target数据结构和currentTarget一样,不过它表示触发事件的源组件,而currentTarget表示事件绑定的当前组件
    console.log(e.currentTarget)
    console.log(e.currentTarget.id) // id不用在dataset中获取
    console.log(e.currentTarget.dataset.field)
    }
    })

组件文档

  • 目前所有的原生组件都有一些使用限制,比如z-index默认为最高,并且无法更改。如果要覆盖,得使用cover-view这个原生组件。

cover-view

用于覆盖原生组件:map/video/canvas/camera/live-player/live-pusher,但是内部只支持嵌套cover-view/cover-image/button

map

  • 最好整个小程序只维护一个map组件,不然可能会崩溃,性能很重要

text

textarea

多行输入框

API文档

setData页面数据

1
2
3
4
5
6
7
8
this.setData({
'array[0].field': 'value', // 可以用这种方式直接设置列表里面某个元素的值,而不用取出来再放回去set
})

new_array = this.data.array.splice(index, 1) // 但是删除元素还是有点麻烦
this.setData({
'array': new_array
})

数据存储

  • 同一个微信用户,同一个小程序storage上限未10MB,用户纬度隔离
  • 单个key允许存储的最大数据长度未1MB
  • 数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一致可用。如果用户储存空间不足,会自动清空最近最久未使用的小程序的本地缓存。
  • 后面加Sync的表示同步方法,异步一般有success/fail/complete回调函数,而同步则需要自己去catch异常
1
2
3
4
5
6
7
8
9
10
wx.clearStorage()	// 异步清理本地数据缓存
wx.getStorage({key:'key', success(res){}}) // 异步从本地缓存中获取指定key的内容
wx.getStorageInfo({success(res) {
console.log(res.keys) // 当前storage中所有的key
console.log(res.currentSize) // 当前占用的空间大小,单位KB
console.log(res.limitSize)} // 限制的空间大小,单位KB
}) // 异步获取当前storage的相关信息
wx.removeStorage({key: 'key'}) // 从本地缓存中移除指定的key
wx.setStorage({key: 'key', data: data}) // 设置缓存
wx.setStorageSync('key', 'value')

元数据

1
2
3
4
5
6
7
// 动态修改页面标题
wx.setNavigationBarTitle({
title: '标题1',
}

// 获取屏幕信息
wx.getSystemInfoSync().windowWidth // 屏幕宽度

网络

1
2
3
4
5
6
7
wx.request({
url: 'test.php',
data: {'x': '', y: ''}
header: { 'content-type': 'application/json'},
success: function(res) { console.log(res.data)},
complete: function() {console.log('无论成功与否都会执行')},
})

位置

1
2
3
wx.getLocation(OBJECT)	// 获取当前的地理位置、速度
wx.chooseLocation(OBJECT) // 打开地图选择位置
wx.openLocation(OBJECT) // 使用微信内置的地图查看某个位置

性能优化

  • this.setData()的优化,如果是不必要的字段,完全可以不用该字段进行set,可以自己另外设置一个字段例如this._data去更新值

其他工具

TroubleShooting

  • 无法在开发工具上修改appid,或者修改时出现修改失败: undefined: 直接将当前项目删除,然后新建一个项目,在新建的时候就指定appid即可

  • 新功能无法使用,例如map中的enable-zoom等,首先看文档里面有没有直接写明开发者工具上可否使用,然后可以在在真机上面调试试试。

  • cover-view里面不能放自定义text标签导致不能自定义样式: 社区给出的意见是[https://developers.weixin.qq.com/community/develop/doc/000a402c99849820f2470d50551000],给`cover-view`设置样式

  • 获取输入框的value值: 通常我们不会用系统的表单,那么可以通过这种方式像普通的html页面那样获取dom元素的值:

    1
    2
    3
    4
    5
    6
    <input type="text" value="{{name}}" bindinput="tapInput">

    // 然后在js中直接监听输入事件即可
    tapInput: function(e) {
    console.log(e.detail.value)
    }
  • 元素水平垂直居中对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .parent {
    text-align:center;
    align-items:center;
    justify-content: center;
    margin: auto;

    display: flex;
    align-items: center;
    }
  • warning: Now you can provide attr “wx:key” for a “wx:for” to improve performance.这是因为在使用循环block的时候没有给循环的item设置一个唯一的id,可以这样做:

    1
    <block wx:for-items="{{list}}" wx:key="list.id">
扩展阅读
推荐UI扩展

weui-wxss

框架扩展

wepy: 腾讯官方的小程序组件化开发框架