First of all, we need to add a share button in the upper right corner of the original homepage, and then we need to click it to pop up wechat's own function of sharing to friends. At first glance, it seems not difficult. There was no wechat related development experience before, but it took three days to do well.

Let's start with the conclusion: it's such a big hole. Wechat sharing can't go from a custom button, it can only rewrite the sharing function of the three points in the upper right corner!

Development environment related technologies: vue / vux / webpack / j2ee

1. Load jsSDK in main.js under the root directory of Vue project

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

2.1 on the vue page that needs to be shared, obtain access_token according to appid and appSecret

this.$http.get('https://API. Weixin. QQ. COM / CGI bin / token? Grant? Type = client? Credential & appid = your appid & Secret = your appsecret ')
.then(function (response) {
    console.log(response.data.access_token)
    //Get ticket according to access_token
    ......
})

2.2 get ticket according to the access_token above

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)
    //Put together the required url
    ......
})

2.3 signature can be obtained according to ticket, random string, second time stamp and link address

let timestamp = Date.parse(new Date()) / 1000
let noncestr = Math.random().toString(36).substr(2)
let href = location.href.split('#'[0] // vue items do not need to be encoded and then decoded too much
let url = 'jsapi_ticket=' + dd.data.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + href //The order can't be changed. That's right

let that = this
let requestPak = that.public.createRequestPak() // Create rest request package
requestPak.requestBody.url = url
this.public.AjaxRequest(requestPak, 'system/addSecret', function (responseBody) {
    console.log('get signature is ' + responseBody.signature)
    that.$wechat.config({
       debug: false, // Turn on the debugging mode, and the return values of all the APIs you call will come out in the client alert
       appId: 'Your appid', // Public address appid
       timestamp: timestamp, // time stamp
       nonceStr: noncestr, // Random string S uppercase
       signature: responseBody.signature, // autograph
       jsApiList: ['onMenuShareAppMessage'] // JS interface to be used
    })
    that.$wechat.ready(function () { // Successfully verified through the ready interface processing
        //The following methods must be included in the callback of ready
        that.$wechat.onMenuShareAppMessage({ // Share with friends and register in config first
        title: 'Test title', // Share title
        desc: 'Test content', // Sharing description
        link: window.location.href.split('#) [0] / / share link can not be written as if it can only write links in the public number security domain.
        imgUrl: 'https://Avatar. CSDN. Net / F / 6 / 7 / 3 ﹣ lanmanck. JPG ', / / share Icon
        type: '', // Sharing type, music, video or link, no default is link
        dataUrl: '', // If the type is music or video, you need to provide data link, which is empty by default
        success: function () {
            alert('share success') 
        },
        cancel: function (e) {
            alert('Cancel share')
        },
        fail: function (e) {
            alert('Sharing failed')
        }
        })
    })
})

2.4 the background does not cache access_token and ticket according to the online statement because of the test relationship. It simply encrypts sha1, which needs to use jar package. The online explanation is very detailed and will not go into details

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;
}

This is the end of wechat sharing