步骤1.引入js-sdk相关2个js文件 (需要同时引入这两个文件的)
open.work.weixin.qq.com/wwopen/js/j…
引入的目录:项目名/public/index.html
<div id="app"></div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
后端提供接口: 获取jsapi-ticket签名
wx.config({ beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用
timestamp: '', // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
后端提供接口: 获取应用jsapi-ticket签名
wx.agentConfig({
corpid: '', // 必填,企业微信的corpid,必须与当前登录的企业一致
agentid: '', // 必填,企业微信的应用id (e.g. 1000247)
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录-JS-SDK使用权限签名算法
jsApiList: ['selectExternalContact'], //必填,传入需要使用的接口名称
success: function(res) { // 回调 },
fail: function(res) {
if(res.errMsg.indexOf('function not exist') > -1){
alert('版本过低请升级')
}
}
});
公共部分代码示例 : wxConfig.js
import { getJsApi, getAgentJsApi } from '@/api/common' // 接口名
export async function getJsapiConfig(flag=null) {
try {
let agentId = '' // 企业应用id 根据不同环境配置
if (process.env.VUE_APP_NODE_ENV_TYPE === 'test') {
agentId = '10000XX'
} else if (process.env.VUE_APP_NODE_ENV_TYPE === 'uat') {
agentId = '10000XX'
} else if (process.env.VUE_APP_NODE_ENV_TYPE === 'prod') {
agentId = '10000XX'
}
let data = {
agent_id: agentId, // 企业微信的[应用id]
url: location.href.split('#')[0] // 进行url编码后的页面路径
}
let that = this
const [configRes, agentConfigRes] = await Promise.all([
getJsApi(data),
getAgentJsApi(data)
])
if (configRes.errorNo == 0) {
console.log('获取到的jsAPI', configRes, agentConfigRes)
wx.config({ // 要使用的
beta: true,
debug: false,
appId: configRes.results[0].appid,
timestamp: configRes.results[0].timestamp,
nonceStr: configRes.results[0].nonceStr,
signature: configRes.results[0].signature,
jsApiList: [
'agentConfig',
'openEnterpriseChat', // 进入聊天
'navigateToAddCustomer', // 加客户好友
'getCurExternalContact', // 获取外部联系人
'onMenuShareTimeline', // 分享到朋友圈
'onMenuShareAppMessage', // 分享
'onMenuShareWechat', // 微信
'hideOptionMenu',
'showMenuItems' ,
'previewFile'
],
success: function (configRes) {
console.log('wx成功', configRes)
},
fail: function (configRes) {
console.log('wx-fail', configRes)
}
})
wx.ready(function () {
console.log('wx', wx)
if(!flag){ // 隐藏页面右上角三个点的分享功能
wx.hideOptionMenu()
}
wx.checkJsApi({
jsApiList: ['agentConfig'],
success: function (res) {
console.log('agentConfig***', res)
if (agentConfigRes.errorNo == 0) {
wx.invoke('agentConfig', { // 通过agentConfig注入应用的权限
beta: true,
debug: true,
corpid: agentConfigRes.results[0].appid,
agentid: data.agent_id,
timestamp: agentConfigRes.results[0].timestamp,
nonceStr: agentConfigRes.results[0].nonceStr,
signature: agentConfigRes.results[0].signature,
jsApiList: [
'navigateToAddCustomer',
'getCurExternalContact',
'shareTimeline', // 转发到微信朋友圈
'shareWechatMessage', // 转发到微信
'shareAppMessage', // 转发
'shareToExternalMoments', // 发表到客户朋友圈
'shareToExternalContact', // 群发给客户
'previewFile' // 文件预览
]
},
function (agentConfigRes) {
console.log('agentSucces---', agentConfigRes)
wx.checkJsApi({
jsApiList: [
'openEnterpriseChat',
'navigateToAddCustomer',
'getCurExternalContact',
'shareTimeline', // 转发到微信朋友圈
'shareWechatMessage', // 转发到微信
'shareAppMessage', // 转发
'shareToExternalMoments', // 发表到客户朋友圈
'shareToExternalContact', // 群发给客户
'previewFile' // 文件预览
],
success: function (res) {
console.log('jsApiList', res)
}
})
}
)
}
},
fail: function (res) {
console.log('抱歉,当前客户端不支持agentConfig')
}
})
})
wx.error(function (configRes) {
console.log('失败', configRes)
})
}
} catch (err) {
console.log('获取jsapi-ticket签名错误', err)
}
}
页面调用wxConfig:
<script>
import { getJsapiConfig } from '@/utils/wxConfig'
mounted() {
getJsapiConfig() // 引入即可在页面调用已注册的接口使用
}
</script>