一、配置相关
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 的索引:
onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) } }
|
(4) 自定义 tabBar 组件调用 switchtab 切换 tab
switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({ url }) this.selected = data.index }
|
三、网络请求
写惯了 axios, 小程序的网络请求模块用着总是不是那么顺手,来封装一层吧,我们可以通过调用 get,post 去获取数据,并且可以在这一层做一些预处理的事情,比如设置必须的参数,参数加密等
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、函数传参
函数传参传对象的时候,是个拷贝值,跟原始的对象不一致,所以在修改某个参数的状态时,最好用原始值修改,示例:
<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>
|
quot(item, i) { console.log(item === this.courseList[i]) item.isQuot = !item.isQuot if (this.courseList[i]) { this.courseList[i].isQuot = !this.courseList[i].isQuot } }
|
2、日期转时间戳的正确姿势
小程序的日期转时间戳不支持 2020-10-12 这种格式,需要转为成 2020/10/12 这样才能正常的解析,所以在日期转时间戳的时候得这么写:
const str = '2020-10-12' const newDateStr = str.replace(/\-/g, '/') const date = new Date(newDateStr)
|
3、属性值和文本
(1) 属性不支持三元表达式
(2) 文本数据支持三元表达式但是不支持函数,可以通过 wxs 扩展
有一个 button,控制台也没看到有 border 设置,但就是一直存在,设置了 border:none 也没用,查了下资料发现,这是小程序自己在 button::after 里面加了个 border 设置,去掉即可
本文标题:微信小程序小技巧
文章作者:Canace
发布时间:2020-11-06
最后更新:2025-09-14
原始链接:https://canace.site/wechat-mini-program-pitfalls/
版权声明:转载请注明出处