记录：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不存在导致的问题，哎，这是要栽几次才记住啊，天呐，我这个脑子真像是凑数的，呜呜呜~~~

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

小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
android app内嵌h5页面,app内嵌h5页面：前端与原生语言的配合
判断操作系统: var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android' ...
app内嵌H5页面上传图片，调用app的方法和注册回调
html <span class="file-inp" @click.stop="changeImageA ...
云闪付APP内嵌H5监听左上角X关闭事件
最近在做云闪付蓝牙对接,遇到的一个问题. 需求用户进入云闪付APP内嵌 H5页面调用接口连上蓝牙后,可能不想支付使用,或其他原因,随手关闭左上角X关闭浏览器,这时需要监听这个动作,断开蓝牙连接,不然 ...
【Appium】测试时遇到手机内嵌H5页面的切换问题
前言:H5页面简单理解就是在手机内嵌套了一些网页格式的信息,可以让手机的应用看起来更丰富一些. 而当手机内嵌H5页面时,常规的app定位方法就没法使用了,我们需要先切换到H5页面才能进行下一步的定位, ...
H5 -- （功能）App内嵌h5网页实现芝麻认证的接入
1.需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app芝麻认证只有通过内嵌H5页面实现 2.分析:通过调研 "芝麻认证"官方技术文档 ,接入芝麻认证的流 ...
H5-- （功能）App内嵌h5网页实现芝麻认证的接入
1.需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app芝麻认证只有通过内嵌H5页面实现 2.分析:通过调研 "芝麻认证"官方技术文档 ,接入芝麻认证的流 ...

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

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

最新文章

热门文章