A, install,

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

2. Introduce JS files

Introduce js files required by wechat development in index.html page:

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
Copy the code

Create wx.jsapi.js file, main.js

My wx.jsapi.js file was in the SRC API directory, and I introduced the following code in main.js:

import WXConfig from './api/wx.jsapi'Prototype.WXConfig = WXConfig;Copy the code

Four, encountered pit:

1, ESLint compiler error, wx undefined

– undefined error will be reported when using Wx in JS code, esLint will fail to compile. Let’s just change wx to window.wx and it works. Get online quickly to find a friend who has met this problem together: vue wechat share Settings step pit

Relieved, find the resonance of the feet! 😏

– undefined error will be reported when using Wx in JS code, esLint will fail to compile. There are two solutions to this, one is to disallow ESLint detection by adding a comment to the front of js. /* eslint-disable */ Alternatively, use window.wx instead of wx

2. Link must be the URL of the secure domain name

The url to be shared must be whitelisted. That is, the URL to be shared must be a secure domain name.

ImgUrl share the icon path

ImgUrl, which needs to be set to the address on the server. The current practice is to put the share image in the root directory of Dist.

At first, I put it under the project, but I found that the path was wrong after the package, and THEN I thought of putting it in the packaged file and directly on the server. My colleague suggested that I put it in static, but I found that I couldn’t, because NPM run build would regenerate the file and the picture would still disappear, so I put it in the root directory.

4, when required to share, no matter which page to share, share the home page

By default, only the home page is shared:

function getUrl(url) {
    var arrUrl = url.split('/');
    var newUrl = [];
    for (var i = 0; i < arrUrl.length - 1; i++) {
        newUrl.push(arrUrl[i]);
    }
    return newUrl.join('/') + '/';
}
Copy the code

5. EncodeURIComponent processing is done when obtaining the URL of development

This part needs to be negotiated with the development, whether it needs to be dealt with;

Note the difference between the encodeURIComponent() function and the encodeURI() function, which assumes that its arguments are part of the URI(such as protocol, host name, path, or query string). So the encodeURIComponent() function uses the escape to separate the punctuation marks that separate parts of the URI.

5, wx.jsapi.js, attached code

mport axios from 'axios'

export default {
  wxShowMenu: function() {
    const url = 'XXX.json? url=' + encodeURIComponent(window.location.href.split(The '#') [0]);function getUrl(url) {
      var arrUrl = url.split('/');
      var newUrl = [];
      for (var i = 0; i < arrUrl.length - 1; i++) {
        newUrl.push(arrUrl[i]);
      }
      return newUrl.join('/') + '/';
    }
    axios.post(url).then(function(res) {
      var getMsg = res.data;
      window.wx.config({
        debug: false// If debug mode is enabled, the return value of all API calls will be displayed in the client side alert. To view the passed parameters, you can open it in the PC side and the parameter information will pass throughlogPrint, print only on PC. Timestamp: getmsg. timestamp, // Mandatory, generated signature's timestamp nonceStr: Signature: getmsg. signature, // Mandatory, signature, see Appendix 1 jsApiList: [// Mandatory, list of JS interfaces to use, see Appendix 2 for a list of all JS interfaces'onMenuShareTimeline'// Share with friends'onMenuShareAppMessage'// Share it on moments'onMenuShareQQ'.'onMenuShareQZone'.'onMenuShareWeibo']}); window.wx.ready(function() {
        var shareConfig = {
          title: 'title'// Share caption desc:'desc', / / share description link: getUrl (window. The location. The href. Split (The '#') [0]), / / share links, the link of the domain name to register in JS security domain imgUrl: getUrl (window. The location. The href. Split (The '#'+) [0])'share.jpg'// Share ICONStype: 'link'// Share type,music, video or link. The default value is link dataUrl:' '/ / iftypeIf it is music or video, provide data link, default is null SUCCESS:function() {// callback function executed after user confirms share}, cancel:function() {// callback function executed after user unshares}}; console.info('Wechat share parameters:' + JSON.stringify(shareConfig));
        window.wx.onMenuShareTimeline(shareConfig);
        window.wx.onMenuShareAppMessage(shareConfig);
        window.wx.onMenuShareQQ(shareConfig);
        window.wx.onMenuShareQZone(shareConfig);
        window.wx.onMenuShareWeibo(shareConfig);
      });
      window.wx.error(function(res) { console.log(res); }); }}})Copy the code

Write at the end: Thank you to my friends who helped me and my colleagues who did not complain about low. Thank you! If there are any mistakes in this article, please help to correct them, thank you!

Ps: A post-90s aunt who works hard on the front end of the road, the smiling person will not have too bad luck, and the pace of progress can be enlarged. 😁 😁 😁