Recently, a project had a need to customize the content of wechat sharing. Since it was the first time I came into contact with wechat sharing, I recorded some problems encountered during this period and the whole process of completing the function.

The following is the general process(Details in each stage)

  • The installationweixin-js-sdk
  • Initialize wechat sharing
  • Configure wechat to share custom content (send to friends, send to moments)

1, install,weixin-js-sdk

npm install weixin-js-sdk --save-dev
Copy the code

Please refer to official wechat documents for specific instructions

2. Initialize wechat sharing

Because many of the projects I am working on need to use the function of wechat sharing, the code of wechat sharing will be encapsulated here

The following URL is actually the url of the page, because it needs to be sent to the back end for signature authentication, but there is a condition to note about this URL

When the URL is in the form of www.xx.com/index.html#/ when this is the case, if you use the full url of the page on Android to fetch parameters from the back end, the configuration can be completed on Android, but on Apple, it will appear inexplicably sometimes the configuration error, and it is possible to refresh the page, The configuration can be completed again.

Solution:EncodeURIComponent () encodeURIComponent() encodeURIComponent()
let url = encodeURIComponent(window.location.href.split(The '#') [0])
Copy the code

The specific reason is not clear, I checked the data and said encodeURIComponent() encoding is ok, but why base64 encoding does not appear in Android, and I can refresh the page on Apple, and sometimes can pass verification. No signature error is returned.

import wx from 'weixin-js-sdk'
import api from '@/api'
const wxApi = {
    /** * @param {Function} callback [ready callback Function] */
  wxRegister (callback, url) {
    let query = {
      url: url 
    }
    api.getWxJsSdk(query).then(res= > {
      let data = res.data
      wx.config({
        debug: false.// Enable debugging mode
        appId: data.appId, // Mandatory, the unique identifier of the public account
        timestamp: data.timestamp, // Mandatory to generate the timestamp of the signature
        nonceStr: data.nonceStr, // Mandatory to generate a random string of signatures
        signature: data.signature, // Mandatory, signature, see Appendix 1
        jsApiList: data.jsApiList // Mandatory, a list of JS interfaces to be used. See Appendix 2 for a list of all JS interfaces
      })
    })
    wx.ready((res) = > {
      // If you need to customize the ready callback method
      if (callback) {
        callback()
      }
    })
  },
}
Copy the code

3. Configure wechat to share custom content (send to friends, send to moments)

The second step is to initialize the encapsulation configuration of wechat, but there is still a lack of corresponding functions such as sharing, so we will improve it here.

// Add after the wxRegister function
@param {[type]} Option [share information] * @param {[type]} success [successful callback] * @param {[type]} Error [failed callback] */
ShareTimeline (option) {
wx.updateTimelineShareData({
  title: option.title, // Share the title
  link: option.link, // Share the link
  imgUrl: option.imgUrl, // Share ICONS
  success () {
    // The setting succeeded
  },
  cancel () {
    // Setup failed}})},/** * @param {[type]} option [share information] * @param {[type]} success [success callback] * @param {[type]} Error [failed callback] */
ShareAppMessage (option) {
wx.updateAppMessageShareData({
  title: option.title, // Share the title
  desc: option.desc, // Share the description
  link: option.link, // Share the link
  imgUrl: option.imgUrl, // Share ICONS
  success () {
    // The setting succeeded
  },
  cancel () {
    // Setup failed}})}Copy the code

4. When the page is called

/ / the vue, for example
// Refer to the above method for the following function parameters
import wx from 'The file you sealed'
mounted(){
    let base64 = require('js-base64').Base64
    let url = base64.encode(window.location.href)
    wx.wxRegister(this.wxRegCallback,url)
},
methods: {// Custom JDK callback
    wxRegCallback () {},
    // A custom function to share with friends
    wxShareAppMessage(){
        let option = {
            title:' '.// Share the title
            desc: ' '.// Share the description
            link: ' '.// Share the link
            imgUrl: ' ' // Share ICONS
        }
        // Inject generic methods
        wx.ShareAppMessage(option)
    },
    // A custom function to share to moments
    wxShareTimeline(){
        let option = {
            title:' '.// Share the title
            desc: ' '.// Share the description
            link: ' '.// Share the link
            imgUrl: ' ' // Share ICONS
        }
        // Inject generic methods
        wx.ShareTimeline(option)
    }
}
Copy the code

The above is the process of wechat sharing. Welcome to point out any shortcomings.

  • Wechat sharing can only be tested on real phones
  • A domain name in the form of local localhost cannot pass wechat verification