Talking about the development of front-end H5 enterprise WeChat third-party applications (1)

foreword

At present, enterprise WeChat has been used by many companies. When in use, in order to interact with customers more conveniently and carry out related work, it will need to be redeveloped. It just so happens that the project team I am in has developed it. Next, I will give a brief explanation of the third-party application development of Enterprise WeChat.

Prepare

Development Reference—— Documentation- WeChat Enterprise Developer Center

Click Enter, then click Clients.

 After entering, many friends saw that it was related to the development of small programs, but they still couldn’t find it when they scrolled down. At this time, we need to click here, as shown in the figure:

After clicking, you will find that our third-party application development documents are at the bottom.

Here I directly put the address here, so that the programmers who see here can use it directly.

Overview- Interface Documentation- WeChat Work Developer Center

Then we go straight to the code part. dry goods

the code

Step 1: First we need to import the JS file. look at the code

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

Step 2: Inject permission verification configuration through the config interface

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接口列表，凡是要调用的接口都需要传进来
});

Pay attention, the timestamp nonceStr signature  here   needs our background colleagues to help us generate it.

jsApiList  here is to fill in the interface name we need to use, here I use two

1. Get the userid of the current external contact 

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

2. Share the message to the current session

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') {
		//发送成功
	}
})

I didn’t use so many of the shared messages here, but simply sent a text content, which is not used here, and you can delete it yourself.

Step 3: Inject application permissions through agentConfig

When I opened the basic interface description, I found that there is a wx.agentConfig  method waiting for me. What is its function, the answer is given in the document.

Still attach the code first.

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

---

The role of agentConfig
config injects the identity and permissions of the enterprise, while agentConfig injects the identity and permissions of the application. Especially when the caller is a third-party service provider, it is impossible to accurately distinguish which third-party application the caller is through config, and in some scenarios, it is necessary to strictly distinguish the identity of the third-party application. In this case, it is necessary to use agentConfig to Inject the identity information of the application.

---

Some people may ask whether config and  agentConfig are the same, why it needs to be called twice. here comes the answer

 Here I directly attach the link—  wx.agentConfig - Interface Documentation - Enterprise WeChat Developer Center

But here I still use both methods directly, in case it is needed in subsequent development, when we call these two methods successfully, we need to call our other methods in the success callback of the agentConfig method method.

That's all for today's development of enterprise WeChat third-party applications. If you have any questions, please advise.