1）在public的html文件中引入

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

2）在package.json文件中配置js-sha1（在需要的页面中引入或引入全局变量中）

2.分享消息到当前会话时，必须先成功调用agentConfig, 调用时需要调用后台接口获取signature（权限签名）

调用后台接口获取signature和调用agentConfig

 getAppJsapiTicket().then(res =>{ // 调用后台接口
      if(res.success){
        this.ticket = res.data // 权限签名
        this.newTimeStamp = String(new Date().getTime()).substr(0, 10), // 10位数的时间戳
      // 当前网页的 URL（可以为本地局域网网址），不包含 # 及其后面部分
      this.Url = String(location.href),
      this.sha1 = require('js-sha1'),
        let verifyStr = `jsapi_ticket=${this.ticket}&noncestr=${this.nonceStr}&timestamp=${this.newTimeStamp}&url=${this.Url}`
        let signature = this.sha1(verifyStr)
        wx.agentConfig({
          corpid: config.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: config.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: this.newTimeStamp, // 必填，生成签名的时间戳
          nonceStr: this.nonceStr, // 必填，生成签名的随机串
          signature, // 必填，签名，JS-SDK使用权限签名算法
          jsApiList: ['getContext','shareToExternalContact','sendChatMessage'], //你要调用的sdk接口必填
          success: function() {
           wx.invoke('getContext', { // 判断是否是聊天工具栏
              }, function(res){
                if(res.err_msg == "getContext:ok"){
                  if (res.entry === 'single_chat_tools') { 
                     wx.invoke('sendChatMessage', {  // 为聊天工具栏时
                        msgtype:"text", //消息类型，必填
                        enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
                        text: {
                          content: value, //文本内容(url地址)
                        },
                     }, function(res) {
                        if (res.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          console.log("发送成功")
                        }
                      })
                  }else {
                    wx.invoke("shareToExternalContact", { // 不是聊天工具栏时调用接口
                      text: {
                            content: url,    // 文本内容(url地址)
                      },
                    },function(res) {
                      if (res.err_msg == "shareToExternalContact:ok") {
                        console.log("成功了")
                      }
                    })
                  }
                  // entry  = res.entry ; //返回进入H5页面的入口类型，目前有normal、contact_profile、                single_chat_tools、group_chat_tools、chat_attachment
                }else {
                  //错误处理
                }
              });
          },
          fail:function(res) {
            if(res.errMsg.indexOf("function not exist") > -1) {
                alert("版本过低请升级"``);
            }
          },
          });
      }
    })

注释：

