uni-app小程序(快手、抖音)getCurrentPages使用坑位记录2

前情

uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验也挺棒的，现公司项目就是主推uni-app，我主要负责抖音和快手端小程序。

坑位

公司历史原因项目有APP端小程序端，但并不使用uni-app的一端发布所有平台，各端都有它的开发负责人，只有我负责的快手和抖音是基于一套代码发布多端的，因有需求是APP先行的，而基于uni-app的代码利用率还算是高的，于是这一次需求并不是重新从0到1开始开发，而是直接基于App的代码来做调整适配快手抖音端，去除掉一些App特有代码和在解决了一些样式兼容问题后，发现在快手小程序端其中带过滤筛选功能的商品列表显示异常，怎么切换筛选条件都没有更新商品列表。

Why?

在App和抖音小程序端上功能都是正常的，控制台也没有报错，同时也发现接口也是有发起的，于是开始去细看代码，发现App开发者为了组件复用，在商品列表组件有一处逻辑会根据当前是什么路由就请求对应接口，代码如下：

const getCurrentRoute = (index = 1) => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - index]
	const currentRoute = currentPage.route;
	return currentRoute;
}

const getList = (params) =>{
	const curRoute = getCurrentRoute();
	if(curRoute === 'pages/home/index'){
		getHotList({...params})
	}else{
		getGoodsList({...params})
	}
}

当时看到这个代码我是比较反感的，为什么要根据路由去判断请求不同接口，直接外面传一个特定的key判断是哪一个页面不是更稳定，虽然代码看着不是很认同，但按理说这功能也不至于一端能用一端不能用，开始怀疑是不是快手端获取路由栈方法getCurrentPages有什么问题，为了定位错误，我通过日志打印查看路由获取是否正确，代码如下：

const getCurrentRoute = (index = 1) => {
	const pages = getCurrentPages()
	console.log('---- getCurrentRoute ----:',  curRoute);
	const currentPage = pages[pages.length - index]
	const currentRoute = currentPage.route;
	return currentRoute;
}

至此才发现问题所在，在抖音端打印的路由和快手端打印的路由有一小点区别，快手端会在开头多一反斜杠：

解决方案

方案1：比较取巧偷懒的方法就是从返回看pages/home/index是二个都有的，那只判断路由是否包含pages/home/index即可，示例代码如下：

const getList = (params) =>{
	const curRoute = getCurrentRoute();
	if(curRoute.includes('pages/home/index')){
		getHotList({...params})
	}else{
		getGoodsList({...params})
	}
}

方案2：重写不通过路由判断，通过从外面传key判断当前组件是用在哪一个页面，来请求不同的接口，个人觉得此种方式是最稳妥的，也是我推荐的。

思考

小于uni-app跨平台的项目，虽然uni-app已经处理了绝大部分的平台差异问题，但是或多或少会有一些是平台处理漏的，遇到这种一端可以另一端不行的问题，可以先考虑是不是使用了一些平台有差异的API，手动把差异抹平即可,对于实在官方都说明有差异的，那就用好uni-app的条件编译来处理吧。