😺总结了一些小程序开发经验,包括一些工具、组件、技巧等,具体如下图所示👇
总结了一些开发微信小程序过程中遇到问题的解决方式/经验分享,另外共享几个通用组件
为什么需要cache工具?
永久性存储?
(除用户主动删除或超一定时间被自动清理)import $cache, * as caches from 'path/to/./libs/cache.js'
// localstorage
$cache.set('key', 1)
$cache.get('key') // 1
// localstorage expire
$cache.set('key', 1, 10000)
$cache.get('key') // 1, 10s内访问有效
// localstorage 延续上次缓存时间,若上次没缓存,此次设置也将取消
$cache.set('key', 1, true)
$cache.get('key') // 1
// sessionstorage
$cache.session.set('key', 1)
$cache.session.get('key') // 1
// remove
$cache.remove('key')
$cache.session.remove('key')
路由页面间的相互通信(限已存在路由历史记录中的路由) : App 已注入 pages: new PageModal()
// page A
Page({
data: {
log: 'ori log content'
},
//..
changeLog () {
this.setData({ log: 'log changed.' })
},
onLoad() {
// 页面栈, 建议:仅需要通信的页面加入栈中
getApp().pages.add(this)
},
onUnload() {
// 页面卸载关闭
getApp().pages.delete(this)
}
})
// page B
Page({
//...
doSomething() {
// ..
// 调起 page A / changeLog
getApp().pages.get('path/to/A').changeLog()
},
})
Page 装饰器实例,可扩展为mixin (组件已提供behaviors,不必要时不用mixin) : App 已引用 import 'libs/pageDecorator.js'
// Page 装饰器实例 pageDecorator.js
const oriPage = Page
export default Page = (data) => {
// PV统计
const onLoad = data.onLoad;
data.onLoad = function(...args) {
RecordPV.call(this)
// do something before oriPage onLoad
// ..
return onLoad && onLoad.call(this, ...args)
}
oriPage(data)
}
// Record PV
function RecordPV() {
console.log('view the page : ', this.route)
// sync serve..
// fetch(apis.pv, data: { page: this.route })
}
封装请求,api模块化
; tip: 目的只是为了简化wx.request,统一作部分rule code拦截,以及error处理;
因业务场景不同,已取消 promise风格化、重试机制、auth请求加锁、请求取消等
// req
import fetch, { apis } from 'path/to/./core/fetch.js'
Page({
req () {
fetch({
...apis.order.getOrderList,
data: {
page: 1,
page_size: 10
},
succ: (res) => {
console.log(res)
},
fail: (err) => {
console.log(err)
},
done: () => {
console.log('done')
}
})
}
})
Event | Description |
---|---|
typeOf() |
类型 |
throttle() |
节流 |
formatDate() |
格式化日期 |
numberCal |
浮点计算 |
pick() |
复制部分属性 |
提供简易倒计时功能
Props | Type | Description |
---|---|---|
time |
Number |
时间(秒) |
format |
String |
格式化显示, 默认:dd天hh时mm分ss秒 |
timeStyle |
String |
时间style样式;默认: '' (::font/color 等可继承父级,一般不用配置) |
symbolStyle |
String |
时间symbol样式:默认:'' (::font/color 等可继承父级,一般不用配置) |
sign |
String |
同时使用多个 countdown 组件时,需要 sign 标注唯一,通知时会回传sign |
Event | Description |
---|---|
running() |
倒计时进行中, 返回:{ sign, time }// time: 实时计时(s) |
end() |
倒计时结束后执行,返回:{ sign } |
提供弹窗形式cascader
Props | Type | Description |
---|---|---|
display |
Boolean |
显示/隐藏 |
options |
Object |
源数据 |
props |
Object |
可配置 级联 属性名, 默认:{ label: 'label', value: 'value', children: 'children' } |
_default |
Array |
可设置默认选择项; 默认 [] |
Event | Description |
---|---|
close() |
选择器关闭触发 |
* close
* @return
* {
* type: 'cancel', // cancel: 取消选择/点击遮罩层; submit: 确认
* valueIns: [], // 返回已选择的下标;(深度层级)
* valueArr: [], // 返回已选择的下标对应 option 内容
* }
组件为自定义navigationBar实例,暂无复杂配置,通常也不建议在navigationBar做过多业务/UI;
提供了三种模式参考,自定义单点
模拟微信后退
模拟微信菜单
可依据自身业务自行定义。
提示:目前(19/5/13前)获取菜单位置api 开发工具与真机结果有差别,注意调试;
自定义单点
模拟微信后退
模拟微信菜单
Props | Description |
---|---|
background |
背景色 |
bar跟随滚动淡出实例.
提前检查授权状态,(已)授权后将完成原有操作
Props | Type | Description |
---|---|---|
display |
Boolean |
显示/隐藏,提供该属性仅用与WxAuth控制显隐组件 |
scope |
String |
微信scope权限值, 如:scope.userLocation |
Event | Description |
---|---|
success() |
授权成功: { scope, [result: { detail, [code] }] } |
detail: userinfo / userPhone 时会返回detail信息 code: login code(session 过期才会重新获取)
// Mng
const recorderMng = wx.getRecorderManager()
// 录音
record() {
// 检查授权
this.wxa.checkScope({
scope: 'scope.record',
done() {
console.log('finish record auth,');
// 现在可以用 recorderMng api 咯
// recorderMng.start({
// duration: 60000,
// format: 'mp3'
// })
}
})
}
配置生成海报
Block
Image
Text
三种模式, 以及Color
纯色、渐变等模式配置Props
Props | Type | Description |
---|---|---|
config | Object |
Config配置, 详细见下表 |
autoMake | Boolean |
自动生成 ? 点击slot生成 |
Config
Config | Type | Description |
---|---|---|
width | Number |
画布宽度 |
height | Number |
画布高度 |
bgColor | String Object |
画布背景色 Color |
block | Array |
占位配置 [...Block] |
image | Array |
图片配置 [...Image] |
text | Array |
文字配置 [...Text] |
Module
Module | Type | Description |
---|---|---|
Block | Object |
占位配置(文档) |
Image | Object |
图片配置(文档) |
Text | Object |
文字配置(文档) |
Color | String Object |
颜色模式,纯色、渐变等 |
点击生成海报实例.