小程序webview内嵌H5页面调用JSSDK接口总结
- H5页面
- 服务端
- 管理页的配置
- 遇到的坑
最近公司的一个项目需要小程序和公众号开发,为了节省开发时间,决定使用小程序的组件内嵌H5页面这样就能和公众号同步起来,因为需要调用微信的接口,所有整个配置起来还是很繁琐的,这里做个总结,有什么说的不对的地方还请大家提出来。
H5页面
这边是以vue页面调用扫一扫的接口为例
1.页面加载时,需要以当前页面的url向服务端请求四项参数:appId,timestamp,nonceStr,signature,这里要注意:当前页的url需要encodeURIComponent
//页面加载时候执行
created(){
this.getWeChatToken();
},
//获取token
getWeChatToken(){
//获取当前页面的url
let pageUrl=encodeURIComponent(window.location.href.split('#')[0]);
getToken(pageUrl).then(response=>{
this.tokenRes=response.data;
this.config();
})
},
//执行配置
config(){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: this.tokenRes.appId, // 必填,公众号的唯一标识
timestamp: this.tokenRes.timestamp, // 必填,生成签名的时间戳
nonceStr: this.tokenRes.nonceStr, // 必填,生成签名的随机串
signature: this.tokenRes.signature, // 必填,签名,见附录1n
jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function() {
console.log("配置成功")
});
wx.error(function(res) {
console.log("配置失败")
})
},
服务端
服务端需要做两件事:
第一件:
通过小程序的appId和appsecret获取到accessToken,再通过accessToken获取jsapiTicket,因为每天的获取次数是有限的,所以需要做本地缓存,accessToken、jsapiTicket的有效期是7200秒。我这边的实现方式是:定时器+redis
//项目启动请求一次Token
@PostConstruct
public void proiectBeginExecute(){ getAccessTokenAndJsapiTicket();}
//每隔100分钟请求一次Token
@Scheduled(fixedRate=1000*60*100)
public void eachExecuteTimer(){getAccessTokenAndJsapiTicket();}
public void getAccessTokenAndJsapiTicket(){
//先获取access_token
String accessTokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appID+"&secret="+appsecret;
String accessTokenRes=doGet(accessTokenUrl,null);
JSONObject jsonObject = JSONObject.parseObject(accessTokenRes);
String accessToken=jsonObject.get("access_token").toString();
//通过access_token获取jsap_ticket
String jsapiTicketUrl="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+accessToken+"&type=jsapi";
String jsapiTicketRes=doGet(jsapiTicketUrl, null);
JSONObject jsonObject2 = JSONObject.parseObject(jsapiTicketRes);
String jsapiTicket=jsonObject2.get("ticket").toString();
//放进redis
logger.info("HostAddress:" +addr.getHostAddress());
logger.info("HostName:" +addr.getHostName());
logger.info("放进redis中的jsapiTicket=" +jsapiTicket);
logger.info("放进redis中的accessToken=" +accessToken);
redisCache.setCacheObject("jsapiTicket", jsapiTicket);
redisCache.setCacheObject("accessToken", accessToken);
}
注意:
appID和appsecret自己去小程序管理页里面去找(强调下:是小程序的appID不是个人的)
doGet方法是http请求,redisCache是工具类具体实现这里没有。
以上是服务端做的第一件事。
第二件
封装前端需要的几个参数,这边最好结合开发者文档去看,传送门:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
public Map<String, String> getWxConfig(String requestUrl) throws Exception{
//url转码
String s = URLDecoder.decode(requestUrl,"UTF-8");
Logger logger = LoggerFactory.getLogger(AccessTokenConfig.class);
Map<String, String> ret = new HashMap<String, String>();
//accessToken
String accessToken = redisCache.getCacheObject("accessToken");
logger.info("redis中获取的accessToken="+accessToken);
//jsapiTicket
String jsapiTicket = redisCache.getCacheObject("jsapiTicket");
logger.info("redis中获取的jsapiTicket="+jsapiTicket);
//签名随机戳
String timestamp = Long.toString(System.currentTimeMillis() / 1000);
//签名随机串
String nonceStr = UUID.randomUUID().toString();
//加密前的signature
String sign = "jsapi_ticket=" + jsapiTicket + "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url=" + s;
logger.info("sign:"+sign);
//signature加密(SHA-1)
String signature = "";
signature = DigestUtils.sha1Hex(sign);
//封装map
ret.put("appId", appID);
ret.put("timestamp", timestamp);
ret.put("nonceStr", nonceStr);
ret.put("signature", signature);
ret.put("jsapi_ticket",jsapiTicket);
ret.put("url", s);
return ret;
}
这里的appId还是小程序的,和上面一样
代码部分就是以上
管理页的配置
光有以上代码还不行:必须要在小程序的管理页配置上合法域名,而且必须是https的(公众号只需要http就行了),所以要去申请ssl证书,配置到自己的服务里面,我自己用的是nginx代理,配置过程这里省略了
遇到的坑
先声明一下,因为本人技术能力有限,以下有些观点不一定是正确的,可能大牛有更好的解决方式,仅仅做个参考:
1、一开始用的是自己申请的小程序,然后去用webview组件,发现根本没法用页面出不来,后来才知道个人小程序不支持webview
2、我用的小程序的appid和appsecret,但是微信接口死活调不到,实在没办法换成公众号的就行了,但是我这种小程序+公众号的开发还好,如果仅仅开发小程序的怎么办,但是微信开发文档上的确是说的用小程序的appid就行了,这个问题到现在都没解决,希望有大神能解答。
3、还有个nginx配置ssl证书那一块,在nginx的配置文件引入ssl密钥文件的时候,网上大都用的绝对路径,我试了不行,用相对路径就可以了。
4、总体来说感觉还是很繁琐的,而且还有好多细节没提到,这里也只是给大家一个大体的方向。