需求概述
做一个活动页面,要求:用户在页面录音或者输入文本,然后生成一个H5页面,送出个性化的元旦祝福(新年祝福)。
环境
- 服务端使用thinkjs2.0
- 申请微信认证服务号,拥有获取用户信息和网页授权权限,在【接口权限】中查看
依赖
- 常规的zepto等js文件和css
- 微信JS-SDK
- 使用了一个node_module,用来处理服务端的微信接口wechat-api 中文文档
分解需求
- 第一步:授权
- 第二步:用户录音或者是输入文本
- 第三步:获取用户昵称或者头像信息,然后生成用户独有页面
授权
微信官方文档 本身这个逻辑很简单,但是没想到在这里竟然遇到了问题。这里需要注意的是:
- 授权回调页面域名,只能是线上地址,并且只能配置一个,所以需要需要一个线上的域名做跳转,这样保证开发的时候一样可以使用授权,基本上填写一个appId和回调地址即可。测试环境可以使用测试公众号,防止一些接口调用限制影响到线上
- 授权后URL中会返回code信息,我们需要用code信息换取网页授权token,在以后的接口中使用,按照文档参数传递即可。
注:这里遇到的问题是:invalid code,这个原因可能因为code多次使用导致的,原则这个code只有一次有效性,建议使用服务端302的形式,一进入需要授权的页面就先授权,防止使用前端JS形式导致code失效
输入或者录制用户想说的话
文本的就比较简单了,这里就不赘述纯功能逻辑了。录音的话我们需要前端通过微信的JS-SDK调用相关接口实现,主要过程如下:
- 录音:wx.startRecord();
- 录音后上传语音:首先需要监听停止录音或者是异常录音的情况,在这里做音频上传,可以通过wx.stopRecord()完成或者是一分钟没有停止的话wx.onVoiceRecordEnd({complete:function(){}});调用wx.uploadVoice()上传音频到微信服务器。这里需要注意的是:这里没有实体的音频文件是微信自己的一套规则,可以通过下载资源接口下载音频。
- 本地用户预览自己录制的语音:wx.playVoice();
- 可以使用wx.translateVoice()转化为文本信息
- 下载音频,需要之前授权的access_token和音频ID,相关文档,可以使用node模板的接口下载,api_media下载接口。
- 微信服务器下载音频文件.amr格式的,需要做格式转换。我这里用的是ffmpeg-node做的音频格式转换,转换后上传静态资源服务器。
- 我们需要把下载的音频托管到静态资源服务器上,比如说七牛。可以使用七牛node模块。
注:这里遇到的问题是:invalid media_id,起初以为是微信的server_id传的有误,后来发现是因为前端SDK的公众号和服务端的公众号使用的不一致导致的
获取用户信息
通过之前的access_token加上其他已知信息就可以获取到用户信息,这里也可以使用wechat-api提供的api.getLatestToken获取最新的token信息。
至此,我们所需要的信息就都有了:用户头像和用户昵称,录音资源以及转换的文本信息,我们就可以生成具有用户相关性的页面,让用户送出自己的祝福。你也可以来这里(建议使用微信访问)为你的亲朋和好友送去你的祝福。或者直接扫码:
小结
- 分享一个wechat-api服务端服务
- 一些常见的错误信息,以及响应的处理方式
- 微信开发的一些小技巧
第一次开发整理一些思路和遇到的问题,如果有不当的地方,欢迎指正!