首先吐槽一步,拿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];
网友评论