The pitfalls and solutions based on the failure of WeChat sharing on the IOS side

A recent official account is a spa application based on vue. It appears when connecting to WeChat sharing and WeChat voice: everything is normal on Android, but it always fails when calling on iOS. I flipped through the official documents and found no solution. Finally, in the test, I found that it was because of the problem of the URL passed in during initialization. The specific process is as follows:

The WeChat config interface configuration, the official document is as follows:

All pages that need to use JS-SDK must be injected with configuration information first, otherwise they will not be called (the same url needs to be called once. The web app of the SPA that changes the url can be called every time the url changes. Currently, the Android WeChat client does not support the new H5 feature of pushState, so using pushState to implement the web app will cause signature failure, and this problem will be fixed in Android 6.2).

The official clearly states that SPA is called every time the URL changes, so our initial code is as follows:

// Here, call vue-router every time it changes route((to, from, next) => {
 let url =``;
 let getConfig = async function(url) {
  // res is the config returned in the backend interface  const res = await get_config(url);
  (res);
  (res);
 };
})
 // This part is shared by WeChat var config = {
  title: 'title', // Share the title  desc: 'desc', // Share the description  link: 'link', // Share the link. The domain name or path of the link must be consistent with the official account JS security domain name corresponding to the current page.  imgUrl: `image',
  success: function() {
   (success)
  },
  cancel: function() {
    (failf)
  }
 };
 (() => {
  (config);
  (config);
 });

Everything is normal when the above code runs on Android.

However, when we tested, all functions such as sharing on the IOS side failed. Later, we carefully checked and found that it was an issue of initializing config.

We found that on the IOS side, we only need to initialize it once in the == website root directory ==, so we modified the code, as follows:

1. First judge the current environment

//Judge the IOS environment through userAgent let isIOS = function() {
  var isIphone = ('iPhone'）;
  var isIpad = ('iPad');
  return isIphone || isIpad;
 };

// If it is an IOS system, only config is initialized in the root path if (isIOS()) {
  if ( === '/') {
   getConfig(url);
   next();
  } else {
   next();
  }
 } else {
  getConfig(url);
  next();
 }

Finally our code is as follows:

((to, from, next) => {
 let url = `*****`;
 let getConfig = async function(url) {
  const res = await get_config(url);
  (res);
  (res);
 };
 let isIOS = function() {
  var isIphone = navigator
   .userAgent
   .includes('iPhone');
  var isIpad = navigator
   .userAgent
   .includes('iPad');
  return isIphone || isIpad;
 };
 var config = {
  title: '*****', // Share the title  desc: '******', // Share the description  link: '***************', // Share the link. The domain name or path of the link must be consistent with the official account JS security domain name corresponding to the current page.  imgUrl: `*****`,
  type: 'link',
  dataUrl: '',
  success: function() {},
  cancel: function() {}
 };
 (() => {
  (config);
  (config);
 });
 if (isIOS()) {
  if ( === '/') {
   getConfig(url);
   next();
  } else {
   next();
  }
 } else {
  getConfig(url);
  next();
 }
});

The "*" section is customized for developers

The most tricky thing is that the WeChat document does not mention the issue about IOS initialization (or I did not find it). Embarrass

After the above modification, the sharing functions of our official account on the IOS and Android side can run normally.

The above article on the failure of WeChat sharing on IOS is all the content I have shared with you. I hope it can give you a reference and I hope you can support me more.