How to introduce WeChat sdk interface in vue

This article mainly introduces how to introduce the WeChat SDK interface into the vue project. The editor thinks it is quite good. Now I will share it with you and give it a reference. Let’s follow the editor and take a look.

Basically, the web pages created by WeChat must be connected to WeChat’s SDK. When I was doing it, I also spent a lot of effort, and then I wanted to record it for myself. Read it in the future and let friends in need take it as a reference. If you like it, you can like it or follow it. I hope it can help everyone.

Install sdk

npm install weixin-js-sdk --save

Before you start, you can read the access document of the WeChat public account. Vue is a single-page project. For example, if you want to access WeChat The sharing function must be included in each routing address. Because the URL of each routing is different, Souyi needs to introduce it in each routing address.

Overall steps:

If vue introduces sdk, it is to put the code in the routing component and the component life cycle: creatd() and mounted().

Use pseudo code to familiarize yourself with the overall process and what needs to be done:

//wx是引入的微信sdk
 wx.config('这里有一些参数');//通过config接口注入权限验证配置
 
 wx.ready(function() { //通过ready接口处理成功验证
 // config信息验证成功后会执行ready方法
   wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
     title: '这里是标题', // 分享标题
     desc: 'This is a test!', // 分享描述
     link: '链接', // 分享链接
     imgUrl: '图片', // 分享图标
     type: '', // 分享类型,music、video或link，不填默认为link
     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
     });
     wx.onMenuShareTimeline({ //分享朋友圈
     title: '标题', // 分享标题
     link: '链接',
     imgUrl: '图片', // 分享图标
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
   });
 });
 wxx.error(function(res){//通过error接口处理失败验证
   // config信息验证失败会执行error函数
 });

Read the above process several times to have an idea of ​​the entire process. The most important step is the following This excuse injects permissions.

config interface injection permission

The most important and important step to access the WeChat interface is to fill in the following information. After filling in the information, you are basically good to go. . The following information is usually obtained through the backend interface.

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名，见附录1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

Get config configuration information:

To get the above information on the front end, you don’t need to do much, just adjust the backend interface. The backend will process that information and return these parameters to you through an interface. You need to pass the complete URL of the current routing page to the backend, and the backend will return the above information to you. Later, you can call the corresponding interface according to your own needs and customize the contents.

Pitfall: url

What should be noted here is the problem of url. If the url is not passed correctly, the backend will also return information, but the signature information will be wrong. of.

The complete url mentioned above refers to: 'http(s)://' part, and '? 'The GET parameter part after ', but does not include the part after '#'hash. Can be obtained through location.href.

Note: If your vue project and routing do not have history mode enabled, that is, your url contains "#", then to correctly obtain the signature from the backend, you need to remove the characters after # on the url. . (Remove the '#'hash part of the url, you can use location.href.split('#')[0])

Encapsulation call sdk injection:

Because it needs to be SDK is injected into each routing page. This must be reused, otherwise it will be overwhelming to look at so many codes.

This is what I did:

Because I wrapped axios in a layer, and then mounted the axios interface to the Vue instance in main.js.

Then call this interface in the global function, and then call this function in the corresponding component of each routing page to add the URL of the current page and other titles, pictures, etc. Pass it in.

I won’t go into the specific steps. The most important thing is to refer to the process above. Everything in the function is also based on that process.

Signature verification:

When you repeatedly confirm that there is no problem with the steps, and the WeChat sdk injection still fails to sign, at this time you have to consider whether it is the backend There is a problem with the algorithm there. You can compare the signature returned by the backend with the signature generated by the JS interface signature verification tool provided by WeChat. It may be that there is a problem with the algorithm on the backend.

Afterword

To be honest, I was fooled by the url when I was doing it. It was the first time I made this thing, I had no experience, and it took me a long time. It is not difficult to introduce the SDK. What is important is that the configuration information must be filled in correctly, and then the rest will be done according to actual needs.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the web version of the calculator in JS

How to implement the parabolic trajectory of the ball using JS

How to implement binary tree traversal using JavaScript

How to implement cookie cross-domain in axios

In JavaScript How to achieve elastic effects in

How to implement ajax requests using axios (detailed tutorial)

The above is the detailed content of How to introduce WeChat sdk interface in vue. For more information, please follow other related articles on the PHP Chinese website!