需求：甲方要根据不同的端跳转不同端的详情页面，为什么要这样，是应为每次在PC端点击消息，都要扫码登录进入小程序，不想进入小程序，要打开PC端
1、在pc端的微信中点击消息，则打开PC后台管理系统
2、如果是在手机微信上打开，则进入到小程序内部对应的页面
分析
1、触发这个跳转的地方在哪？
2、微信的消息模板是否有这个点击跳转的事件进行判断是PC还是手机
3、如果是PC需要做单点登录，否则即使是跳转了也每次都要登录
4、当前模板如果不支持是否需要换模板进行
首先看模板 【这是企业微信消息模板】
刚开始就是用的这个模板，你会发现这个消息模板不支持监测点击事件，就无法进行判断是 判断是PC还是手机端，所以之前的假设就无效了
看参数说明有个page字段，但是你会发现有这么一段字【仅限本小程序内的页面】，说明该消息模板所配置的页面地址，必须是小程序内部的，
否则就无法跳转到对应的页面（别问为什么，问就是我试了，直接说页面不存在）
好了当前模板消息不能用了，那就看看换一个模板是否可以，然后就找到了这个【模板卡片消息】
找到之后你会发现，它有两个点击的地方，模板中显示的是企业微信官网，一个是跳转小程序，而且还有跳转的url
欸嘿那是不是就不需要前端啥事了，那我不就可以一个放pc端的地址，一个放小程序的地址
想得美，资本家的嘴脸怎么可以让你如此轻松就解决了，资本家：不行就要一个地址，点击根据操作系统来进行判断是手机还是pc,其他的不需要，好吧你是资本家你说的算
只要一个连接进行跳转，分析一下：
- 1、那就只能用官网的跳转，小程序的跳转地址只能是小程序内部的不行
- 2、官网跳转那么只能是一个外部页面（h5）,在这个h5页面中进行操作系统的判断
- 3、是pc还是手机端可以通过navigator.userAgent进行判断
- 4、难点就在h5页面中调起小程序
如何在h5中调起小程序 在文档中发现有个方法可以wx.invoke可以调起小程序
- 在该方法使用前必须得先进行一些配置
- 1、config 企业的配置
- 2、agentConfig应用的配置
- 3、配置完上面这些才能进行调起小程序wx.invoke，否则别谈
- 4、在进行企业的配置和应用的配置时，得掉接口去获取配置的信息数据
- 5、config的配置
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: result.corpId, // 必填，企业微信的corpID
timestamp: result.timestamp, // 必填，生成签名的时间戳
nonceStr: result.nonceStr, // 必填，生成签名的随机串
signature: result.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: ['ready', 'agentConfig', 'launchMiniprogram'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
- 6、agentConfig的配置
wx.agentConfig({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false,
corpid: result.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
agentid: result.agentId + '', // 必填，企业微信的应用id （e.g. 1000247）
timestamp: result.agentTimestamp, // 必填，生成签名的时间戳
nonceStr: result.agentNonceStr, // 必填，生成签名的随机串
signature: result.agentSignature,// 必填，签名，见附录-JS-SDK使用权限签名算法
jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
success: function (res2) {
wx.invoke('launchMiniprogram', {
"appid": "XXX", // 需跳转的小程序appid
"path": `pages/index/index`, // 所需跳转的小程序内页面路径及参数。非必填
}, function (res4) {
if (res4.err_msg == "launchMiniprogram:ok") {
// 正常
wx.closeWindow();
} else {
// 错误处理
}
}
);
},
fail: function (res3) {
if (res3.errMsg.indexOf('function not exist') > -1) {
alert('版本过低请升级')
}
}
});
注意事项
-
1、在进行配置的时候得先引入引用weixin-1.2.0.js，并且必须线上引入，不能npm i XXX进行引入，public->
index.html中引用<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -
2、跳转小程序必须成功调用agentConfig，但是在待用wx.agentConfig需要引入jwxwork
sdk<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script -
3、上面引用时按照开发文档中进行引用的，结果你会发现有问题，wx.agentConfig这个根本调不通，文档没有更新不能用这个，得用这个
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="orgin"></script> -
4、请求签名传的url不能转义、不加参数；
-
5、常遇错误代码：
- 40093： jsapi签名错误（检查签名和URL是否正确）
- 80001 可信域名不正确，或者无ICP备案（登录企微后台检查）
-
6、在配置完wx.config后必须得用setTimeout异步操作配置wx.agentConfig的配置，否则无法调起小程序
-
7、wx.config和wx.agentConfig需要获取签名，他们两个获取签名都是要调接口去获取的，签名的接口都不同，这个得注意
完整代码如下
index.html中引入js
<head>
<script src="https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="orgin"></script>
</head>
中转页面h5
<!-- -->
<template>
<div class=''>
</div>
</template>
<script>
import {getQyWechatConfig} from '@/servicesApi/ceoMailBox'
// import wx from 'weixin-js-sdk';
const wx = window.wx
export default {
methods: {
getCode() {
if (!this.isPC()) {
this.getLogin()
} else {
window.location = 'PC端的地址'
}
},
/**
* 判断是否是PC端
* @returns {boolean}
*/
isPC() {
let userAgentInfo = navigator.userAgent;
let Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
let flag = true;
for (let v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
},
/**
* 企业微信跳转小程序注意事项
* 1、引用weixin-1.2.0.js 一定使用线上引用，引用的报agentConfig is not a function；
* 2、public -> index 中引用 < script pt src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js">后
* 3、跳转小程序必须先成功调用agentConfig，调用 wx.agentConfig需要引入 jwxwork sdk
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js">
* 上面引用都是有问题的，只能 用这个 https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js
* 4、请求签名传的url不能转义、不加参数；
* 5、常遇错误代码：
* 4.1 40093 jsapi签名错误（检查签名和URL是否正确）
* 4.2 80001 可信域名不正确，或者无ICP备案（登录企微后台检查）
* @returns {Promise<void>}
*/
getLogin() {
let url = window.location.href.indexOf('#') ? window.location.href.split('#')[0] : ''
getQyWechatConfig({
signUrl: url
}).then(response => {
const {status, data: {result}} = response
if (+status === 200) {
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: result.corpId, // 必填，企业微信的corpID
timestamp: result.timestamp, // 必填，生成签名的时间戳
nonceStr: result.nonceStr, // 必填，生成签名的随机串
signature: result.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: ['ready', 'agentConfig', 'launchMiniprogram'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
setTimeout(()=>{
wx.agentConfig({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false,
corpid: result.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
agentid: result.agentId + '', // 必填，企业微信的应用id （e.g. 1000247）
timestamp: result.agentTimestamp, // 必填，生成签名的时间戳
nonceStr: result.agentNonceStr, // 必填，生成签名的随机串
signature: result.agentSignature,// 必填，签名，见附录-JS-SDK使用权限签名算法
jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
success: function (res2) {
wx.invoke('launchMiniprogram', {
"appid": "XXX", // 需跳转的小程序appid
"path": `pages/index/index`, // 所需跳转的小程序内页面路径及参数。非必填
}, function (res4) {
if (res4.err_msg == "launchMiniprogram:ok") {
// 正常
wx.closeWindow();
} else {
// 错误处理
}
}
);
},
fail: function (res3) {
if (res3.errMsg.indexOf('function not exist') > -1) {
alert('版本过低请升级')
}
}
});
},500)
wx.error(function (err) {
alert("显示错误" + JSON.stringify(err))
})
}
});
}
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
document.title = '井底的蜗牛'
this.getCode()
console.log(this.$route)
},
}
</script>
<style lang='scss' scoped>
</style>
