企业微信侧边栏本地开发调试

前言

企业微信侧边栏在本地开发调试时，我们需要用到官方提供的API，进行调用查看效果。而企业微信侧边栏后台配置不能使用IP配置，原因如下：

需在企业微信后台配置可信域名 （如 https://yourdomain.com）用于授权
本地开发无法直接用 localhost 或 127.0.0.1，因为企业微信会校验域名是否在白名单内。而本地调试只能在企业微信客户端中调试，不然接口会返回类似 config:ok, 各种 js api false，false 表示 wx.xxx 接口不可用，在当前环境不可用。

下面我们就介绍两种方法，如何在本地开发调试侧边栏：

方案1：使用 hosts + HTTP
- 修改 hosts 文件，将测试域名指向本地
方案2：使用whistle全局代理（推荐）
- 一键修改，无需额外配置
方案3：内网穿透工具（不作介绍）
- 使用 ngrok、localtunnel 或 frp 生成临时公网 HTTPS 域名但是需要配置到可信域名

1. 实战操作

下面以windows为例，进行实际操作修改，mac同理。

1.1 使用 `hosts` + HTTP

使用此种方式，我们需要做以下几步：

项目使用域名在本地启动

如果是vue项目webpack打包，我们可以通过vue.config.js中的devServer配置host和port，具体配置如下：

js 复制代码

  devServer: {
    host: http:xxx.xxx.com,// 需要配置的域名
    port: 80,
  },

修改本地host文件

windows地址：C:\Windows\System32\drivers\etc\hosts,需要添加一行配置，如下：

复制代码

127.0.0.1 xxx.xxx.com

企业微信后台配置侧边栏地址链接

登录企业微信后台后，企业微信后台->应用管理->应用管理->自建，找到你对应创建的自建应用，点击进去，点击配置到聊天工具栏, 配置页面，这个页面填本地页面地址如：http:xxx.xxx.com/demo。

打开企业微信，注意：只有点击外部联系人才会出现，这样就可以本地开发了。

1.2 使用whistle全局代理

使用whistle进行代理，本地项目不需要做改动。例如项目启动后默认地址为 http://localhost:8080。

下面进行主要操作步骤：

全局安装whistle安装包

npm install -g whistle
启用whistle

sql 复制代码

 w2 start

设置全局代理

这里可以手动设置，也可以自动设置，推荐自动设置。自动设置命令

复制代码

w2 proxy

默认开启代理服务器

打开http://127.0.0.1:8899/#rules设置代理规则

xxx.xxx.com 127.0.0.1:80

如需要https需下载证书

企业微信后台配置步骤相同

1.3 开发效果

2. 开发调试额外技巧

客户端调试：

企业微信Windows版本调试:

按快捷键 ctrl + alt + shift + D，进入调试模式；
在需要调试的页面上点击右键，点"开发者工具"，进入调试模式。

企业微信Mac版本调试：

按下command+shift+control+D进入调试模式
调试->浏览器、webView相关->开启webView元素审查
内置浏览器右键

3. 总结

最后总结一下，企业微信侧边栏本地开发必须使用域名（不能直接用 localhost），可以通过 Whistle 代理 和设置host ，推荐Whistle。设置比较简单，项目不需要更改设置，具体看个人使用习惯。

如有错误，请指正O^O!

企业微信本地开发