zoukankan      html  css  js  c++  java
  • 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;
            }
        },

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

  • 相关阅读:
    批量数据导入数据库方法
    Remoting简单实践
    js面向对象继承
    Linq实现t-Sql的各种连接
    数据库树状结构的关系表的删除方案
    记录一次SQL查询语句
    mvc请求过程总结
    T-sql表表达式
    各个浏览器的兼容问题及样式兼容处理(不定期补充)
    vue.js 键盘enter事件的使用
  • 原文地址:https://www.cnblogs.com/fqh123/p/12588973.html
Copyright © 2011-2022 走看看