记录：app内嵌H5页面分享到微信后，在安卓手机打开白屏，苹果手机正常渲染的问题始末

**背景：**app内嵌的一个个人名片页面需要分享到微信，测试环境下，分享到微信后，安卓和苹果手机都能正常渲染，生产环境苹果手机没问题，安卓手机打开分享的链接，页面一直空白。

**原因分析：**单独加了vconsole调试工具，可以看到安卓环境存在几个报错error{},并没有报错原因说明，因为之前出现过这种问题，一般都是vue组件的html模板中存在语法错误，类似属性重复之类的eg:input中同时出现v-model和:value。但是这种情况一般在安卓低端机中才出现，现在的情况是在所有安卓手机上都打不开分享的链接。但是，几经查找页面代码，也没找到错误，因此只好尝试看是不是也可能是html出了问题。

页面结构如上图示，先把卡片部分注释发了一版生产，发现页面还是空白，然后又注释掉了剩余部分的还是没有效果，最后整个html内容全部注释，只保留几个文字，神奇的事情发生了，可以打开原来分享的链接了，能看到页面正常渲染出了保留的几个文字。单独注释html代码无效，整体注释有效，但是页面上需要渲染的数据都是从后台接口获取的，所以到底是哪里出了问题呢，这时逐个参数对照发现一个漏网之鱼，如下图示：



上面三张图分别是卡片使用fgsName的html部分，以及js中的data中定义的fgsName和在created()生命周期中对fgsName的重新赋值，因为这个页面是在app内和分享出去共用的一个页面，所以这么写貌似没啥问题。但是只有这个参数不是后端接口返的，所以问题只有可能在这个字段上面。
假设就是这个字段出了问题，那么只有一个可能–cookie不存在导致了语法错误。
因为cookie中存储的用户信息是原生开发人员存进去的，分享到微信，脱离了app，cookie自然就不存在了，那么在data方法中取cookie中的fgsName自然就更取不到了，既然如此，又为何ios可以正常渲染，安卓却不行呢。这时，突然就想起来main.js中关于从原生处获取cookie的方法貌似处理不同，于是赶紧找到main.js中相关的代码查看，如下图：

可以看到当判断设备是安卓手机时是通过cookie的get方法直接获取的userinfo这个对象，如果userinfo不存在,Vue中全局添加的cookie对象也就不存在，从一个不存在的对象里获取一个属性的值，肯定会存在语法错误，但是ios环境的时候至少Vue中全局添加的cookie对象是存在的，只不过这个对象的属性值都是null，undefined,或者""(具体是啥，就要看ios开发人员是如何处理的了)，所以，ios不存在语法错误，页面可以正常渲染。

**解决方法：**好的，几乎可以确定就是这个地方的问题了，假设真的是这个问题，那么解决也很容易，只需要在安卓的判断里再加一个cookie是否存在的判断即可

Vue.prototype.$cookie = this.$cookies.get('userinfo');
if (!Vue.prototype.$cookie) {
	Vue.prototype.$cookie = {}
}

经发布生产验证，以上问题定位准确及解决办法可行。

为什么确认自己写的代码没问题，第一次却没有想到可能是mian.js的问题呢，因为其实，以前出现过类似问题，当时是因为和第三方协作获取token的问题，针对安卓统一加上了这个处理，后续生产上也采用了这个方法统一处理，测试环境是没问题的，只是没想到生产上的main.js没有添上或者被谁中间提交过的没有添加判断的代码覆盖了。

中间其实走了好多弯路，写起来太繁琐了，只大概写了下后续的分析历程，哎，心累，希望能帮到小伙伴，也记录下这个过程提醒自己。

写完之后才发现，自己上一篇博客好像也是因为$cookie不存在导致的问题，哎，这是要栽几次才记住啊，天呐，我这个脑子真像是凑数的，呜呜呜~~~