Html5 implements the process of sharing and customizing content on WeChat

A recent project had a need for WeChat sharing and the need to customize the content of WeChat sharing. Since this was the first time I was exposed to WeChat sharing, I recorded some of the problems encountered during the process, as well as the entire process of completing the function.

The following is the general process (details are placed at each stage)

• Install weixin-js-sdk
• Initialize WeChat sharing
• Configure WeChat to share custom content (send to friends, send to Moments)

npm install weixin-js-sdk --save-dev

For specific instructions, please refer to WeChat official documentation.

Because many of the projects I am working on require the use of the WeChat sharing function, the code shared on WeChat will be encapsulated here.

The Api in the code below is actually an axios request

 import wx from 'weixin-js-sdk'import api from '@/api'const wxApi = { /** * [wxRegister WeChat Api initialization] * @param {Function} callback [ready callback function] */ wxRegister (callback, url) { let query = { // The url here must be the url that exactly corresponds to the page you want to share, and the base64 url ​​needs to be converted: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // Turn on debugging mode appId: data.appId, // Required, the unique identifier of the official account timestamp: data.timestamp, // Required, generate the timestamp of the signature nonceStr: data.nonceStr, // Required, generate the random string of the signature signature: data.signature, // Required, signature, see Appendix 1 jsApiList: data.jsApiList // Required, a list of JS interfaces that need to be used, see Appendix 2 for a list of all JS interfaces }) }) wx.ready((res) => { // If needed Customize ready callback method if (callback) { callback() } }) },}

Note: If you need to convert base64 above, you can use js-base64

3. Configure WeChat to share customized content (send to friends, send to Moments)

The second step is to initialize the packaging configuration for WeChat, but it still lacks the corresponding sharing and other functions. Let’s improve it here.

 //Add /*** after the wxRegister function [ShareTimeline custom WeChat sharing to Moments]* @param {[type]} option [share information]* @param {[type]} success [success callback]* @param {[type]} error [failure callback]*/ShareTimeline (option) {wx.updateTimelineShareData({ title: option.title, // Share title link: option.link, // Share link imgUrl: option.imgUrl, // Share icon success () { // Setting successful}, cancel () { // Setting failed}})},/*** [ShareAppMessage Customized WeChat sharing to friends]* @ param {[type]} option [share information]* @param {[type]} success [success callback]* @param {[type]} error [failure callback]*/ShareAppMessage (option) {wx.updateAppMessageShareData({ title: option.title, // Share title desc: option.desc, // Share description link: option.link, // Share link imgUrl: option.imgUrl, // Share icon success () { // Setting successful}, cancel () { // Setting failed}})}

4. When calling the page

 // vue as an example // For the following function parameters, please refer to the above method import wx from 'your encapsulated file' mounted(){ let base64 = require('js-base64').Base64 let url = base64.encode( window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods:{ // Customized jdk callback wxRegCallback () {}, // Customized function for sharing with friends wxShareAppMessage(){ let option = { title:'', // Share title desc: '', // Share description link: ' ', // Share link imgUrl: '' // Share icon } // Inject the general method wx.ShareAppMessage(option) }, // Customized function for sharing to friends circle wxShareTimeline(){ let option = { title:'',// Share title desc: '', // Share description link: '', // Share link imgUrl: '' // Share icon} // Inject the general method wx.ShareTimeline(option) }}

The above is the process of sharing on WeChat. If there are any deficiencies, please point them out.

WeChat sharing can only be tested on real devices

Domain names using localhost format cannot pass WeChat verification

The above is the Html5 implementation of WeChat sharing and custom content introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!