微信開發小記

需求概述

作一個活動頁面，要求：用戶在頁面錄音或者輸入文本，而後生成一個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服務端服務
• 一些常見的錯誤信息，以及響應的處理方式
• 微信開發的一些小技巧

第一次開發整理一些思路和遇到的問題，若是有不當的地方，歡迎指正！