【企业微信】VUE项目在企微中自定义转发内容

因为工作需要，需要实现在企业微信中转发项目页面的功能。
简单分享一下，因为涉及保密问题，有些东西没办法分享，那就记录一下自己的开发过程吧。希望下次再进行类似开发时，可以有的放矢。

文章目录

实现步骤

一、安装

通过 npm 直接安装，我通过这种方式安装的。

sh 复制代码

	npm install @wecom/jssdk

安装完成后，在封装文件中引入

javascript 复制代码

	import * as ww from '@wecom/jssdk'

还可以直接使用script标签引入

html 复制代码

	<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.3.1.js"></script>

**注：**这里的sdk的版本，企微和微信有着版本的区别，不能通用。

安装完成后，SDK 会在window上定义 ww 对象：

html 复制代码

	<script>
          alert(ww.SDK_VERSION)
	</script>

二、配置数据整合（数据的初始化）

在自定义配置转发时，通常我们不可能再如企微默认一般的数据，或者图标。
在大量的页面配置时，我们可以提取一个针对 path 的公用配置文件，针对特定的特殊路由可以在页面挂载时特殊处理，通用路由使用通用规则。
我们主要针对转发页面的：标题（title）、描述（desc）、跳转链接（link）、图标链接（imgUrl）四部分进行配置管理。
最后需要我们同后端伙伴获取一些鉴权用到的重要数据，如 corpId、 agentId、以及生成签名的timestamp（时间戳）、nonceStr（随机串，其实是生成签名加密的秘钥）、signature（后端根据生成签名规则以及前边的参数生成的签名）。（这些东西前端也可以操作，考虑到数据安全的问题，一般都是后端去提供。）

三、企微鉴权，即验证签名、注册接口

这里我发现签名生成的函数，在不同操作系统下的调用，可能会出现问题，而且因为一开始我查看了很多不同版本的企业微信的开发文档，之间对于签名生成的规则一致，但是区分注入企业身份权限，还是注入应用级别的权限的部分有些理解不到位，导致一直报签名不匹配的问题。

注册信息

注册根据不同的引入，又区分不同的api。

新版：使用npm安装的包，注册信息时，都是用ww.register()方法。

javascript 复制代码

    ww.register({
      corpId: '',
      agentId:'' //必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
      jsApiList: [],
      getConfigSignature:()=>{},
      getAgentConfigSignature:()=>{}
    })

同时，在使用 getConfigSignature 和 getAgentConfigSignature进行注册时，也要注意是否与前边两个id配置的是否与系统一致。以确保初始化成功。

旧版

javascript 复制代码

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

注：（来自官网，比较重要）

JS-SDK使用权限签名算法地址：https://developer.work.weixin.qq.com/document/path/90506
config注入的是企业的身份与权限，而agentConfig注入的是应用的身份与权限。
agentConfig与config的签名算法完全一样，但是jsapi_ticket的获取方法不一样。有疑问，可查看获取应用身份的ticket
企业微信3.0.24以前的老版本（可通过企业微信UA判断版本号），在调用wx.agentConfig之前，必须确保先成功调用wx.config
当前页面url中的域名必须是在该应用中设置的可信域名。

agentConfig仅在企业微信2.5.0及以后版本支持，微信客户端不支持（微信开发者工具也不支持）

仅部分接口才需要调用agentConfig，需注意每个接口的说明
企业微信ios/mac 端如果出现 "wx.agentConfig undefined" 的报错，可将调用放在异步操作中进行

四、转发调用

1.获取「转发」按钮点击状态并自定义分享内容。

新版调用

javascript 复制代码

ww.onMenuShareAppMessage({
  title: '企业微信',
  desc: '让每个企业都有自己的微信',
  link: 'https://work.weixin.qq.com/',
  imgUrl: 'https://res.mail.qq.com/node/ww/wwmng/style/images/index_share_logo$13c64306.png',
  success() {
    // 用户确认分享后回调
  },
  cancel() {
    // 用户取消分享后回调
  }
})

使用限制
- 仅激活成员数超过 200 人且已经认证的企业才可在微信上调用
旧版调用

javascript 复制代码

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
    imgUrl: '', // 分享图标
    enableIdTrans: 1, // 是否开启id转译，不填默认为0
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    error: function(res) {
        if(res.errMsg.indexOf('no permission') > 0){
            alert('未agentConfig')
        }
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

最后

将上述的操作封装一个方法，需要在每个路由页面的加载时进行注册调用。
使用后端生成签名有问题时，可以前端自己生成，与后端对比，来找问题。
之后就交给天意了。