基于Vue公众号开发中的哪些坑 （严重鄙视ios,遇到的坑基本都是在ios中）

Posted 2021-03-19 smallswallows

一、ios白屏问题
ios端基于vue开发的H5无法正常显示，白屏问题
1、代码问题
确定方法：在ie/edge浏览器中打开，看是否正常显示，如果仍然白屏，可以确定问题
解决方法：1、代码中是否使用es6，如果使用，确定使用es6转es5，（npm install babel-polyfill
npm install es6-promise）
2、参考 https://www.cnblogs.com/love314159/articles/9355785.html
3、以上方法都不行的话，查看源码是在main,js中按需引入了相关的UI组件（本人引入 iview组件 DatePicker，Select 在edge，ios编译报错，进而导致不显示）

 

二、公众号开发分享缩略图，描述不显示，显示为分享地址
1、是否为本地测试公众号开发要求 配置js安全接口，因此，本地测试无法查看具体效果
2、缩略图地址是否为在线地址，本地地址不显示
3、当前页面分享地址与当前页面地址是否一致
4、是否使用的最新版本的jssdk，建议旧接口分享同样配置一次

三、二次分享缩略图，描述不显示，显示为分享地址
进入分享页，选择分享，如果此时复制链接可以发现，地址中被拼接了字符串，安卓中拼接了一个字段，大部分ios中拼接了这个字段，但即使将当前拼接字段作为分享地址，仍然会出现以上问题。
直接暴力解决方法，判断当前地址是否携带有参数，有的话直接执行 document.location.replace(location.pathname); vue中router.replace()ios不生效 ，该方法页面将刷新一次

 

四、音乐自动播放问题
iso不能自动播放（部分可以，但是有一定的延时）
1、静音播放，用户手动取消静音
2、用户手动开启播放
3、添加全局监听事件（只生效一次），用户有任何操作，音乐自动播放
// document.addEventListener(‘touchstart‘,function(){
// _this.isMusicPlay = true;
// _this.$refs.audio.play();
// },{once: true})