【踩坑】uni.navigateTo 微信小程序 跳转无效问题

发表于 更新于 分类于

最近接手了一个项目，该项目在用户体验上极度不友好，如：每次请求就显示 loading ，自定义 tabbar 可点击区域太小，组件间切换白屏等等问题。本着 “要改革、就不要怕” 的原则，便大刀阔斧的对项目代码进行一系列优化。

结果改着改着就出现了问题：

  • 分包 packageB 的路径能点击
  • packageA、packageC 里的路径不能点击
  • 手机能点击、模拟器不能点击
  • 模拟器能点击，手机不能点击

图片

代码不报错，是最难解决的 bug ！！！

这让我一度怀疑是 小程序开发者工具问题、小程序基础库版本问题，nodejs 版本问题 、vue-cli 版本问题，
然后就 nvm 切换版本、开发者工具卸载删除、基础库版本修改一系列骚操作。。。

马后炮： 如果代码能跑起来，肯定是没有问题的，微信小程序开发者工具 navigateTo 、redirectTo 、switchTab 、reLaunch 这些基础的 API 无论是哪个基础库都能很好的支持。

大概率不用去想 nodejs 版本问题， 删除掉 node_modules 再重装挺浪费时间的。 所以很多时候都是代码中的问题。

比如我这个 bug 有些链接能跳转 有些不能跳转，就复制能跳转的 链接，全局检索。查找它们其中的差异

问题出现的地方：
程序初始化 拦截了 navigateTo、redirectTo、switchTab、reLaunch 这些操作，执行 checkVisitPage 方法，如果链接在白名单列表中且已登录就能跳转，否则唤起登录的弹窗。

”好巧不巧，我把登录弹窗组件删除掉了，因为它在每个页面都写了一遍“，所以点击没有反应。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// App.vue
<script>
import {
	addInterceptor,
	checkVisitPage
} from "./utils/index.js";

export default {
	globalData: {
		systemInfo: null
	},
	onLaunch: function () {
		this.initApp();
	},
	methods: {
		initApp() {
			addInterceptor.call(this);
			checkVisitPage.call(this);
		}
	}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// utils/index.js
const openPages = [
	'/pages/home/index',
	'/pages/webView/index',
	...
];


export function checkVisitPage(url) {
	if (!url) {
		return false;
	}
	if (url.indexOf("?") > -1) {
		url = url.split("?")[0];
	}
	if (!openPages.includes(url)) {
		try {
			const userInfo = uni.getStorageSync('userInfo');
			if (!userInfo.accessToken || userInfo?.userType == 7) {
				this.$store.commit('common/setPurviewWarningMethod', true)
				return false;
			} else {
				this.$store.commit('common/setPurviewWarningMethod', false)
			}
		} catch (e) {
		}
	}
}

export function addInterceptor() {
	uni.addInterceptor('navigateTo', {
		invoke: (e) => checkVisitPage.call(this, e.url),
	})
	uni.addInterceptor('redirectTo', {
		invoke: (e) => checkVisitPage.call(this, e.url),
	})
	uni.addInterceptor('switchTab', {
		invoke: (e) => checkVisitPage.call(this, e.url),
	})
	uni.addInterceptor('reLaunch', {
		invoke: (e) => checkVisitPage.call(this, e.url),
	})
}

其它：如果无法跳转，请检查 是否 / 斜杆开头

1
2
3
uni.navigateTo({
	url: '/pages/index/index'
});

因为这两天给环境整崩溃了，某些老项目没有 yarn.lock 或 package-lock 文件 ，代码 dev 能启动起来，但是 build 失败！，怀疑是 nodejs 版本问题，typescript 版本不兼容问题等等，最后向原来的开发人员，重新套了个壳， 才知道 package.json 少了 esbuild-loader 依赖！ 为啥源码里 package.json 没有 esbuild-loader …

但是错误提示可不友好，让你根本搜索不到错误发生的原因

1
2
3
4
5
6
[tsl] ERROR in \node_modules\@types\node\util.d.ts(1656,1)
      TS1128: Declaration or statement expected.
ERROR in \node_modules\@types\node\util.d.ts

[tsl] ERROR in \node_modules\@types\node\util.d.ts(1654,26)
      TS1005: ';' expected.

解决思路

  1. 能自己解决的尽量不麻烦别人，遇到问题首先 谷歌，GPT 查询（此操作最好不要超过 1小时）
  2. 仔细阅读源码，全局检索 查找它们其中的差异
  3. 善于交流、勇于交流。（在不得已要麻烦别人的时候，也不要害怕。 出门靠朋友~ 态度好点虚心求教，很多人愿意帮你的）
  4. 站起来喝杯咖啡吧！有时候把事情缓一缓。解决问题的思绪就来了