Install weixin – js – SDK

npm i weixin-jk-sdk
Copy the code

Global injection

Introduced in main.js

import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx
Copy the code

Register the SDK

Please refer to the official SDK document of wechat for details

Recently, I spent 198 yuan to build a server with high configuration to learn Node and the corresponding framework. Now: Tencent Cloud 2 core 4G8M, 198 yuan /3 years

The following code is my wechat SDK registration


methods: {
    /** * Register wechat SDK */
    onRegisterWeixinSdk() {
        $wx = $wx; $wx = $wx; $wx = $wx
        this.$wx.config({
            debug: false.// If debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
            appId, // Mandatory, the unique identifier of the public account
            timestamp, // Mandatory to generate the timestamp of the signature
            nonceStr, // Mandatory to generate a random string of signatures
            signature,// Mandatory, signature
            jsApiList: ['updateAppMessageShareData'.'updateTimelineShareData'] // Mandatory, a list of JS interfaces to be used})},/** * Set wechat share parameters */
    onRegisterWeixinShare() {
        this.$wx.ready(() = > {
            // Share with friends
            this.$wx.updateAppMessageShareData({
                title, // Share the title
                desc, // Share the description
                link, // Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
                imgUrl, // Share ICONS
                success () {
                    // The setting succeeded}})// Share it on moments
            this.$wx.updateTimelineShareData({
                title, // Share the title
                desc, // Share the description
                link, // Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
                imgUrl, // Share ICONS
                success () {
                    // The setting succeeded})})},}Copy the code

Modifying the hosts file

If you do not know the hosts file directory, please search for it

Add a line of code in the hosts file to point 127.0.0.1 to an online domain name. This domain name must be the JS secure domain name in wechat public account (here is my own domain name for example) 127.0.0.1 ydhtml.comCopy the code

Here I set the vUE service to port 8888 by default

So once we’ve set the host at this point, we can type it locallyYdhtml.com :8888 visit our local project now

Set up the nginx reverse proxy

Nginx installation do not understand children’s shoes please download and install oh

Ps: Generally our vUE project port is 8080, or 8787 8888, at this time we need to use nginx for reverse proxy, if we do not set proxy, we visit this domain name ydhtml.com:8888 is inconsistent with our JS security domain name, it is not good. So we need to use the reverse proxy to map ydhtml.com:8888 to ydhtml.com

Configure the nginx file

In the root directory of nginx, go to the conf folder, create a folder servers, create a new file with the same name as you set hosts name (in this case, ydhtml.com), open the file and copy the following contents into it

Remember to change the port and domain name to your own and save

Upstream {server 127.0.0.1:8888; } server { listen 80 ; server_name ydhtml.com localhost; index index.html index.htm; # root /home/workspace/ft-portal-admin/release-current/; location / { proxy_pass http://ydhtml.com; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; }}Copy the code

Finally, restart nginx

Download the wechat developer tool

Select the public account page debugging, and then enter the domain name ydhtml.com this time as long as the nginx restart successfully can not need to take the port number, and finally you can debug in the console happily

tip

  • Android does not support the latest wechat SDK version (1.6.0).
  • By default, Android has from= groupMessage or from= SingleMessage in wechat

Here is how to solve this problem for the case with parameters, the code is as follows

/** * Clear wechat share parameters *@param { String } link* /
function clearWxLinkParams(link) {
    if (link.includes('from=') || link.includes('isappinstalled=')) {
        const newLink = link.replace(/&from=((.+?) *)/g.' ')
        location.replace(newLink)
    }
}

clearWxLinkParams(location.href)
Copy the code