一、配置相关

1、 暂时还没有转发到朋友圈的 api,可以通过 canvas 绘制图片 保存到用户相册,用户通过小程序码自行分享到朋友圈的方式实现,git 上有一个比较成熟的组件;

2、 微信开发工具有时会抽风,处理方式是清除缓存 => 重启;

3、 在 request 之前,确保服务器域名配置跟 request 的域名一致,不然会报 403 错误;

4、调用 getUserInfo 若是发现数据不对,调用 getSetting 看看用户有没授权

二、组件相关

1、自定义 tabBar

(1) 在项目根目录新建 custom-tab-bar 组件,这里我放到 components 目录下一直无效,折腾了一会发现必须要放在根目录下。

(2) tabBar 配置项,开启 cunstom: true

(3) 对应的 page 在 onShow 阶段调用 getTabBar 方法,selected 为当前 tab 的索引:

1
2
3
4
5
6
7
8
onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}

(4) 自定义 tabBar 组件调用 switchtab 切换 tab

1
2
3
4
5
6
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({ url })
this.selected = data.index
}

三、网络请求

写惯了 axios, 小程序的网络请求模块用着总是不是那么顺手,来封装一层吧,我们可以通过调用 get,post 去获取数据,并且可以在这一层做一些预处理的事情,比如设置必须的参数,参数加密等

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
export default {
get (config) {
this.pre(config)
config.method = 'get'
wx.request(config)
},
postJson (config) {
this.pre(config)
config.method = 'post'
config.header['content-type'] = 'application/json'
wx.request(config)
},
post (config) {
this.pre(config)
config.method = 'post'
config.header['content-type'] = 'application/x-www-form-urlencoded'
wx.request(config)
},
pre (config) {
config.header = config.header || {}

let success = function () { }
if (config.success) {
success = config.success
}
let fail = function () { }
if (config.fail) {
fail = config.fail
}
config.success = function (resp) {
success(resp.data)
}
config.fail = function () {
wx.showToast({
title: '系统错误',
icon: 'none'
})
fail()
}
}
}

这样,用起来就很方便了

四、其他奇怪的问题

1、函数传参

函数传参传对象的时候,是个拷贝值,跟原始的对象不一致,所以在修改某个参数的状态时,最好用原始值修改,示例:

1
2
3
4
5
6
7
8
9
<div
v-for="(item, i) in items"
:key="i">
<rb-button
:type="item.isQuot ? 'error' : 'primary'"
:styles="quotStyle"
@tap="quot(item,index)"
>{{ item.isQuot ? '移除' : '引用' }}</rb-button>
</div>
1
2
3
4
5
6
7
quot(item, i) {
console.log(item === this.courseList[i]) // false
item.isQuot = !item.isQuot //无效
if (this.courseList[i]) {
this.courseList[i].isQuot = !this.courseList[i].isQuot // 有效
}
}

2、日期转时间戳的正确姿势

小程序的日期转时间戳不支持 2020-10-12 这种格式,需要转为成 2020/10/12 这样才能正常的解析,所以在日期转时间戳的时候得这么写:

1
2
3
const str = '2020-10-12'
const newDateStr = str.replace(/\-/g, '/')
const date = new Date(newDateStr)

3、属性值和文本

(1) 属性不支持三元表达式

(2) 文本数据支持三元表达式但是不支持函数,可以通过 wxs 扩展