工作-uniapp加载服务端返回的index.html以及token携带问题

背景

最近在用uniapp重构我们的项目，因为原本的app中内嵌了非常多的H5页面，更严谨的说是app内嵌着weex页面，weex嵌套着H5页面，复杂程度可想而知。uniapp这个一套代码，多端使用的优点真的是非常打动人，再也不需要搬来搬去，这感觉别说有多爽，但是随着不断开发，也会遇到一些各种各样的问题。项目中H5页面都是通过后端接口返回的（因为还没有彻底分离导致），在uniapp中直接把webview的url赋值上接口以及对应的目录就会有一个问题，接口会返回token错误❌。。

解决

通过不断搜索查询可供参考的文档，总算有了一点思路：

• 获取当前webview实例
• 给当前webview注入JS

// 访问的url
const requestUrl = `${H5Url}/vip/m/getPage#`;
// 获取当前webview实例
const currentWebview = this.$mp.page.$getAppWebview();
// 有的时候可能会存在webview还没有加载出来，所以使用setTimeOut处理下
setTimeout(() => {
	// 获取当前子webview
	this.wv = currentWebview.children()[0];
	// 注入JS
	this.wv.evalJS(`document.cookie ="token=${getApp().globalData.token};domain=.test.cn;path=/"`);
}, 1000)

TIPS

这里前端设置cookie我还是第一次遇到，通过这个我还了解到document.cookie ="token=${getApp().globalData.token};domain=.test.cn;path=/"如果不加上path=/的话，会使用默认的path。如果需要cookie在整个网站下可用，将指定为根目录，加上path=/即可。

总结

uniapp第一次接触，遇到了很多比较基础的问题以及以前也没有接触的问题，学到了很多呀呀呀～～