微信 JS-SDK 开发实现录音和图片上传功能

title: 微信 JS-SDK 开发实现录音和图片上传功能

date: -08-13 19:00:00

toc: true #是否显示目录 table of contents

tags:

WeiXinH5

categories: C#.NET

typora-root-url: ..

现有一个 .NET 开发的 Wap 网站项目，需要用到录音和图片上传功能。目前该网站只部署在公众号中使用，并且手机录音功能的实现只能依赖于微信的接口（详见另一篇文章《HTML5 实现手机原生功能》)，另外采用即时拍照来上传图片的功能也只能调用微信接口才能实现，所以本文简要地记录下后端 .NET 、前端 H5 开发的网站如何调用微信接口实现录音和即时拍照上传图片功能。

准备工作

微信公众平台配置

1、（必须配置）打开微信公众平台-公众号设置-功能设置-JS接口安全域名 ，按提示配置。需要将网站发布到服务器上并绑定域名。加即可，也能调用成功。

JS接口安全域名

设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口。

注意事项：

1、可填写三个域名或路径（例：或/mp），需使用字母、数字及“-”的组合，不支持IP地址、端口号及短链域名。

2、填写的域名须通过ICP备案的验证。

3、 将文件 MP_verify_iBVYET3obIwgppnr.txt（点击下载）上传至填写域名或路径指向的web服务器（或虚拟主机）的目录（若填写域名，将文件放置在域名根目录下，例如/MP_verify_iBVYET3obIwgppnr.txt；若填写路径，将文件放置在路径目录下，例如/mp/MP_verify_iBVYET3obIwgppnr.txt），并确保可以访问。

4、 一个自然月内最多可修改并保存三次，本月剩余保存次数：3

2、打开微信公众平台-公众号设置-功能设置-网页授权域名，按提示配置（这一步在当前开发需求中可能不需要）。

3、（必须配置）打开微信公众平台-基本配置-公众号开发信息-IP白名单，配置网页服务器的公网IP（通过开发者IP及密码调用获取access_token 接口时，需要设置访问来源IP为白名单）。

安装微信开发者工具，并绑定开发者微信号

微信开发者工具方便公众号网页和微信小程序在PC上进行调试，下载地址 ，说明文档 。

打开微信公众平台-开发者工具-Web开发者工具-绑定开发者微信号，将自己的微信号绑定上去（所绑定的微信号要先关注“公众平台安全助手”，绑定后可在此查看绑定记录），即可进行调试。若未绑定，则在打开公众号网页的时候，会报错“未绑定网页开发者”。打开微信开发者工具，按提示配置。

具体实现步骤

参考微信公众平台技术文档，其中的《附录1-JS-SDK使用权限签名算法》（关于授权的文档找不到了）。

1、先要获取 access_token，并缓存到Redis

/// <summary>/// 获取AccessToken/// 参考 https://mp./wiki?t=resource/res_main&id=mp1421140183/// </summary>/// <returns>access_toke</returns>public string GetAccessToken(){var cache = JCache<string>.Instance;var config = Server.ServerManage.Config.Weixin;// 获取并缓存 access_tokenstring access_token = cache.GetOrAdd("access_token", "weixin", (i, j) =>{var url = "https://api./cgi-bin/token";// 注意这里不是用"https://api./sns/oauth2/access_token"var result = HttpHelper.HttpGet(url, "appid=" + config.AppId + "&secret=" + config.AppSecret + "&grant_type=client_credential");// 正常情况返回 {"access_token":"ACCESS_TOKEN","expires_in":7200}// 错误时返回 {"errcode":40013,"errmsg":"invalid appid"}var token = result.FormJObject();if (token["errcode"] != null){throw new JException("微信接口异常access_token：" + (string)token["errmsg"]);}return (string)token["access_token"];}, new TimeSpan(0, 0, 7200));return access_token;}

2、通过 access_token 获取 jsapi_ticket，并缓存到Redis

