企业微信侧边栏 react 开发模板
启动项目需要用到
agentId
和
corpId
，需要创建
.env
（目前已隐藏），示例
# .env
# 在 https://work.weixin.qq.com/wework_admin/frame#profile 这里可以找到
REACT_APP_CORP_ID=ww15111a848414e43f
# 在 https://work.weixin.qq.com/wework_admin/frame#apps 里的自建应用里可以找到
REACT_APP_AGENT_ID=1000002
代理配置这里需要用到 Whistle 这个代理工具，请在 这篇教程 里先安装 Whistle， 然后再在 这篇教程 中正确安装 HTTPS 证书（用于代理 HTTPS 流量），两个步骤请一定要正确执行！
然后在 whistle 中添加以下的代理配置，将后端路由传向本地
# 代理前端（侧边栏页面代理到本地的 3000 端口），这里要改为你自己配置H5的地址就好
//service-xxx-yyy.gz.apigw.tencentcs.com http://127.0.0.1:3000
# 代理后端（后端模板的 baseURL 该模板写死为 backend.com，这里代理到本地的 5000 端口）
//backend.com http://127.0.0.1:5000
此功能可以使得你在浏览器上直接调试侧边栏应用！
import {setInvokeResMock, setWxResMock, setMockUserId} from "wecom-sidebar-jssdk";
// Mock 当前用户 Id
const mockUserId = window._mockUserId || "YanHaiXiang";
// 可在这里自由 mock wx.invoke 的内容
const invokeResMock: Record<string, any> = window._invokeResMock || {
getCurExternalContact: {
userId: "wmuUG7CQAAOrCCMkA8cqcCm1wJrJAD6A",
// 可在这里自由 wx.fn 的内容
const wxResMock: Record<string, any> = window._wxResMock || {
agentConfig: () => {
console.log("mock agent config");
// 初始化 mockSdk
export const mockSdk = () => {
setInvokeResMock(invokeResMock);
setWxResMock(wxResMock);
setMockUserId(mockUserId)
npm run start