Write in front:

Do wechat web pages are basically connected to wechat SDK, WHEN I do, also quite a lot of effort, and then want to record, for their own future browsing, and let friends in need can do a reference, if you like it can point bozam, or pay attention to, I hope to help you.

This post was originally posted on my blog:obkoro1.com

Installing the SDK

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

Before we start, we can read the access document of wechat public number first. Vue is a single page project. For example, if you want to access the wechat sharing function, the sharing function should be available in each routing address.

Overall steps:

  1. When vue introduces the SDK, it puts code in the creatd() and Mounted () component lifecycle.

  2. Using pseudocode, familiarize yourself with the overall process and what to do:

    //wx is introduced into wechat SDK wx.config(' here are some parameters '); Wx. ready(function() {// Wx.onMenushareAppMessage ({// wx.onmenushareAppMessage () {// Wx.onmenushareAppMessage () {// Wx.onmenushareAppMessage () {// Wx.onmenushareAppMessage () {// Wx.onmenushareAppMessage () {// Wx.onmenushareAppMessage () {// Wx.onmenushareAppMessage () {// // Share title desc: 'This is a test! // Share title desc: 'This is a test! ', // Share description link: 'link ', // Share link imgUrl:' image ', // Share icon type: '', // Share type,music, video or link, default is link dataUrl: ', // If type is music or video, provide data link, default is null success: function() {// Callback function executed after user confirms share}, cancel: Function () {// the user unshares the callback function}}); Wx. onMenuShareTimeline({// Share friend circle title: 'title ', // share title Link:' link ', imgUrl: 'picture ', // Share icon success: Function () {// Callback performed after user confirms sharing}, cancel: function() {// Callback performed after user cancels sharing}}); }); Wxx. error(function(res){}); wxx.error(function(res){});Copy the code

Look at the above process several times to get an idea of the process, one of the most important steps is the following interface injection permissions.

Config Indicates the interface injection permission

The most important and important step to access the wechat interface is to fill in the following information, after filling in these information, basically good. The following information is usually obtained through a back-end interface.

Wx. config({debug: true, // Enable debug mode, the return value of all API calls will be alert in the client, if you want to view the passed parameters, you can open it in the PC, parameter information will be printed in the log, only on the PC. Timestamp:, // Required, generated signature nonceStr: ", // Required, generated signature random string signature: ",// Required, signature, see Appendix 1 jsApiList: [] // Required, list of JS interfaces required, see Appendix 2 for a list of all JS interfaces});Copy the code

Obtain config configuration information:

The front end doesn’t have to do much to get that information, just tune the back end interface. The back end takes that information and gives you the parameters back through an interface. You send the back end the full URL of the current routing page, and the back end returns the above information to you. You can then call the corresponding interface and customize the contents according to your own needs.

Pit: url

The important thing to watch out for here is the URL. If the URL is not delivered correctly, the back end will also return information, but the signature information will be wrong.

The full URL mentioned above refers to: ‘HTTP (s)://’ part, and’? The ‘GET argument part after’, but not the ‘#’hash part. This can be obtained via location.href.

Note: If your VUE project does not have history mode enabled on the route, i.e. your URL contains “#” above it, then to get the signature from the back end, you need to remove the “#” character from the URL. Location. Href. Split (‘#’)[0]

Wrapper calls SDK injection:

Because we need to inject the SDK into every routing page, this must be reused, otherwise the code will look too big.

Here’s how I did it:

  1. Because I put axiosPack a layer”, and then mount the AXIos interface to the Vue instance in main.js.
  2. This interface is then called in the global function, which is then called in the corresponding component of each routing page, passing in the url of the current page, along with other titles, images, etc.

Inside the specific steps do not say, the most important thing is to refer to the above process, function inside things are also based on that process.

Signature verification:

When you reconfirm steps are no problem, WeChat SDK injection or signature fail, this time you have to consider whether the back-end algorithm over there has a problem, you can return the back-end of signature and WeChat JS interface signature check tool to generate the signature of the contrast, is perhaps the back-end algorithm problem may not be there.

The latter

To be honest, WHEN I did it, I was caught by the URL. It was my first time to do it, and I had no experience. It took me a long time. Introducing the SDK is not difficult, it is important that that configuration information is filled in correctly, and then the rest is done according to actual needs.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions. Then is the hope of watching the friends point a like, can also pay attention to me. Personal blog and Nuggets personal homepage

The above 2017.12.16