安装weixin-js-sdk

1
npm i weixin-jk-sdk

全局注入

在main.js中引入

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

注册sdk

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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文件目录的童鞋请自行百度

1
2
# 在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,然后打开文件,将以下内容复制进去

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 参数

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

1
2
3
4
5
6
7
8
9
10
11
12
/**
* 清除微信分享自带的参数
* @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)

最后分享黄轶老师的Vue3源码解析

"Vue3源码解析"