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

首先吐槽一步，拿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+ "×tamp=" + timestamp + "&url=" + url.split("#")[0];