vue-spa微信分享，在ios端，分享不成功的原因及解决办法

首先声明是vue的spa项目h5调用wxjssdk时发生的问题，

我们大多刚开始做微信分享时，就会按照微信官方文档上一步一步做，先从后端拿到微信初始化需要配置的数据，然后调用wx的config方法，wxconfig调用成功后，会一步执行

wx的ready方法，那么我们在自定义分享内容时，就是在ready方法后做的，当然也可以将配置自定义分享的内容写在ready方法外面。这些都是最基本的操作。

需要跟大家提个醒的是，要弄清楚config方法和ready方法的关系，只有正确配置config之后，wx会自动调用ready方法，注意这个是异步的，相当于ready是config的回调函数，只不过，这个ready是微信单独暴露出来的方法。

 

下面进入正题，我做分享时，在需要做分享的页面，都执行了以下步骤：

1、向后端获取微信需要配置信息（appid、签名什么的），要确保获取的信息正确，然后再配置config时，才不会配置失败。

2、config成功后，会调用ready方法，（可以将自定义分享的一些配置信息，当成一个回调函数传进这个方法内，一些异步的问题需要自己根据实际情况解决）

3、在ready方法执行好之后，将自定义分享的配置信息 让它执行

 

以上就是最基本的微信分享步骤，在安卓手机上没一点点问题，很正常，

但是到ios手机上，怎么都分享不出来，查了查百度，有一问网友和我遇到的问题分厂一样，看了看它的描述，和我的很类似。

在ios端，vue的spa项目，微信初始化只能在项目入口初始化一次，（只能在项目入口初始化微信！，且只能初始化一次！，ios端！）

那么，我现在需要将微信的初始化方法需要提到 项目的入口执行（因为只有在ios端有这个问题，所以我只针对了ios端做了调整，其它安卓还让它在页面内初始化微信），

接下来需要，整理一下思路，我在项目入口时，当时ios的微信环境时，让微信初始化一次，那么到页面内，ios端的微信环境就不需要初始化微信环境了（这个要注意），那么页面里面我们也需要做判断，如果是非ios的微信环境，就让微信直接初始化，按正常步骤执行就行。

 

说了这么多，vue页面的入口到底在哪？这里用到了路由守卫  from.path=='/'是，就认为他是项目入口

看实际代码：

router.beforeEach((to, from, next) => {
  if (tools.isIOS()) {//针对ios端 微信初始化
    if (from.path === '/') {//项目入口
      if(wxSharecfgList.includes(to.name)){//需要使用分享的页面
        let huiyiId=to.query.huiyiId;
        if(tools.isWeiXin()&&!tools.isPC()){//不是pc端并且是微信环境
          WXAPI.getWxConfig(function(){//config方法是写在一个单独的js文件里的，这是暴露出来的方法，具体的自己看情况编写就行
            store.commit("setWxReadyOk",false);
            store.commit("setWxReadyOk",true);//告诉页面其它地方 微信初始化完成
          },huiyiId);
        }
      } 
    }
  }
}

页面内也给出一个参考代码：

                   self.shareToWxFriend(self.personInfo.huiyiCn,self.personInfo.realName);//安卓环境下，先执行config再在ready方法中 自定义配置分享信息
                    self.pageInfoOk=true;//标记页面信息已经拿到
                    if(tools.isIOS()){//如果是ios端 设置微信分享配置信息   注意这里的微信config是在入口初始化的，下面只需要判断微信环境初始化成功再自定义分享内容就行了
                        if(self.pageInfoOk&&self.wxReadyOk){//页面数据拿到并且wx环境初始化成功
                            self.wxShareCfg(self.personInfo.huiyiCn,self.personInfo.realName)
                        }
                    }  

 

上面就是解决微信在ios端，分享失效的方法以及思路，当然 认真的朋友也注意到，我解决微信初始化和页面数据加载异步的解决方法，就是用两个变量，一个代表微信初始化成功，一个代表页面数据加载成功，这个判断需要在获取页面数据的异步方法中调用，也需要在微信初始化成功的异步方法中调用，因为我们不能保证那个先完成。

 

下面再来看一下，我是如何在页面监听 微信初始化成功的：

watch: {
        wxReadyOk:{
            handler(newVal){
                if(this.pageInfoOk&&newVal){//页面数据拿到并且wx环境初始化成功
                    this.wxShareCfg(this.personInfo.huiyiCn,this.personInfo.realName);
                }
            },
            immediate:true,
        }
    },
    computed: {
        wxReadyOk(){
            return this.$store.getters.getWxReadyOk;
        }
    },

好了，问题已解决，文章写的比较粗糙，但是如果真正遇到这个问题的人看到，肯定会有帮助。

 

 

 

。