vue使用微信JS-SDK实现分享功能

最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

1.绑定域名

微信公众号开发测试帐号：  http://mp.weixin.qq.com/debug ...  ，需要填写接口配置，一个公网能访问的域名，推荐用natapp/路由侠。填写JS接口安全域名 ，设置JS接口安全域后，通过关注该测试号，开发者即可在该域名下调用微信开放的JS接口，请阅读 微信JSSDK开发文档

1）这里使用路由侠，实现内网穿透  http://www.luyouxia.com/   ，下载安装后，配置相应的内网映射地址

2）设置JS接口安全域

2.引入JS文件

通过npm安装微信的js-sdk，或者在index.html页面中直接加script标签来引用，这里采用npm安装，

npm install weixin-js-sdk

在需要分享的页面中引入

import wx from 'weixin-js-sdk'

3.java实现js-sdk权限签名算法

1)jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket。

2）获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）

access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token，官方文档：

https://mp.weixin.qq.com/wiki ...

@RequestMapping(value = "/get_access_token", method = RequestMethod.GET)public String getAssessToken() {  String url = "https://api.weixin.qq.com/cgi-bin/token";  String str = HttpClientUtil.sendGet(url, "grant_type=" + Constants.GRANTTYPE + "&secret=" + Constants.APPSECRET + "&appid=" + Constants.APPID);  JSONObject jsonObject = JSONObject.fromObject(str);  return jsonObject.toString();}

3）获取access_token后，采用http GET方式请求获得jsapi_ticket

@RequestMapping(value = "/get_ticket", method = RequestMethod.GET)public String getTicket() {  String urlToken = "https://api.weixin.qq.com/cgi-bin/token";  String tokenObj = HttpClientUtil.sendGet(urlToken, "grant_type=" + Constants.GRANTTYPE + "&secret=" + Constants.APPSECRET + "&appid=" + Constants.APPID);  JSONObject jsonToken = JSONObject.fromObject(tokenObj);  String access_token = jsonToken.getString("access_token");  String urlTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";  String strTicket = HttpClientUtil.sendGet(urlTicket, "type=jsapi" + "&access_token=" + access_token);  JSONObject jsonTicket = JSONObject.fromObject(strTicket);   return jsonTicket.toString();}