微信小程序的大部分api是 异步 的。 简单地举个:chestnut:: wx.showToast(Object object)
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000,
success: function(res) { // TODO },
fail: function(err) { // TODO }
});
复制代码
事实上这样的api 写的真够好,但是对于使用者来说并不友好。所以,为了方便同事们更加舒爽地去写代码,于是我开始琢磨封装一个小程序api的 promisefy 的函数。 那么到底怎么封装呢? // defaultProps为默认属性,extraProps为定制化的属性
/** * promisefy 微信内置函数 * @param fn * @return { promise } */
const promisefy = fn => defaultProps => extraProps => new Promise((resolve, reject) => fn({
...defaultProps,
...extraProps,
success: res => resolve(res),
reject: err => reject(err),
}));
复制代码
那么到底怎么使用呢? const showToast = promisefy(wx.showToast)({
title: '',
icon: "none",
duration: 2000,
confirmColor: '#ff673f',
mask: true
});
showToast({ title: 'title' }); // 即可使用
复制代码
那么这个promisefy还能怎么用呢? 1.我们可能会经常使用storage相关的api, 那么到底是把对象JSON.stringify, 再setStorage。需要使用的时候再getStorage, 最后JSON.parse呢?当然这是一种解决方案。如果使用promisefy,可以这样干。 /** * * @param 需要往LocalStorage里面存数据 * @returns {Promise<any[] | never>} */
const setStorage = (param = {}) => {
if (!Object.keys(param).length) throw new Error('输入的对象不为空');
return Promise.all(Object.entries(param)
.map(item => promisefy(wx.setStorage)({
key: item[0],
data: item[1]
})()));
};
setStorage({ a:1, b:2 });
复制代码
/** * * @param 需要从storage 读取的key。 * 单个值直接传string, 多个值传数组 * eg. ['key1', 'key2', 'key3'] 或者 'key1' ; * @returns {key1: value1, key2: value2, key3: key3 } */
const getStorage = param => Promise.all(
Object.entries(((typeof param) === 'string') ? [param] : param)
.map(item => promisefy(wx.getStorage)({ key: item[1] })()
.then(res => ({ [`${item[1]}`]: res.data }))))
.then(res => res.reduce((prev, curr) => ({ ...prev, ...curr }), {}));
getStorage('a'); // { a: 1 },
getStorage(['a', 'b']); // { a: 1, b: 2 },
复制代码
/** * @param 需要从storage 清除记录eg. [key1, key2], key3。 */
const removeStorage = param => Promise.all(
Object.entries(((typeof param) === 'string') ? [param] : param)
.map(item => promisefy(wx.removeStorage)({ key: item[1] })()));
removeStorage('a');
removeStorage(['a', 'b']);
复制代码
2.对于有router 的页面我们经常会出现router 的三种跳转方案。例如微信就提供了三种api:navigateTo, redirectTo ,navigateBack,这里没有包含小程序跳小程序的api。那么我们是不是可以封装一个公共的方法呢? // 路径参数的拼接
const obj2Url = params => {
if (params instanceof Array || typeof params === 'number') throw new Error('跳转参数限制于string和对象');
// 如果路径参数为 object, 做以下转换
if (typeof params === 'object') {
const rawParams = Object.entries(params).reduce((acc, cur) => {
if ((!cur[1]) && ((typeof cur[1]) !== 'boolean')) console.warn(`${cur[0]}的值为空, 请检查原因!`);
return `${acc + cur[0]}=${cur[1]}&`;
}, '');
params = rawParams.substr(0, rawParams.length - 1);
}
return params;
};
/** * * @param page 需要跳转的页面或者页面路径(如果是"pages/a/b/b"这样的路径,page='pages/a/b/b', specialUrl=true ) * @param type * @param params * @param specialUrl * @return {*} */
const jumpTo = (page = 'index', type = 'navigate', params = '', specialUrl = false) => {
const { navigateTo, redirectTo, navigateBack } = wx;
const types = {
navigate: url => promisefy(navigateTo)({ url })(),
redirect: url => promisefy(redirectTo)({ url })(),
back: delta => promisefy(navigateBack)({ delta })(),
};
params = obj2Url(params);
console.log('**test**', 'params', params, `${page}?${params}`);
if (specialUrl) return types[type](params ? `${page}?${params}` : page);
// 获取跳转参数,如果为数字,则为navigateBack,反之为 navigateTo 或 navigateBack。
const jumpPram = (typeof page === 'number') ? page : `/pages/${page}/${page}${params ? `?${params}` : ''}`;
console.log(`%c**跳转参数**jumpPram** ${jumpPram}`, 'color:white;background:green');
sendTrack(`**跳转参数**jumpParam** ${jumpPram}`);
return types[type](jumpPram);
};
jumpTo('a'); // navigateTo到a页面
jumpTo('a', 'navigate', { m: 'm' }); // navigateTo到a页面 ,路径参数为?m=m
jumpTo('a', 'redirect', { m: 'm' }); // redirectTo到a页面 ,路径参数为?m=m
jumpTo(1, 'redirect', { m: 'm' }); // back 上一步 ,路径参数为?m=m
复制代码
项目实践1.native 小程序开发者。(下载babel-polyfill,导入regeneratorRuntime) import regeneratorRuntime from '你放置的文件夹';
const showLoading = promisefy(wx.showLoading)({ title: '加载中', mask: true });
const hideLoading = () => wx.hideLoading();
const showMoshowToast = promisefy(wx.showToast)({ title: 'title', content: '', mask: true });
const Loading = { show: showLoading, hide: hideLoading };
const Toast = { show: showToast };
const handleErr = (e, cb) => {
Loading.hide();
if ((typeof e) === 'string') {
Toast.show({ title: e || '服务器异常,请稍后再试' });
} else {
const { message } = e;
Toast.show({ title: message || '服务器异常,请稍后再试' });
}
cb && cb();
};
const fetchData = () => {}
aync function() {
try {
await Loading.show();
const { data } = await fetchData();
this.setData({
data
})
Loading.hide();
} catch (e) {
handleErr(e)
}
}
复制代码
2.webpack和taro 用户直接引入用配置bable 相关npm即可,可参考 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码