Vue introduces enterprise wechat JS-SDK to realize session chat function

These days, I have been working on a function to connect with enterprise wechat to achieve conversation and chat, but I found that the enterprise wechat document was not particularly detailed, and I did not find a particularly complete process in online search. During the period also stepped on a lot of pits, in this share, I hope you can less detours later.

  1. First we need to introduce the JSSDK in index.html

index.html

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

It should be reminded that the official enterprise wechat has not released the official NPM package. The official needs to use script tag to introduce it in the index.html file. NPM installed wechat JSSDK when using the session chat function will appear as follows:

openEnterpriseChat:invalid size of userids and externaluserids
Copy the code

If you have similar problems, it is recommended to use script tags to introduce. Then mount the WX object in main.js.

main.js

const wx = window.wx; // add external js to index.html to get the wX exposed by JS
Vue.$wx = Vue.prototype.$wx = wx;
Copy the code
  1. Step 2 we need to configure config:
      const account_id = this.$store.state.account_id;
      const data = qs.stringify({
        account_id,
        url: location.href.split("#") [0] // Provide the authorization URL argument to the server without the part following #
      });
 axios({  method: "POST". url: "Back-end server API". data  })  .then(res= > {  if (res.data.code == 1) {  const d = res.data.data;  this.$wx.config({  beta: true.// This must be done otherwise the JsAPI in the form of wx.invoke calls will have problems  debug: true.// Enable debug mode,  appId: d.appid, // Mandatory, unique identifier of the enterprise id. Set this parameter to corpid  timestamp: d.timestamp, // Mandatory to generate the timestamp of the signature  nonceStr: d.nonceStr, // Mandatory to generate a random string of signatures  signature: d.signature, // Mandatory, signature, see Appendix 1  jsApiList: [  "openEnterpriseChat,agentConfig,selectExternalContact"  ] // Mandatory, a list of JS interfaces to be used. See Appendix 2 for a list of all JS interfaces  });  }  })  .catch(error= > {  console.log(error);  });   // Successful verification through the ready interface processing  this.$wx.ready(function() {  All interface calls must be made after the result of the config interface. Config is an asynchronous operation on the client side, so if the relevant interface needs to be called when the page loads, it must be called in the ready function to ensure correct execution. Interfaces that are invoked only when triggered by the user can be invoked directly without being placed in the ready function.  });   this.$wx.error(function(res) {  console.log(res);  If the config information fails to be verified, the error function will be executed. For example, the verification fails due to the expiration of the signature. You can view the specific error information in the debug mode of config or in the returned res parameter.  });  this.$wx.checkJsApi({  jsApiList: ["openEnterpriseChat,"].// List of JS interfaces to be tested. See Appendix 2 for a list of all JS interfaces.  success: function(res) {  console.log(res);  // Return key-value pairs with API values true when available and false when not available  / / such as: {" checkResult ": {" chooseImage" : true}, "errMsg" : "checkJsApi: ok"}  }  }); Copy the code
  1. Next is to call the enterprise wechat API
    onSession() {
      const external_userid = this.external_userid;
      console.log("external_userid", external_userid);
      if(! external_userid) {        this.$toast("Non-enterprise wechat contacts cannot initiate a chat!");
 return;  }   this.$wx.openEnterpriseChat({  userIds: "".// Note: Select at least one of userIds and externalUserIds, and the total number of userIds+externalUserIds cannot exceed 2000.  externalUserIds: external_userid, // List of enterprise members participating in the session. The format is userid1. userid2; . , separated by a semicolon.  groupName: "".// Mandatory, session name. This parameter is simply passed the empty string "".  success: function(res) {  console.log("success", res);  / / callback  },  fail: function(res) {  console.log("fail", res);  if (res.errMsg.indexOf("function not exist") > - 1) {  alert("Version too old please upgrade");  }  }  });  }, Copy the code

This external contact can be obtained through the external contact selection interface selectExternalContact (this API requires agentConfig configuration). Or through the server API to access https://work.weixin.qq.com/api/doc/90000/90135/92113.

At this point, you can achieve the function of the chat session.