Recently, I encountered the following problems on the web page of wechat public account, about ios, or safari browser to be exact

1. Questions about cookie carrying

This aspect can be viewed in the wechat public platform technical documentation oF wechat web development iOS WKWebview web development adaptation guide to find the answer is described in this document

1\ Cross-domain access Cookie Problem Description: when accessing A page A, if page A references the resources of another page B (page A and page B are different domain names), then page B is considered as A third party page. If a Cookie is set on page B, it will match the security policy in WKWebview that prevents third parties from setting cookies across domains, causing problems. Recommendations: WKWebview is the default to prevent cross-domain third-party Settings Cookie. All the information transmitted through cookies can be stored in the service background, and then a corresponding access_token and password are added to the page, and the access_token of the service is added to the Url for information transfer between pages.

2\ The network request of the wechat native layer cannot read the cookie set in WKWebview, even if the domain name is the same. Problem description: If the resources of the page or the image storage server rely on the verification Cookie to return data, after switching to WKWebview, long press to save in wechat or click preview, the network request initiated by the native level will not be complete with the Cookie set on the page, resulting in the failure of image saving or preview. Adaptation Suggestion: Static resource cookie free is recommended. If information needs to be transmitted, you can store the information in the service background, add a corresponding Access_token and password to the page, and then add the access_token of your own service to the Url to transfer information between pages.

Ios10 SyntaxError: Cannot declare a let variable twice: ‘e’

1\ Find a Web debug in Safari in the Settings of iPhone 2\ Link to MAC Open Safari and you can see development in the top line open Development select your phone open the web and go to the debug console

We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter // When you define a for loop iterating over a variable with the same name as an argument, we mistakenly think it’s a syntax error. Solution: Configure it in the webPack configuration file as follows:

  uglifyOptions: {
    compress: {
      warnings: false
    },
    mangle: {
      safari10: true
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
})
Copy the code

3. The ios9 system does not support ES6 grammar. In general, we will install Babel to solve the problem, but there are emergencies

For example; In webpack-dev-server @2.9.1, there is an unresolvable es6 syntax workaround: make an exception to the Babel compilation path in webpack

rules: [
  ...(config.dev.useEslint ? [createLintingRule()] : []),
 
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
  },

]
Copy the code

The above three are the bugs and solutions of ios in the development of wechat official account