关于vue移动端 ios 的兼容问题

最近在做微信公众号web页面遇到了以下的问题,关于ios，准确的说是safari浏览器的问题

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丢失的问题

2.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的配置文件里配置，如下：

new UglifyJsPlugin({ 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

关于vue移动端 ios 的兼容问题

猜你喜欢