/// <summary>/// 获取jsapi_ticket/// jsapi_ticket是公众号用于调用微信JS接口的临时票据。/// 正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。/// 由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。/// </summary>public string GetJsapiTicket(){var cache = JCache<string>.Instance;var config = Server.ServerManage.Config.Weixin;// 获取并缓存 jsapi_ticketstring jsapi_ticket = cache.GetOrAdd("jsapi_ticket", "weixin", (k, r) =>{var access_token = GetAccessToken();var url = "https://api./cgi-bin/ticket/getticket";var result = HttpHelper.HttpGet(url, "access_token=" + access_token + "&type=jsapi");// 返回格式 {"errcode":0,"errmsg":"ok","ticket":"字符串","expires_in":7200}var ticket = result.FormJObject();if ((string)ticket["errmsg"] != "ok"){throw new JException("微信接口异常ticket：" + (string)ticket["errmsg"]);}return (string)ticket["ticket"];}, new TimeSpan(0, 0, 7200));return jsapi_ticket;}

3、用 SHA1 加密后，返回数据到页面上

/// <summary>/// 微信相关的接口/// </summary>public class WeixinApi{/// <summary>/// 获取微信签名/// </summary>/// <param name="url">请求的页面地址</param>/// <param name="config">微信配置</param>/// <returns></returns>public static object GetSignature(string url){var config = Park.Server.ServerManage.Config.Weixin;var jsapi_ticket = GetJsapiTicket();// SHA1加密// 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串var obj = new{jsapi_ticket = jsapi_ticket,//必须与wx.config中的nonceStr和timestamp相同noncestr = JString.GenerateNonceStr(),timestamp = JString.GenerateTimeStamp(),url = url, // 必须是调用JS接口页面的完整URL（location.href.split('#')[0]）};var str = $"jsapi_ticket={obj.jsapi_ticket}&noncestr={obj.noncestr}&timestamp={obj.timestamp}&url={obj.url}";var signature = FormsAuthentication.HashPasswordForStoringInConfigFile(str, "SHA1");return new{appid = config.AppId,noncestr = obj.noncestr,timestamp = obj.timestamp,signature = signature,};}}

/// <summary>/// 微信JS-SDK接口/// </summary>public class WeixinController : BaseController{/// <summary>/// 获取微信签名/// </summary>/// <param name="url">请求的页面地址</param>/// <returns>签名信息</returns>[HttpGet]public JResult GetSignature(string url){return JResult.Invoke(() =>{return WeixinApi.GetSignature(url);});}}

微信 JS 接口签名校验工具

4、Ajax请求签名数据，并配置到 wx.config，进而实现对微信录音功能的调用。

