Vue项目在本地如何调试微信sdk

安装weixin-js-sdk

npm i weixin-jk-sdk

全局注入

在main.js中引入

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

最近花了500块钱 搞了个配置较高 阿里服务器 来学习 node 及对应的框架，现在：,阿里云双11活动 1核2G1M，69元/1年，180元/3年

注册sdk

详情请移步 微信官方sdk文档

下面代码是我的一个微信sdk注册

methods: {
    /**
     * 注册微信sdk
     */
    onRegisterWeixinSdk() {
        // 因为$wx刚刚已经在全局注测了，所以在这里我们是可以直接this去调用的，sdk所需要的参数可以在获取sdk参数的接口里面去调用
        this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId, // 必填，公众号的唯一标识
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature,// 必填，签名
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        })
    },
    /**
     * 设置微信分享参数
     */
    onRegisterWeixinShare() {
        this.$wx.ready(() => {
            // 分享给朋友
            this.$wx.updateAppMessageShareData({
                title, // 分享标题
                desc, // 分享描述
                link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl, // 分享图标
                success () {
                    // 设置成功
                }
            })
            // 分享到朋友圈
            this.$wx.updateTimelineShareData({
                title, // 分享标题
                desc, // 分享描述
                link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl, // 分享图标
                success () {
                    // 设置成功
                }
            })
        })
    },
}

修改hosts文件

不知道hosts文件目录的童鞋请自行百度

# 在hosts文件里增加这一行代码，将本地127.0.0.1指向线上域名，这个域名一定要是微信公众号里面的js安全域名（这里以我自己得域名举例）
127.0.0.1 ydhtml.com

这里默认我设置vue服务是 8888 端口

设置host完成之后这个时候，我们本地就可以 输入 ydhtml.com:8888 访问我们本地的项目了

设置nginx反向代理

nginx安装不懂得童鞋请自行下载安装噢

ps：一般我们的vue项目端口是8080，也可能是 8787 8888，这个时候我们就需要使用nginx进行反向代理，如果我们不设置代理的话，我们访问这个域名 ydhtml.com:8888 就跟我们的js安全域名不一致了，还不美观，所以我们就需要用到反向代理，去将 ydhtml.com:8888 映射成 ydhtml.com

配置nginx文件

在nginx的根目录下，然后进入 conf 文件夹，然后创建一个文件夹 servers，再新建一个文件这个文件名要跟你设置hosts name 一致，这里我的文件名是 ydhtml.com，然后打开文件，将以下内容复制进去

记得将端口和域名修改成你自己的，然后保存

upstream ydhtml.com {
    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'; 
   }

}

最后重启nginx

下载微信开发者工具

选择 公众号网页调试，再输入域名 ydhtml.com 这个时候只要nginx重启成功就可以不需要带端口号了，最后就可以在控制台里面愉快的调试啦

小提示

• 安卓貌似不支持最新的微信sdk版本（1.6.0）
• 安卓在微信中默认会带有 from=groupmessage or from=singlemessage 参数

这里针对带有参数的情况下，如何去解决这个问题，代码如下

/**
 * 清除微信分享自带的参数
 * @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)