首先理清几个概念很重要。
企业微信开发
企业微信开发只能在企业微信中调试,不然接口会返回类似 config:ok, 各种 js api false,false 表示 wx.xxx 接口不可用,在当前环境不可用。
调试
那就涉及到在企业微信中怎么调试的问题了,以下是官方提供的调试方法:
developer.work.weixin.qq.com/document/pa…
包括 Windows 及 Mac,开启调试方式不同。
wx.agentConfig 调用似乎不会在调试工具显示。
Mock
可以 Mock 数据在浏览器中开发。目前这块还有待实践。
可信域名
可信域名是前后端接口调用时都使用的域名,也就是前端页面的地址和后端接口地址域名必须都为可信域名。
可信域名设置方式如下:
企业微信管理后台 - 应用管理 - 开发者接口 - 网页授权及 JS-SDK - 设置可信域名:
签名
签名是由后端接口生成的,同时生成 wx.config 及 wx.agentConfig 所需其他参数:
接口传参为 URL,参考:developer.work.weixin.qq.com/document/pa…
所以本地开发需要将地址映射为开发环境接口地址。也就是使 testxxx.aaa.com 为本地。
代理
Whistle
$ 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
}
}
发生在开发环境,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 代理那个域名,前端同时解决跨域问题。同时确定后端的接口地址。