微信打开静态页面分享给好友

先说一下需求，在原来的主页面右上角要添加一个分享按钮然后要求点击后弹出微信自带的分享给好友的功能，乍一看好像不难，之前确实没有微信相关的开发经验，但愣是花了3天才搞好。

先说一下结论：真是好大一个坑，微信的分享不能从自定义的按钮走，只能重写右上角那三个点的分享功能！

开发环境相关技术：vue / vux / webpack / j2ee

1.vue项目根目录下main.js中加载jsSDK

import {WechatPlugin, AjaxPlugin} from 'vux'
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)

2.1在需要分享的vue页面根据appid和appSecret获取access_token

this.$http.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的appsecret')
.then(function (response) {
    console.log(response.data.access_token)
    //根据access_token获取ticket
    ……
})

2.2根据上面的access_token获取ticket

that.$http.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + response.data.access_token + '&type=jsapi')
 .then(function (resp) {
    console.log('get ticket success: ' + resp.data.ticket)
    //拼凑需要的url
    ……
})

2.3根据ticket，随机字符串，秒时间戳，以及链接地址就可以获取签名

let timestamp = Date.parse(new Date()) / 1000
let noncestr = Math.random().toString(36).substr(2)
let href = location.href.split('#')[0] // vue项目不需要编码再后太解码
let url = 'jsapi_ticket=' + dd.data.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + href //顺序不能变就对了

let that = this
let requestPak = that.public.createRequestPak() // 创建rest请求包体
requestPak.requestBody.url = url
this.public.AjaxRequest(requestPak, 'system/addSecret', function (responseBody) {
    console.log('get signature is ' + responseBody.signature)
    that.$wechat.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
       appId: '你的appid', // 公众号appid
       timestamp: timestamp, // 时间戳
       nonceStr: noncestr, // 随机串 S大写
       signature: responseBody.signature, // 签名
       jsApiList: ['onMenuShareAppMessage'] // 需要使用的JS接口
    })
    that.$wechat.ready(function () { // 通过ready接口处理成功验证
        //一下方法一定要包含在ready的回调中
        that.$wechat.onMenuShareAppMessage({ // 分享给朋友 在config里先注册
        title: '测试标题', // 分享标题
        desc: '测试内容', // 分享描述
        link: window.location.href.split('#')[0], // 分享链接不能随便写好像只能写公众号安全域里的链接
        imgUrl: 'https://avatar.csdn.net/F/6/7/3_lanmanck.jpg', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
            alert('share success') 
        },
        cancel: function (e) {
            alert('取消分享')
        },
        fail: function (e) {
            alert('分享失败了')
        }
        })
    })
})

2.4后台因为测试的关系没有按照网上的说法去缓存access_token和ticket，只简单的进行sha1加密，这个要用到jar包，网上讲解已经很详细就不赘述了

import org.apache.commons.codec.digest.DigestUtils;

public ResponseData addSecret(RequestData requestData, HttpServletRequest request) {
	ResponseData responseData = new ResponseData();
	Map<String, Object> resultBody = responseData.getResultBody();

	Map<String, Object> requestBody = requestData.getRequestBody();
	String sign = DigestUtils.sha1Hex(StringUtil.toString(requestBody.get("url")).getBytes());
	resultBody.put("signature", sign);
		
	System.out.println("url:" + StringUtil.toString(requestBody.get("url")));
	System.out.println("signature:" + sign);

	return responseData;
}

到此重载微信分享就结束了