前言

目前企业微信已经有好多的公司在使用了。在使用时，为了更方便的与客户进行互动沟通，进行相关工作的进行，会需要对其进行二次开发。正好我所在的项目组就进行了开发，下面呢我就对企业微信第三方应用开发进行一个简单的说明。

准备

开发参考——文档 - 企业微信开发者中心

点击进入，然后点击客户端。

进入以后呢，好多小伙伴一看是小程序开发相关，往下拉还是没有找到，这个时候我们需要点击这里，如图：

点击以后，就会发现我们的第三方应用开发文档就在底下。

这里呢我直接把地址放到这里，方便看到这里的程序猿们直接使用。

概述 - 接口文档 - 企业微信开发者中心

然后我们就直接进入代码环节吧。上干货

代码

步骤一：首先我们需要引入JS文件。看代码

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

步骤二：通过config接口注入权限验证配置

wx.config({
    beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业微信的corpID
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
    jsApiList: ['getCurExternalContact','sendChatMessage'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});

要注意哦，这里的 timestamp nonceStr signature 都需要我们的后台同事去帮我们生成。

jsApiList 这里则是填写我们需要使用到的接口名，这里我使用到了两个

1.获取当前外部联系人userid

wx.invoke('getCurExternalContact', {
        }, function(res){
        if(res.err_msg == "getCurExternalContact:ok"){
            userId  = res.userId ; //返回当前外部联系人userId
        }else {
            //错误处理
        }
    });

2.分享消息到当前会话

wx.invoke('sendChatMessage', {
    msgtype:"text", //消息类型，必填
	enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
	text: {
		content:"你好", //文本内容
	},
	image:
	{
		mediaid: "", //图片的素材id
	},
	video:
	{
		mediaid: "", //视频的素材id
	},
	file:
	{
	   mediaid: "", //文件的素材id
	},
	news:
	{
		link: "", //H5消息页面url 必填
		title: "", //H5消息标题
		desc: "", //H5消息摘要
		imgUrl: "", //H5消息封面图片URL
	},
	miniprogram:
	{
		appid: "wx8bd80126147df384",//小程序的appid，企业已关联的任一个小程序
		title: "this is title", //小程序消息的title
		imgUrl:"https://search-operate.cdn.bcebos.com/d054b8892a7ab572cb296d62ec7f97b6.png",//小程序消息的封面图。必须带http或者https协议头，否则报错 $apiName$:fail invalid imgUrl
		page:"/index/page.html", //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面
	},
}, function(res) {
	if (res.err_msg == 'sendChatMessage:ok') {
		//发送成功
	}
})

这里的分享消息我并未使用这么多只是简单的发送了一个文本内容，这里使用不到，大家可以自行删除。

步骤三：通过agentConfig注入应用的权限

当我打开基础接口说明时，发现这里有一个 wx.agentConfig 方法等着我，它的作用是什么呢，文档里给出了我们答案。

还是先附上代码。

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('版本过低请升级')
        }
    }
});

agentConfig的作用
config注入的是企业的身份与权限，而agentConfig注入的是应用的身份与权限。尤其是当调用者为第三方服务商时，通过config无法准确区分出调用者是哪个第三方应用，而在部分场景下，又必须严谨区分出第三方应用的身份，此时即需要通过agentConfig来注入应用的身份信息。

有人会问道 config 和 agentConfig 不是一样的嘛，为什么需要调用两遍。答案来了

这里我直接附上链接—— wx.agentConfig - 接口文档 - 企业微信开发者中心

不过这里呢我还是直接将两个方法都使用了，万一后续开发的时候需要呢，当我们把这两个方法调用成功以后呢，需要在 agentConfig 方法的 success 成功的回调中去调用我们其他的方法。

今天对企业微信第三方应用的开发就讲到这里。如有问题请多多指教。

前端H5企业微信第三方应用开发浅谈（一）

前言

准备

代码

猜你喜欢