美文网首页
ionic3开发企业微信之JSSDK接入以及invalid si

ionic3开发企业微信之JSSDK接入以及invalid si

作者: 竹子_331a | 来源:发表于2019-01-28 09:57 被阅读0次

    首先吐槽一步,拿ionic3开发企业微信,绝对是坑王之王,其他不说,每次修都要build部署到服务器上进行调试,就可以让你抓狂~~~
    进入正题,ionic3采用单页面路由模式,Url都类似http://xx.xx.xx.xx/#/index的类型。而微信的JSSDK的接入,一直报invalid signature的错误,排查了一天,最后才发现是url的问题。网上的很多解决办法都没用,最后还是要靠自己摸索出来。
    划重点:
    1、jssdk要的url就是我们获取code时的url,即进入页面的url。
    所以我们再创建button的时候,就要想好我们的url到底应该去哪里,为了规避#的问题(单页面的#问题很多),我们将url自己定位到主页面

     ViewButton btn11 = new ViewButton();  
            btn11.setName("进入");  
            btn11.setType("view");  
            //gloabUrl就是网页授权的地址(加http),如http://qdx74j.natappfree.cc/ 我是将前台页面放在qywx文件夹下,大家可以参考
            String mainUrl=gloabUrl+"qywx/";
            mainUrl=URLEncoder.encode(mainUrl);
            btn11.setUrl("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8fd6e2cd3c7ff3d6&"
                    + "redirect_uri="+mainUrl+"&response_type=code&scope=snsapi_privateinfo&"
                    + "agentid=1000003&state=ztit#wechat_redirect");
    ……
    

    2、前端在app.component.ts中初始化JSSDK

    //app.component.ts:
      constructor(private platform: Platform,private appService:AppService,
                  private helper: Helper,
                  private nativeService: NativeService) {
        this.platform.ready().then(() => {
          // 如果不需要微信用户信息,则直接调用this.initWxJsSdk();
          if (this.nativeService.isWXBrowser()) { // 判断是否微信浏览器
            this.helper.initWxUser(wxUserInfo => {
              console.log(wxUserInfo);
              this.helper.initWxJsSdk();
            });
          }
          if (this.nativeService.isWXBrowser()) { // 判断是否微信浏览器
            this.helper.initWxJsSdk();
          }
          this.helper.alloyLeverInit(); // 本地"开发者工具"
        });
        this.code = window.location.href.split('?')[1].split('&')[0].split('=')[1];
        this.getUser(); //此为获取用户信息的方法,不写了
      }
    
    //helper:
    initWxJsSdk() {
        // 通过code获取用户信息
        let directUrl=window.location.href;
        let params = new HttpParams()
          .set('directUrl',directUrl)
          .set('loginFrom', 'app');
    
        let url = GlobalVariable.BASE_URL + 'wx.do?method=getTicket';
        this.appService.GET(url, params, (res, err)=>{
          if (res) {
            console.log(res)
            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
              appId: res.appId,
              nonceStr: res.nonceStr,
              signature: res.signature,
              timestamp: res.timestamp,
              jsApiList: ['chooseImage', 'previewImage', 'getNetworkType',
                'uploadImage', 'downloadImage', 'getLocalImgData', 'openLocation',
                'getLocation', 'scanQRCode', 'chooseWXPay', 'closeWindow'] // 必填,需要使用的JS接口列表
            });
            wx.ready(() => {
              console.log('初始化js-sdk成功');
            })
          }
          if (err){
            wx.error(res => {
              console.log('初始化js-sdk失败' + res.errMsg);
            });
          }
        });
      }
    

    3、后台getWxConfig处理directUrl
    获取#之前的,因为默认会进入到#index页面,所以这里处理下~

    String sign = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonceStr+ "&timestamp=" + timestamp + "&url=" + url.split("#")[0];
    

    相关文章

      网友评论

          本文标题:ionic3开发企业微信之JSSDK接入以及invalid si

          本文链接:https://www.haomeiwen.com/subject/avwojqtx.html