1. Bind domain names

First, log in the wechat public platform, enter the “function Setting” of “public Account Setting”, and fill in the “JS interface security domain name”.

2. Introduce the following JS files in the page that needs to invoke the JS interface

< script SRC = "http://res2.wx.qq.com/open/js/jweixin-1.6.0.js" > < / script >Copy the code

or

< script SRC = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js" > < / script >Copy the code

3. Call the back-end interface to obtain the signature, timestamp, random string, public ID

import { get } from '@/JS/ajax' export function getConfig () { return new Promise(function (resolve, Reject) {get('/dt/getWeChatConfig', {//url is the interface parameter url: window.__wxjs_is_wkwebView? window.entryUrl : window.location.href }).then(res => { resolve(res) }, err => { reject(err) }) }) }Copy the code

Wx. config({}) infuses configuration information to verify permissions

Wx. config({debug: false, // Enable the debug mode, the return value of all API calls will be alert in the client, to view the passed parameters, can be opened in the PC, parameter information will be printed in the log, only on the PC. AppId: res.data.appId, // Required, the unique identifier of the public number timestamp: res.data.timestamp, // Required, the timestamp of the generated signature nonceStr: Res.data. nonceStr, // Required, generates a random string of signatures signature: res.data.signature, // Required, jsApiList: [/ / need to use JS interface list "updateAppMessageShareData", / / share with friends "updateTimelineShareData", / / share to friends "onMenuShareQZone", // Share to qq space "onMenuShareWeibo", // Share to weibo], // Required, need to use the JS interface list});Copy the code

Share Settings, titles, descriptions, images, etc. in wx.ready({})

Wx. Ready (function () {wx. UpdateAppMessageShareData ({title: "give your product link to friends", / / title desc: That.commodityDetail.com modityName, / / describe the link: window. The location. The href, / / link imgUrl: That.com modityDetail imgShare, / / picture address success: the function () {/ / it is to share success after the callback},}); });Copy the code

Sixth, pay attention to

When we write a single page application, the route of vue is in history mode. In ios system, the link does not change, it is always the address that enters the project for the first time, so in the page that you need to share, you need to reassemble the parameters that you pass to the back end, you can get the current path from the route guard.

  const authUrl = `${window.location.origin}${to.fullPath}`
Copy the code