微信打開靜態頁面分享給好友

先說一下需求，在原來的主頁面右上角要添加一個分享按鈕然後要求點擊後彈出微信自帶的分享給好友的功能，乍一看好像不難，之前確實沒有微信相關的開發經驗，但愣是花了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;
}

到此重載微信分享就結束了