1、微信js-sdk简介：
做微信js-sdk开发，首先要了解微信js-sdk是干什么的，微信官方这里可以查看
其实就是调取微信app原生的能力，让h5页面可以调用起来微信扫码、支付、分享等接口
2、vue项目中安装wx-js-sdk
npm i -S weixin-js-sdk安装过之后再main.js中全局注入
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx这样，在页面中就可以通过 this.$wx拿到微信的方法了
不过再调用微信js-sdk之前，需要通过微信注入拿到权限，需要后端配合才行
在首页的created上执行 this.initWxConfig() 注意：这个是我自己写的方法
initWxConfig() {
let _this = this
const jsApiList = ['scanQRCode', 'chooseImage']
_this.$api.wxApi.config(window.location.href.split('#')[0])
.then(config => {
const res = config.data
_this.$wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.corpid, // 必填，企业微信的corpID
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.noncestr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: jsApiList // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
})
_this.$wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
console.log('wx.ready')
_this.$wx.checkJsApi({
jsApiList: jsApiList, // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function (res) {
console.log(res)
}
})
})
})
},里面有什么不懂的可以查看微信的文档，对接后端接口怎么写可以看我的另一篇文章 H5微信分享、自定义微信分享
3、配置外网，要能访问本地vue项目
首先要明白为什么要外网访问本地vue项目，因为微信js-sdk要求的只有外面的页面才能够注入成功！
所以问题来了？
问题1：怎么配置外网访问的vue项目？
问题2：应该配置外网访问vue打包完的项目还是未打包的项目？
答：先回答问题2，应该配置外网访问打包完的项目，因为未打包的项目非常之大，一般我们都是用一些网上的工具来进行外网访问的，速度不会很快，打包完的代码很小，这是其一，访问打包完的代码对于测试也是很有必要的，这是其二。
我们再来看问题1，用外网访问内网，需要一个内网穿透的工具，网上就有现成的，这里推荐给大家俩个，花生壳、路由侠，用免费版的即可，虽然会有网速限制，不差钱的大佬可以选择氪金，上面填上本地ip与端口就会分配一个外网地址，超级方便，本人一般开发在8080端口，nigux输出一个80端口的打包后的vue项目出去，再让花生壳穿透本地80端口到外网，本地在用nigux再代理一个后端的api到本地:80/api接口，用于80端口访问接口（因为8080端口是vue项目，可以用proxy做代理，dist文件夹里的就不行了，得用nigux代理一个才行，要不会404，也是把后端的接口代码与环境在本机）
最后还有非常重要的一步，要把微信给的安全文件方法dist文件夹，在外网访问一下这个文件夹就好了，一次就好，之后打包会把安全文件删除也无所谓，验证只需一次。
纯原创、纯手码，因为也是之前有一个项目用到，也是看网上没有这方面的资源，写出来供广大码农参考。
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
root "D:/work/dodgem-front/dist";
location / {
try_files $uri $uri/ /index.html;
# index index.html index.htm index.php l.php;
autoindex off;
}
location /api {
#proxy_set_header Host $host;
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Real-PORT $remote_port;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://0.0.0.0:8080/api;
}
}