# 在vue项目中引入微信sdk
- 安装
npm i weixin-js-sdk
1
# 关闭当前窗口
//引入企业微信js
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
1
2
2
WeixinJSBridge.call('closeWindow');
1
# 企业微信判断手机类型 解决版本升级bug
const ua = window.navigator.userAgent.toLowerCase();
const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (!isiOS || (isiOS && ua.match(/wxwork/i) == 'wxwork')) {
this.getWechatInfo(); // 微信配置信息
}
getWechatInfo() {
getWechat({
url: window.location.href.split('#')[0],
})
.then((res) => {
if (res.code == 0) {
this.list = res.data;
}
wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false,
appId: this.list.appId, // 必填，企业微信的corpID
timestamp: this.list.timestamp, // 必填，生成签名的时间戳
nonceStr: this.list.noncestr, // 必填，生成签名的随机串
signature: this.list.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.error((res) => {
alert(`出错了：${res.errMsg}`);
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: ['scanQRCode'],
success(res) {
},
});
});
});
}
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
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
# 判断是否在企业微信打开
app.vue
watch: {
$route(val){
// 企业微信登录控制
const ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// WeixinJSBridge.call('hideOptionMenu');// 禁用分享
} else {
this.$router.push({ name: 'error' }); // 跳到错误页面 正式环境下
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 企业微信静默登录
- 判断是否是在微信打开
// 企业微信登录控制
const ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// WeixinJSBridge.call('hideOptionMenu');// 禁用分享
} else {
router.push({ name: 'error' }); //跳到提示页面
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 在首页 path:'/'中把路由截取到的code传给后台,然后保存后台返回来的token 新建一个空白页path:'/'用来请求code,成功后返回项目首页,这样就可以解决在项目首页刷新重新获取code失效的问题
- 如果用户不存在则返回错误页面
- 路由模式 (opens new window)
//router.js
mode: 'history' //不然获取不到url的参数code
//history模式下 index.html中引入的路径有可能会出错
base: '/project-name/', //项目目录名字
1
2
3
4
2
3
4
- 配置文件
//public/config/index.js
let baseUrl =''
switch (process.env.NODE_ENV) {
case 'development':
baseUrl = "http://58.62.206.34:8988/rest/" //这里是本地的请求url
break
case 'production':
baseUrl = "http://58.62.206.34:8988/rest/" //生产环境url
break
}
export default baseUrl;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- axios请求
//axios/index.js
import baseUrl from '../../public/config';
const service = axios.create({
baseURL: baseUrl,
})
1
2
3
4
5
2
3
4
5
- 在vue.config.js中
const publicPath = process.env.NODE_ENV === 'production' ? '/project-name/' : '/';
1