在开发HJMarkup编辑器的时候，触屏端涉及到处理录音和图片。在微信中，就需要调用相关接口来上传图片和音频，这篇文章旨在总结HJMarkup开发过程中使用JSSDK遇到的问题及经验总结。
开发调试
因为微信JSSDK运行在微信环境下，在调用SDK之前需要在后端调接口进行鉴权。这要求调用SDK的页面必须在公众号绑定的域名下。如果采用传统的方式（前端完成开发，然后将代码上传到真实的服务器【该服务器的网站的域名在绑定的域名下】上，然后在手机上打开服务器的页面进行测试），前端每修改一次，都需要部署到服务器上。如果前端有权限操作服务器，这个还稍微好点；如果前端没有权限操作服务器，还得需要他人帮忙部署，就更加繁琐。 为了提升开发效率，可以采用如下步骤：
-
用webpack作为前端资源的打包方式，并且采用webpack-dev-server作为开发、调试环境。在开发的时候，以CommonJS规范将代码模块化。然后采用webpack将前端资源进行打包，并通过为webpack-dev-server，自动创建一个本地调试站点。采用这种方式最大的便利就是在修改源码的时候，测试页面会自动的刷新，加载修改后的资源。webpack的使用方式具体参见其官网文档。
注意： webpack-dev-server的端口为80， 如果不是80， 我们可以采用ngnix的方式，做反向代理。
-
修改hosts文件，在其中加入自定义的域名解析。如果公众号绑定的域名是abc.com那么在这个域名下的子域名都是可以通过微信认证的，我们需要在hosts中虚拟一个子域名，如wechat.abc.com。将其自定义解析到本机的IP。这样我们可以采用wechat.abc.com访问webpack-dev-server搭建的测试站点。并且也能通过微信的鉴权认证。
-
接下来是手机用户如何访问这个站点，这里我们采用代理工具。在PC上安装代理软件如fiddle或charles。
-
在手机上的网络连接上设置代理，采用PC的代理上网，这个时候PC上绑定的hosts也能在手机上生效。手机也可以访问wechat.abc.com了。
按照上述步骤操作后，每次改动都能触发webpack-dev-server编译代码，并且自动刷新访问的页面。不需要部署到真实的服务器就可以调试微信接口了。webpack-dev-server还有一个优点就是上门的资源不会有缓存，不会担心测试机器上的各种缓存问题。
录音接口
HJMarkup编辑器在交互是模仿微信的交互方式，长按开始录音，松开停止录音。在开发的时候，碰到了这样的问题：当用户第一次调用微信接口的是，微信会弹出一个申请录音权限的窗口，这个窗口会阻断后续的事件（无法触发松开录音）。录音将一直进行，知道达到最大录音时间（一分钟），微信自动停止录音。在同事的帮助下，我们采用了一个较为的讨巧方式解决这个问题：
在页面加载的时候，就去录音下，然后在2秒后自动停止录音。在上传录音的时候，区分这个hack。主动触发那个申请权限的提示框，避免在录音的时候弹出这个提示款。
微信有些接口不是很完善，如上面的情况，微信没有提供申请录音权限弹出提示框的事件。在测试的时候，就发现了这样的一个bug：
当系统的录音设备被第三方app使用的时候，用户开始录音，在第一次进行这个操作的时候，微信会弹出提示信息，告知用户录音设备不可用。后面的这样的操作就不会再弹这样的信息了。更要命的是，在这样的情况下，微信的完成录音的接口中竟然也返回了这次录音的localid。事实上，这次录音是失败的。当采用这个localid调用微信的上传接口传到服务器的时候，微信会立即触发上传失败。 这样就没办法给出用户合适的提醒了。
HJMarkup编辑器在交互是先长按，开始录音，松开结束录音，这个时候，可以上传录音，播放录音，重录录音。交互中还有播放，停止播放等交互。在开发的时候，将状态作为跳转的依据来进行界面的交互。在调用微信接口的时候，按照情况，在不同的状态间跳转。
图片接口
在开发上传图片等时候，也需要注意下，图片必须一个一个的逐个上传。 在实现的时候，我们是这样处理的：将选中的多张图片放在数组中，取出第一张图片（采用shift方法，这样数组中的数据会自动移除第一张图片）调用微信接口上传，在上传结束后，再递归调用前面的逻辑。
以上就是我们在HJMarkup编辑器开发工作中关于调试，以及使用微信JSSKD中录音及图片相关功能遇到的一些问题总结。附上微信接口常见的问题供大家参考。