1.调用sendChatMessage接口可从聊天工具栏或附件栏打开的页面中向当前会话发送消息，消息格式支持文本(“text”)，图片(“image”)，视频(“video”)，文件(“file”)，H5(“news”）和小程序(“miniprogram”)

2.调用getContext返回进入H5页面的入口类型，目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachment

3.调用selectExternalContact将唤起该成员里所有的外部联系人列表，获取员工选择的外部联系人的userid（缺点：一天只能发一次信息给客户）

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

调用所有接口时，必须先成功调用agentConfig

5. 进行 agentConfig

无论是微信、企业微信的内置浏览器还是第三方浏览器，都需要通过wx.agentConfig登记第三方应用的身份信息。

需要注意，在第三方浏览器中调用 wx.agentConfig 前不需要进行 wx.config。

注意：在企业微信客户端的页面上，进行 agentConfig 的调用，必须要等 wx.config 完成后才调用（即 wx.config 的成功回调）

参考地址：developer.work.weixin.qq.com/document/pa…

2-1.微信自建应用审批流程

1.先配置和引入文件（同上）

2.微信自建、第三方应用：发起审批、查看审批详情（调用***thirdPartyOpenPage* ** 审批流程引擎接口）

(必须先成功调用agentConfig, 调用时需要调用后台接口获取signature（权限签名）再调用thirdPartyOpenPage )

 getAppJsapiTicket().then(res =>{
      if(res.success){
        this.ticket = res.data // 权限签名
        getApprovalData({rate: ''}).then(res =>{ // 获取发起审批时需要的参数
            if(res.success){
                this.newTimeStamp = String(new Date().getTime()).substr(0, 10),
                this.Url = String(location.href),
                this.sha1 = require('js-sha1'),
                let verifyStr = `jsapi_ticket=${this.ticket}&noncestr=${this.nonceStr}&timestamp=${this.newTimeStamp}&url=${this.Url}`
                let signature = this.sha1(verifyStr)
                wx.agentConfig({
                    corpid: config.corpid, 
                    agentid: config.agentid, 
                    timestamp: this.newTimeStamp, 
                    nonceStr: this.nonceStr, 
                    signature, 
                    jsApiList: ['thirdPartyOpenPage'], //你要调用的sdk接口必填
                    success: function() {
                        wx.invoke('thirdPartyOpenPage', { // 审批流程引擎接口
                            oaType: res.data.oaType,// String
                            templateId: res.data.templateId,// String
                            thirdNo: res.data.thirdNo,// String  审批单号，由开发者自行定义，不可重复
                            extData: res.data.extData // 详情数据，Json格式，用于审批详情页信息展示
                        },
                        function(res) {
                            console.log(res);
                        });
                    },
                    fail:function(res) {
                        if(res.errMsg.indexOf("function not exist") > -1) {
                            alert("版本过低请升级"``);
                        }
                    },
                });
            }
          })
      }
    })

注释：

extData数据说明： extData在发起时由开发者传入，其中数据将全部展示在审批申请中： 1.开发者可利用此特性，在发起审批时，传入需要申请人、审批人、抄送人看到的信息； 2.若需用户填写数据，可在自行使用表单收集，并传入exData中，用于展示。

参考地址：developer.work.weixin.qq.com/document/pa…

在开发过程中，我们可以在 open-data 调试页面中查看当前浏览器登录的应用信息。

2.）引入 open-data SDK

在页面上引入以下SDK：（在public的html文件中引入）

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

注意：

sdk 内容是动态返回的，请严格按照上面的方式引入，不要保存到项目本地后打包引入
referrerpolicy 声明为 origin 是为了让 sdk 能够顺利识别关键域名，不能去掉

3）进行 agentConfig

无论是微信、企业微信的内置浏览器还是第三方浏览器，都需要通过wx.agentConfig登记第三方应用的身份信息。

需要注意，在第三方浏览器中调用 wx.agentConfig 前不需要进行 wx.config。

注意：在企业微信客户端的页面上，进行 agentConfig 的调用，必须要等 wx.config 完成后才调用（即 wx.config 的成功回调）

4）绑定 open-data 元素

上述步骤完成后，我们就可以通过 WWOpenData.bind 方法对页面上的元素进行绑定，完成后 SDK 将在绑定的元素上渲染出对应的开放数据：

<!-- 注意：这里的 openid 是 userid 和 departmentid 的统称 -->
<ww-open-data type="userName" openid="{{openid}}"></ww-open-data>
<script>
    WWOpenData.bind(document.querySelector('ww-open-data'))
</script>

open-data 元素上的属性请参考[2.5 元素属性](#17172/2.5 元素属性)章节。在支持 custom elements 的浏览器中，SDK 会自动对元素进行绑定。

2.open-data使用

1）open-data封装成组件

示例：

vue:

(组件部分)

<div>
    <ww-open-data :type='type' :openid='openid'></ww-open-data> <!--（open-data组件）-->
</div>

        let verifyStr = `jsapi_ticket=${this.ticket}&noncestr=${this.nonceStr}&timestamp=${this.newTimeStamp}&url=${this.Url}`
        let signature = this.sha1(verifyStr)
         wx.agentConfig({
                corpid: 'wpgetgDgAAeHjfHjSrq5k3lkTflVDxqQ', // 必填，企业微信的corpid，必须与当前登录的企业一致
                agentid: this.agentid, // 必填，企业微信的应用id （e.g. 1000247）
                timestamp: this.newTimeStamp, // 必填，生成签名的时间戳
                nonceStr: this.nonceStr, // 必填，生成签名的随机串
                signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
                jsApiList: ['selectExternalContact'], //你要调用的sdk接口必填  
            // （客户外部联系人接口selectExternalContact）
                success: function () {
                    //绑定ww-open-data组件，这样才能显示出姓名或部门名
                    window.WWOpenData.bind(document.querySelectorAll('ww-open-data'))
                },
                fail: function (res) {
                    console.log(JSON.stringify(res))
                },
            });

props:{
        //类型：分为部门和人员姓名
        type:{
            type:String
        },
        //id:人员或部门的ID
        openid:{
            type:String,
        }
    }

注意：

调用客户外部联系人接口selectExternalContact时必须调用企业ticket接口和agentConfig接口

（引用）

import openData from '@/components/openData' // 引用组件

<open-data type='userName' :openid="detail.salesOrderDto.businessPerson"></open-data>
(html引用)

参考地址：developer.work.weixin.qq.com/document/pa…

调用企业微信接口

企业微信

1-1.分享消息到当前会话

1.先配置和引入文件

2.分享消息到当前会话时，必须先成功调用agentConfig, 调用时需要调用后台接口获取signature（权限签名）

2-1.微信自建应用审批流程

1.先配置和引入文件（同上）

2.微信自建、第三方应用：发起审批、查看审批详情（调用***thirdPartyOpenPage* ** 审批流程引擎接口）

3-1.通讯录展示组件

1.使用方法

1）通过企业微信登录应用管理后台

2.）引入 open-data SDK

3）进行 agentConfig

4）绑定 open-data 元素

2.open-data使用

1）open-data封装成组件