微信公众平台JS-SDK说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
1.注册微信测试账号：测试账号具有微信相关API全部权限，不能进行消息群发
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
<label class="frm_label">注册后系统自动生成appID及</label>appsecret（用于微信验签），调用JS-SDK中部分接口需要appID
image2019-3-28_16-22-11.png
测试号相关配置
- 接口配置信息
URL：此处URL需要填写供微信验证的接口，验证时微信会通过GET方式发送附带参数echostr，原样返回即可
Token：自定义
- JS接口安全域名
域名：填写测试相关域名，仅填写域名不带http://等协议，不在此域名下的网页无法完成验签，不能调用微信相关JS-SDK，最好是已备案的域名（示例中olasharing.com已备案），否则有被微信封域名的风险
image2019-3-28_16-30-4.png
填写好以上相关信息后即完成微信测试号相关设置，扫描测试号二维码关注测试公众号后即可进行相关开发
image2019-3-28_16-31-16.png
****网页授权获取用户基本信息权限中也应设置JS接口安全域名中的域名****
本地微信开发环境搭建
-
配置HOST
打开电脑无线热点，运行 cmd 输入 ipconfig 查看无线网卡 ip，并记录
image2019-3-28_16-47-28.png
windows 系统修改 C:\Windows\System32\drivers\etc\hosts 文件，如不能修改请用 switchHosts 软件修改，或将此文件拷贝至其它位置修改完后再拷贝回去。
结尾增加一行
192.168.137.1 weixintest.olasharing.com
（192.168.137.1 为自己电脑无线热点 ip）
2. 安装 Charles 抓包工具（线上或用微信开发者工具开发略过此步骤）
安装此工具为了手机访问 http://weixintest.olasharing.com 能够走电脑 hosts 代理至本地进行微信公众号开发
打开 https://www.charlesproxy.com/download/ 下载相关版本并安装
image2019-3-28_16-53-18.png
当手机配置好代理后用浏览器打开任意网址后 charles 会弹出提示框，此时点击 Allow（允许），否则手机无法联网
注册码：
Registered Name:https://zhile.io
License Key: 48891cf209c6d32bf4
- 手机代理设置（微信开发者工具开发略过此步骤）
安装好 charles 后进入手机代理设置
下面以 MIUI 为例
依次打开：设置 → WLAN → 连接的WLAN → 网络详情 → 代理
设置手动，主机名为第一步记录的本机 WIFI 热点 ip，此处示例填写：192.168.191.1，端口号填写 charles 默认端口 8888，设置好后点击保存。
设置好后浏览器打开网页验证代理是否成功，如果设置成功 charles 会弹出是否允许的弹框，此时点击 Allow 即可访问相关网站。
image2019-3-28_16-53-18.png
未标题-1.png
4. 克隆项目模板
仓库地址：https://gitlab.olafuwu.com/olasharing_olyc/olasharing_olyc_frontend/ola-bookday
image2019-3-28_16-36-30.png
目录说明
src/api - 相关接口
src/assets - 图片等静态资源
src/components - 公用组件
src/routers - 相关路由
src/server - express及相关后端接口
src/utils - 工具类封装
src/views - 业务模块
项目说明
执行 npm run dev 运行项目，同时启动 vuecli3.0 及 express，前端项目运行在 http://weixintest.olasharing.com (默认 80 端口)，webpack 中已配置 api/wechat/* 相关接口请求转发至 3000 端口
录音功能需要 ffmpeg 支持（微信中录音格式为 AMR 需转码为 MP3 后才能在移动设备正常播放）
首先选择对应系统版本的 ffmpeg 下载 http://ffmpeg.org/download.html
首先选择对应系统版本的 ffmpeg 下载 http://ffmpeg.org/download.html
12.jpg
下载完成后将压缩包解压，并将 bin 目录添加至系统环境变量 Path 中
222.jpg
最后安装 node-ffmpeg https://github.com/damianociarla/node-ffmpeg （本项目 package.json 中已声明，不用重复安装）
npm install ffmpeg
5. 访问项目
微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，建议下载 稳定版 Stable Build
打开微信开发者工具，将模式切换为公众号网页开发，访问 http://weixintest.olasharing.com
115.png
如弹出 {"errMsg":"config:ok"} 弹框，且右侧有相关权限列表说明连接本地开发成功
116.png
手机微信访问
用草料生成二维码扫描或在任意公众号中输入网址方式打开测试页，如弹出 {"errMsg":"config:ok"} 说明访问本地页面成功
Screenshot_2019-03-28-17-13-58-920_com.tencent.mm.png
网友评论