关于vue移动端 ios 的兼容问题
1.关于cookie携带的问题
这方面可以查看微信公众平台的技术文档的微信网页开发的iOS WKWebview 网页开发适配指南中找到答案
文档中是这样描述的
1\跨域存取Cookie
问题说明:
在访问一个页面A时,如果页面A引用了另一个页面B的资源(页面A和B为不同的域名),这时页面B就被认为是第三方页面。若在页面B中设置Cookie,就会命中WKWebview下阻止第三方跨域设置Cookie的安全策略,导致问题出现。
适配建议:
在WKWebview中是默认阻止跨域的第三方设置Cookie。所有通过Cookie传递的信息,可通过业务后台存储需要传递的信息,然后给页面一个存储信息相对应的access_token加密码,再通过Url中加入自己业务的access_token进行页面间的信息传递。
2\微信原生层面的网络请求读取不到WKWebview中设置的cookie,即使域名是相同的。
问题说明:
如果页面的资源或图片存储的服务器依赖校验Cookie来返回数据的情况,在切换到WKWebview后,在微信内长按保存,或者点击预览大图时,原生层面发起的网络请求将不会完整地带上所设置的Cookie,会导致图片保存失败或预览失败。
适配建议:
建议静态资源cookie free。如果确实有信息需要传递,可通过业务后台存储需要传递的信息,然后给页面一个存储信息相对应的access_token加密码,再通过Url中加入自己业务的access_token进行页面间信息传递。
这两种情况都会产生cookie丢失的问题
ios10的报错SyntaxError: Cannot declare a let variable twice: ‘e’.
这个报错可以通过手机与苹果电脑的调试来看到具体方法如下:
1\在苹果手机的设置里找见safari里有一个web调试打开
2\链接苹果电脑打开safari可以在*上面一行看到开发打开开发选中你的手机打开网页,查看调试台可以看到
这个问题的出处来自于Safari本身,而且他们也承认
We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter // 当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。
解决方法:在webpack的配置文件里配置,如下:
-
uglifyOptions: {
-
compress: {
-
warnings: false
-
},
-
mangle: {
-
safari10: true
-
}
-
},
-
sourceMap: config.build.productionSourceMap,
-
parallel: true
-
})
-
复制代码
3.ios9的系统不支持es6语法的问题,一般情况我们都会装babel来解决,但是也有突发情况
例如;在webpack-dev-server @2.9.1的版本当中会出现无法解析的es6语法
解决方法:
在webpack中对babel编译的路径做一个针对
-
rules: [
-
…(config.dev.useEslint ? [createLintingRule()] : []),
-
-
{
-
test: /\.js$/,
-
loader: ‘babel-loader’,
-
include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’)],
-
},
-
-
]
-
复制代码
以上三个就是我在开发微信公众号的ios的bug和解决方法