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

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

主要介绍了vue使用微信JS-SDK实现分享功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的

网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用

户提供更优质的网页体验。

1.绑定域名绑定域名

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

号，开发者即可在该域名下调用微信开放的JS接口，请阅读 微信JSSDK开发文档

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() {

@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();

@RequestMapping(value = "/get_signature", method = RequestMethod.GET)

public Map<String, String> getSignature(String url) {

Map<String, String> ret = new HashMap<String, String>();

String wxTicket = getWxApiTicket();

String nonce_str = create_nonce_str();

String timestamp = create_timestamp();

String str;

String signature = "";

//注意这里参数名必须全部小写，且必须有序

str = "jsapi_ticket=" + wxTicket +

crypt.reset();

crypt.update(str.getBytes("UTF-8"));

signature = byteToHex(crypt.digest());

} catch (NoSuchAlgorithmException e) {

e.printStackTrace();

} catch (UnsupportedEncodingException e) {

e.printStackTrace();

}

ret.put("url", url);

ret.put("jsapi_ticket", wxTicket);

签名接口返回信息

{

"signature":"4021b3f502e6bd15798a0433af33c4ef1be4ff83",

"appId":"wx618f45e4948c3889",

"jsapi_ticket":"sM4AOVdWfPE4DxkXGEs8VOxnOWlkG3Q1qP1pwA8mBLNgkCewNOfFiU8EmlnAx8_Fe0Zh-rGS03Nu8BQZB0a4-g",

"url":null,

"nonceStr":"ab5d0e96-429b-4a86-bd88-dc1276dcf76f",

"timestamp":"1566527616"

}

注意事项注意事项