安装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)
