企微开发- H5应用

由于近期要做企微开发，但是企微文档有些简洁。过程中也遇到很多问题，还必须要在可访问的域名在企微里面才可以调试。遇到的问题都只能自己靠猜去处理，还要页面打断点，alert去调试。。开发困难，调试困难.....

所以写下此文档。给所有的企微开发人员做个参考。主要用JS-SDK开发H5应用，适用于创建多个外部群并发送消息等功能开发。

开发环境： vite+ vue3 + ts + less

1.SDK引入

1. 需要引入两个sdk文件，在index.html文件中

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

<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

2 . 生成签名

通过token生成前面。为了安全考虑，开发者 请勿 将 access_token 返回给前端。需要开发者保存在后台。所有访问企业微信api的请求由后台发起需要和后端配合，由生成JS-SDK使用权限签名算法。生成算法参考官方列子https://developer.work.weixin.qq.com/document/path/90506

后端注意：要请求两次企业微信接口，分别获取：获取企业的jsapi_ticket和获取应用的jsapi_ticket。

返回字段如下。

{
"code":200,
"msg":"success",
    data:{
    agentId:''// 企微应用的agentId
    appId: '', // 必填，企业微信的corpID
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
    }
}

2. 企微JS-SDK初始化

// 企微 JSSDK 初始化
export function qywxJssdkInit(params: any) {
  wx.config({
    beta: false,
    debug: false,
    appId: params.appId,
    timestamp: params.timestamp,
    nonceStr: params.nonceStr,
    signature: params.signature,
    jsApiList: ["onMenuShareAppMessage", "onMenuShareWechat"],
  });
  wx.ready(function (err) {
    console.log("微信sdk基础环境初始化成功");
    wxReady(params);
  });

  wx.error(function (err) {
    console.log("jWeixin.error:", err);
  });
}

// 企微环境初始化成功后再调用，否则权限注入可能失败
// 企微权限注入
function wxReady(config: any) {
  console.log("执行企业微信初始化操作！", config);
  wx.agentConfig({
    corpid: config.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
    agentid: config.agentId, // 必填，企业微信的应用id （e.g. 1000247）
    timestamp: config.timestamp, // 必填，生成签名的时间戳
    nonceStr: config.nonceStr, // 必填，生成签名的随机串
    signature: config.appSignature, // 必填，签名，见附录-JS-SDK使用权限