企业微信侧边栏本地开发及环境代理

1,848 阅读2分钟

首先理清几个概念很重要。

企业微信开发

企业微信开发只能在企业微信中调试,不然接口会返回类似 config:ok, 各种 js api false,false 表示 wx.xxx 接口不可用,在当前环境不可用。

调试

那就涉及到在企业微信中怎么调试的问题了,以下是官方提供的调试方法:

developer.work.weixin.qq.com/document/pa…

包括 Windows 及 Mac,开启调试方式不同。

wx.agentConfig 调用似乎不会在调试工具显示。

Mock

可以 Mock 数据在浏览器中开发。目前这块还有待实践。

可信域名

可信域名是前后端接口调用时都使用的域名,也就是前端页面的地址和后端接口地址域名必须都为可信域名。

可信域名设置方式如下:

企业微信管理后台 - 应用管理 - 开发者接口 - 网页授权及 JS-SDK - 设置可信域名:

image.png

签名

签名是由后端接口生成的,同时生成 wx.config 及 wx.agentConfig 所需其他参数:

接口传参为 URL,参考:developer.work.weixin.qq.com/document/pa…

所以本地开发需要将地址映射为开发环境接口地址。也就是使 testxxx.aaa.com 为本地。

代理

Whistle

wproxy.org/whistle/ins…

$ npm install -g whistle
$ w2 start
$ w2 restart
$ w2 stop
$ w2 proxy
$ w2 proxy off

启动之后,在 http://127.0.0.1:8899/#rules 配置代理规则,HTTPS 下载安装证书。

前端项目代理

本地开发为了解决跨域问题而代理。

注意不同环境

  • 开发环境
  • 生产环境

环境不同,企业微信设置的可信域名不同。前端接口访问也不同。

开发环境

代理开发环境:test 到本地:127.0.0.1:5174

https://test.aaa.com http://127.0.0.1:5174

常见问题

以下如不说明,全是在企业微信中。

wx.agentConfig 响应 fail_no permission?

jsApiList 需要包含所有要调用的微信接口。

wx.invoke("getCurExternalContact") 等仿佛没有执行?

相关接口需要在企业微信中调用。

wx.invoke("sendChatMessage")发送小程序,图片不能显示?

上传到自己的域名。

剪切板功能不能使用?

必须使用企业微信的剪切板 api: developer.work.weixin.qq.com/document/pa…

wx.config 报错,后续会继续调用 wx.agentConfig

{
  "errMsg": "wx.config:ok",
  "checkResult": {
    "getCurExternalContact": false,
    "setClipboardData": true,
    "sendChatMessage": false,
    "getCurExternalChat": false,
    "navigateToAddCustomer": false,
    "getContext": false,
    "agentConfig": true
  }
}

image.png

发生在开发环境,vite 项目代理的地址为https://testxxx.aaa.com/api/work-wechat 企业微信管理后台的可信域名为prodxxx.aaa.com。这样因为不属于可信域名,导致微信的接口不可用。

企业微信页面报错:Whistle connect ECONNREFUSED 127.0.0.1:5174

将代理的本地地址由 http://127.0.0.1:5174 改为 http://localhost:5174 试试,参考:juejin.cn/post/714759…

总结

  • 生产环境,vite 项目前端不使用代理,打包直接对应生产地址。
  • 开发环境,确定企业微信管理后台设置的可信域名,然后本地开发环境 Whistle 代理那个域名,前端同时解决跨域问题。同时确定后端的接口地址。