背景
- 我司最近打算开发一款微信小程序，让我来负责带队，那我肯定当仁不让，立即就去了一下项目需求，经过一番了解之后，大致的需求是这些：
- 原有的小程序改版，（原有小程序功能单一，本次改版较大，基本上等于重做）
- 原有小程序是使用原生开发的，很久的项目了，代码一团糟
- 时间紧，任务重，月底要上线......
- 了解完上面的需求之后，我就和领导提议了，使用第三方框架开发吧，领导让我做个调研然后搞个ppt和大家分享一下，于是我就罗列了市面上比较有代表性的两个第三方框架和大家分享，分别是以
Vue语法的uni-app和以React语法的Taro
结合团队技术栈最终我选项了uni-app和大家分享了，经过大家的讨论结合实际情况还有领导的决定，最终让使用原生开发， 让原生开发，那咱也得使用工程化的能力啊，于是就看看小程序官网封装了一下模板框架，尽量减少小程序的学习成本，保证开发效率。
请求封装
习惯了web开发，总是想模块化，于是就把请求单独抽离出来封装，还可以做一些简单的拦截等。
//promise封装一层，使得调用的时候直接用then和catch接收
const request = (opt = {}) => {
//设置请求头,合并后返回一个新对象
const editHeaders = Object.assign(
{},
{
"content-type": "application/json",
},
opt.headers || {}
);
const isLoad = opt.isLoad !== undefined ? opt.isLoad : true;
isLoad && util.showLoad("加载中");
return new Promise((resolve, reject) => {
wx.request({
url: `${baseUrl}${opt.url}`,
data: opt.data || {},
header: editHeaders,
method: opt.method,
success(res) {
if (res.statusCode === 200) {
isLoad && util.hideLoad();
resolve(res.data);
} else {
msg("sorry，网络开小差了");
}
},
fail(err) {
msg("sorry，网络开小差了");
reject(err);
},
});
});
};
export default request;
路由重写
小程序经常使用的路由就那5个，每次都要写
wx.navigateTo.....很长的路由，再有如果需要做一些路由拦截就不能统一管理， 所以就把路由重写一遍，方便后续管理
/**
* 页面传参问题：
* 1、参数简单：直接拼接在url后面，例如: '/page/index/index?id=1234'
* 2、参数包含对象：需要把要传的数据转成json字符串（JSON.stringify），然后在下个页面把它转回json数据（JSON.parse）
* 3、假如json字符串中包含了类似?、&之类的符号，可能导致我们参数解析出错，所以我们要把json字符串encode一下：
* -、例如：encodeURIComponent(JSON.stringify(data))，JSON.parse(decodeURIComponent(options.encodedData))
*/
//tabbar页面
const whiteList = ["/pages/index/index", "/pages/logs/logs"];
/**
* 保留当前页面，跳转到应用内的某个页面
* 使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层(后续项目复杂需要处理这种情况)
* @param {*} path '/pages/index/index'
*/
const push = path => {
if (whiteList.indexOf(path) !== -1) {
wx.switchTab({
url: path, // 注意tab页面是不支持传参的
});
} else {
wx.navigateTo({
url: path,
});
}
};
/**
* 关闭当前页面，返回上一页面或多级页面。
* 可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
* @param {*} number
*/
const pop = number => {
wx.navigateBack({
delta: number,
});
};
/**
* 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
* @param {*} path
*/
const replace = path => {
wx.redirectTo({
url: path,
});
};
/**
* 关闭所有页面，打开到应用内的某个页面，
* 谨慎使用：相当于重载小程序
* @param {*} path
*/
const relaunch = path => {
wx.reLaunch({
url: path,
});
};
export default {
push,
pop,
replace,
relaunch,
};
全局状态
小程序没有像vue和react这种框架都有成熟的状态管理插件，看着真的很别扭，于是就把状态按模块抽离处理了。
全局挂载
把一些常用的方法和工具函数挂载在wx实例化对象上面