/*-----------------------调用微信JS-SDK接口的JS封装--------------------------------*/if (Park && Park.Api) {Park.Weixin = {// 初始化配置initConfig: function (fn) {// todo: 读取本地wx.config信息，若没有或过期则重新请求var url = location.href.split('#')[0];Park.get("/Weixin/GetSignature", { url: url }, function (d) {Park.log(d.Data);if (d.Status) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: d.Data.appid,// 必填，公众号的唯一标识nonceStr: d.Data.noncestr,// 必填，生成签名的随机串timestamp: d.Data.timestamp,// 必填，生成签名的时间戳signature: d.Data.signature,// 必填，签名，见附录1jsApiList: [ // 必填，需要使用的JS接口列表，所有JS接口列表见附录2'checkJsApi', 'translateVoice', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice','uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', ]});wx.ready(function () {fn && fn();});}});},// 初始化录音功能initUploadVoice: function (selector, fn) {var voiceUpload = false; // 是否可上传（避免60秒自动停止录音和松手停止录音重复上传）// 用localStorage进行记录，之前没有授权的话，先触发录音授权，避免影响后续交互if (!localStorage.allowRecord || localStorage.allowRecord !== 'true') {wx.startRecord({success: function () {localStorage.allowRecord = 'true';// 仅仅为了授权，所以立刻停掉wx.stopRecord();},cancel: function () {alert('用户拒绝授权录音');}});}var btnRecord = $("" + selector);btnRecord.on('touchstart', function (event) {event.preventDefault();btnRecord.addClass('hold');startTime = new Date().getTime();// 延时后录音，避免误操作recordTimer = setTimeout(function () {wx.startRecord({success: function () {voiceUpload = true;},cancel: function () {alert('用户拒绝授权录音');}});}, 300);}).on('touchend', function (event) {event.preventDefault();btnRecord.removeClass('hold');// 间隔太短if (new Date().getTime() - startTime < 300) {startTime = 0;// 不录音clearTimeout(recordTimer);alert('录音时间太短');} else { // 松手结束录音if(voiceUpload){voiceUpload = false;wx.stopRecord({success: function (res) {// 上传到本地服务器wxUploadVoice(res.localId, fn);},fail: function (res) {alert(JSON.stringify(res));}});}}});// 微信60秒自动触发停止录音wx.onVoiceRecordEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {voiceUpload = false;alert("录音时长不超过60秒");// 上传到本地服务器wxUploadVoice(res.localId, fn);}});},// 初始化图片功能initUploadImage: function (selector, fn, num) {// 图片上传功能// 参考 /fengqingtao/article/details/51469705// 本地预览及删除功能参考 /clwhxhn/p/6688571.html$("" + selector).click(function () {wx.chooseImage({count: num || 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {//微信返回了一个资源对象//localIds = res.localIds;//把图片的路径保存在images[localId]中--图片本地的id信息，用于上传图片到微信浏览器时使用// 上传到本地服务器wxUploadImage(res.localIds, 0, fn);}});});},}}//上传录音到本地服务器，并做业务逻辑处理function wxUploadVoice(localId, fn) {//调用微信的上传录音接口把本地录音先上传到微信的服务器//不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器wx.uploadVoice({localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {//把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。$.ajax({url: Park.getApiUrl('/Weixin/DownLoadVoice'),type: 'get',data: res,dataType: "json",success: function (d) {if (d.Status) {fn && fn(d.Data);}else {alert(d.Msg);}},error: function (xhr, errorType, error) {console.log(error);}});},fail: function (res) {// 60秒的语音这里报错：{"errMsg":"uploadVoice:missing arguments"}alert(JSON.stringify(res));}});}//上传图片到微信，下载到本地，并做业务逻辑处理function wxUploadImage(localIds, i, fn) {var length = localIds.length; //本次要上传所有图片的数量wx.uploadImage({localId: localIds[i], //图片在本地的idsuccess: function (res) {//上传图片到微信成功的回调函数 会返回一个媒体对象 存储了图片在微信的id//把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。$.ajax({url: Park.getApiUrl('/Weixin/DownLoadImage'),type: 'get',data: res,dataType: "json",success: function (d) {if (d.Status) {fn && fn(d.Data);}else {alert(d.Msg);}i++;if (i < length) {wxUploadImage(localIds, i, fn);}},error: function (xhr, errorType, error) {console.log(error);}});},fail: function (res) {alert(JSON.stringify(res));}});};

// 页面上调用微信接口JSPark.Weixin.initConfig(function () {Park.Weixin.initUploadVoice("#voice-dp", function (d) {// 业务逻辑处理（d为录音文件在本地服务器的资源路径）});Park.Weixin.initUploadImage("#img-dp", function (d) {// 业务逻辑处理（d为图片文件在本地服务器的资源路径）$("#img").append("<img src='" + Park.getImgUrl(d) + "' />");})});

5、微信录音完成、图片上传成功后，在后端下载录音、图片到本地服务器

// 即第4步中的'/Weixin/DownLoadVoice'和'/Weixin/DownLoadImage'方法的后端实现/// <summary>/// 微信JS-SDK接口控制器/// </summary>public class WeixinController : BaseController{/// <summary>/// 下载微信语音文件 /// </summary>/// <link>/hbh123/archive//08/15/7368251.html</link>/// <param name="serverId">语音的微信服务器端ID</param>/// <returns>录音保存路径</returns>[HttpGet]public JResult DownLoadVoice(string serverId){return JResult.Invoke(() =>{return WeixinApi.GetVoicePath(serverId);});}/// <summary>/// 下载微信语音文件 /// </summary>/// <link>/fengqingtao/article/details/51469705</link>/// <param name="serverId">图片的微信服务器端ID</param>/// <returns>图片保存路径</returns>[HttpGet]public JResult DownLoadImage(string serverId){return JResult.Invoke(() =>{return WeixinApi.GetImagePath(serverId);});}}

/// <summary>/// 微信相关的接口实现类/// </summary>public class WeixinApi{/// <summary>/// 将微信语音保存到本地服务器/// </summary>/// <param name="serverId">微信录音ID</param>/// <returns></returns>public static string GetVoicePath(string serverId){var rootPath = Park.Server.ServerManage.Config.ResPath;string voice = "";//调用downloadmedia方法获得downfile对象Stream downFile = DownloadFile(serverId);if (downFile != null){string fileName = Guid.NewGuid().ToString();string path = "\\voice\\" + DateTime.Now.ToString("yyyyMMdd");string phyPath = rootPath + path;if (!Directory.Exists(phyPath)){Directory.CreateDirectory(phyPath);}// 异步处理（解决当文件稍大时页面上ajax请求没有返回的问题）Task task = new Task(() =>{//生成amr文件var armPath = phyPath + "\\" + fileName + ".amr";using (FileStream fs = new FileStream(armPath, FileMode.Create)){byte[] datas = new byte[downFile.Length];downFile.Read(datas, 0, datas.Length);fs.Write(datas, 0, datas.Length);}//转换为mp3文件string mp3Path = phyPath + "\\" + fileName + ".mp3";JFile.ConvertToMp3(rootPath, armPath, mp3Path);});task.Start();voice = path + "\\" + fileName + ".mp3";}return voice;}/// <summary>/// 将微信图片保存到本地服务器/// </summary>/// <param name="serverId">微信图片ID</param>/// <returns></returns>public static string GetImagePath(string serverId){var rootPath = Park.Server.ServerManage.Config.ResPath;string image = "";//调用downloadmedia方法获得downfile对象Stream downFile = DownloadFile(serverId);if (downFile != null){string fileName = Guid.NewGuid().ToString();string path = "\\image\\" + DateTime.Now.ToString("yyyyMMdd");string phyPath = rootPath + path;if (!Directory.Exists(phyPath)){Directory.CreateDirectory(phyPath);}//生成jpg文件var jpgPath = phyPath + "\\" + fileName + ".jpg";using (FileStream fs = new FileStream(jpgPath, FileMode.Create)){byte[] datas = new byte[downFile.Length];downFile.Read(datas, 0, datas.Length);fs.Write(datas, 0, datas.Length);}image = path + "\\" + fileName + ".mp3";}return image;}/// <summary>/// 下载多媒体文件/// </summary>/// <param name="media_id"></param>/// <returns></returns>public static Stream DownloadFile(string media_id){var access_token = GetAccessToken();string url = "http://file.api./cgi-bin/media/get?";var action = url + $"access_token={access_token}&media_id={media_id}";HttpWebRequest myRequest = WebRequest.Create(action) as HttpWebRequest;myRequest.Method = "GET";myRequest.Timeout = 20 * 1000;HttpWebResponse myResponse = myRequest.GetResponse() as HttpWebResponse;var stream = myResponse.GetResponseStream();var ct = myResponse.ContentType;// 返回错误信息if (ct.IndexOf("json") >= 0 || ct.IndexOf("text") >= 0){using (StreamReader sr = new StreamReader(stream)){// 返回格式 {"errcode":0,"errmsg":"ok"}var json = sr.ReadToEnd().FormJObject();var errcode = (int)json["errcode"];// 40001 被其他地方使用 || 42001 过期if (errcode == 40001 || errcode == 42001) {// 重新获取tokenvar cache = mon.JCache.Instance;cache.Remove("access_token", "weixin");return DownloadFile(media_id);}else{throw new JException(json.ToString());}}}// 成功接收到数据else{Stream MyStream = new MemoryStream();byte[] buffer = new Byte[4096];int bytesRead = 0;while ((bytesRead = stream.Read(buffer, 0, buffer.Length)) != 0)MyStream.Write(buffer, 0, bytesRead);MyStream.Position = 0;return MyStream;}}}

/// <summary>/// 文件处理类/// </summary>public class JFile{/// <summary>/// 音频转换/// </summary>/// <link>/hbh123/p/7368251.html</link>/// <param name="ffmpegPath">ffmpeg文件目录</param>/// <param name="soruceFilename">源文件</param>/// <param name="targetFileName">目标文件</param>/// <returns></returns>public static string ConvertToMp3(string ffmpegPath, string soruceFilename, string targetFileName){// 需事先将 ffmpeg.exe 放到 ffmpegPath 目录下string cmd = ffmpegPath + @"\ffmpeg.exe -i " + soruceFilename + " -ar 44100 -ab 128k " + targetFileName;return ConvertWithCmd(cmd);}private static string ConvertWithCmd(string cmd){try{System.Diagnostics.Process process = new System.Diagnostics.Process();process.StartInfo.FileName = "cmd.exe";process.StartInfo.UseShellExecute = false;process.StartInfo.CreateNoWindow = true;process.StartInfo.RedirectStandardInput = true;process.StartInfo.RedirectStandardOutput = true;process.StartInfo.RedirectStandardError = true;process.Start();process.StandardInput.WriteLine(cmd);process.StandardInput.AutoFlush = true;Thread.Sleep(1000);process.StandardInput.WriteLine("exit");process.WaitForExit();string outStr = process.StandardOutput.ReadToEnd();process.Close();return outStr;}catch (Exception ex){return "error" + ex.Message;}}}

参考文章

微信jssdk录音功能开发记录

微信语音上传下载

ffmpeg.exe 下载地址

报错及解决方案

1、{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest hint: [2HYQIa0031ge10] "}

情况1：获取到 access_token 后，去获取 jsapi_ticket 时报错。

access_token 有两种。第一种是全局的和用户无关的access_token, 用 appid 和 appsecret 去获取（/cgi-bin/token）。第二种是和具体用户有关的，用 appid 和 appsecre 和 code 去获取 （/sns/oauth2/access_token）。这里需要的是第一种。

情况2：完成配置，发起录音下载录音到本地时报错。

原因：用同一个appid 和 appsecret 去获取 token，在不同的服务器去获取，导致前一个获取的token失效。解决方案：在下载录音到本地时，过滤报错信息，若为40001错误，则重新获取token。

2、{"errMsg":"config:fail, Error: invalid signature"}、{"errMsg":"startRecord:fail, the permission value is offline verifying"}

获取签名，并配置到 wx.config 之后，同时不报这两个错误信息。

解决方案：生成的签名有误，注意各个签名参数的值和生成字符串时的顺序。

3、{"errcode":40007,"errmsg":"invalid media_id hint: [7PNFFA01722884]"}

在微信开发者工具中调试，上传录音的方法中从微信下载录音报错。

解决方案：在微信web开发者工具中调试会有这个问题，直接在微信调试则无此问题。

4、{"errMsg":"uploadVoice:missing arguments"}

录制60秒的语音自动停止后，上传语音到微信服务器报错，待解决。