IOS下 用vue开发前端项目 点击返回 页面出现空白

原地址

10年积累的成都网站设计、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有通道免费网站建设让你可以放心的选择与我们合作。

问题描述：

进入A页面——B页面——ios自带的返回——白屏出现——手动点击白屏处——问题解决

原因分析: 

在ios机器上使用webview开发Vue项目时候，go history(-1)， 无法将body的高度拉掉，使得遮住，触发轻点击，方可消除遮罩

解决方案实现原理：

html，body都是100%，#app撑起了父元素的告诉，但是浏览器默认的滚动scroll并不是#app，而是body,某些因素，造成返回history 后，无法复原（ios 的锅），为此，我们将#app 进行了绝对定位，并让它重新成为 scroll 的对象，从而解决问题

前端vue开发 iOS手机切屏之后回到原app页面动画不执行了

两个动画效果肯定是要停掉一个的。

禁止掉原生侧滑有点不现实，那就想办法改变我们自己的。

定义变量isIosMoveBack判断过度动画取消的时机（在IOS系统机型下滑动时），这里直接在vuex里面定义个变量，方便后面组件内部的返回按钮重置变量。

vue项目 iOS调用JS方法报错找不到方法

项目中需要与H5进行交互，但是在 iOS调用 js方法时出现问题。一直报错找不到js方法。

一开始以为是移动端中注入的方法 和 js方法名不对。经排查，是一致的。

然后排查 注入方法（通过 - (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler; 注入）也没有任何问题。

后来发现前端是使用的vue框架，而直接将js方法写在 methods 中，这样造成这个交互js方法是局部的，无法被ios端找到。

解决办法：将iOS需要调用的js方法在 created 和 mounted 方法中暴露在window下，变成全局方法。

window.printText = this.printText()

如果到这里还不行或者有崩溃，请在 window.onload 方法下进行声明

ios和vue哪个更有前途?

ios和vueios更有前途。根据查询相关资料信息显示

1、薪资的区别：ios工资更高，ue前端工程师工资低于ios开发工程师工资。vue前端工程师平均工资13000每月，2022年工资不及2021年，较2021年下降了百分之5。ios开发工程师工资￥23000每月，2022年工资高于2021年，较2021年增长了百分之4。

2、招聘的职位量：vue前端工程师2021年招聘职位278个，比2020年增长了百分之60。ios开发工程师2021年招聘职位15000K个，比2020年增长了百分之2。曲线越向上代表市场需求量越大，就业情况相对较好。

Vue项目在部分ios手机Safari浏览器上打开为白屏

Vue项目在部分ios手机Safari浏览器上打开为白屏有可能是一下原因造成：

第一：部分es6语法不兼容     推荐在全局引入 babel-polyfill 解决es6在Safari的兼容问题

第二：有部分Safari浏览器设置了不允许网站读写所有cookie，不允许网站跟踪，这种情况下在项目中使用                localStorage sessionStorage  cookie都会报错（大部分是这个原因）

        查看Safari隐私和安全性：设置- Safari

第三：在Safari如何跟踪调试

   1、打开手机端web检查器，设置- Safari -高级（最底部）- Web检查器打开

2、确保iOS系统手机接入 MAC 电脑（必须是Mac，window调试不了ios系统）

3、找到Mac电脑的 Safari浏览器，找到开发者，就会显示的手机的设备

4、此时此刻就可以使用了，调试各个App上网页版的页面了。

注：如果是 Hybrid 嵌入式开发，线上版本，可能就不能调试了，因为IOS App 会把线上的调试功能               给禁用，安全！

本文名称：Vue开发iOS,vue开发的网站
分享URL：http://myzitong.com/article/dsioejp.html