微信公众号网页开发——语音输入
2020-02-19 本文已影响0人
CondorHero
今天就来学习使用微信公众号网页开发中的JS-SDK。然后来模仿微信客户端的语音输入功能。
一、移动端网页布局
第一步简单移动端布局，主要使用了两个第三方得库：
- WeUI
- zepto
布局得效果如图：
布局源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- https://res.wx.qq.com/open/libs/weui/2.2.0/weui.min.css -->
<link rel="stylesheet" href="./vendor/weui.min.css">
<title>H5页面</title>
<style>
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
width: 100%;
}
.js_dialog{
display: none;
}
.weui-dialog {
background-color: transparent;
}
.popup{
width: 176px;
height: 176px;
margin: auto;
background: url("./vendor/images/ic_record@2x.png") no-repeat 25% center,url("./vendor/images/ic_record_ripple@2x-1.png") no-repeat 75% center;
border-radius: 12px;
background-color: rgba(0, 0, 0, .7);
}
</style>
</head>
<body>
<div class="page">
<div class="weui-form">
<div class="weui-form__text-area">
<h2 class="weui-form__title">公众号语音翻译</h2>
<div class="weui-form__desc">长按按钮进行录音，松开按钮开始翻译</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">翻译结果</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell ">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="这里是结果展示区" rows="8" id="inputText" data-id="10"></textarea>
<div class="weui-textarea-counter"><span id="counter">0</span>/1000</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form__opr-area">
<a class="weui-btn weui-btn_default" href="javascript:" id="btnRecord">按住 说话</a>
</div>
</div>
</div>
<!-- 录音图标 -->
<div class="js_dialog" id="iosDialog2">
<!-- 不要蒙层 -->
<!-- <div class="weui-mask"></div> -->
<div class="weui-dialog">
<div class="popup weui-dialog__bd" id="popup">
</div>
</div>
</div>
<script src="./vendor/zepto.min.js"></script>
<script>
const btn = $("#btnRecord");
const counter = $("#counter");
const inputText = $("#inputText");
const iosDialog2 = $("#iosDialog2");
const popup = $("#popup");
inputText.on("input",function(e,text){
counter.text(e.target.value.length);
console.log();
});
var timer = null;
btn.on("touchmove",function(e){
//这个地方可以做上滑取消
})
btn.on("touchstart",function(){
btn.text("松开 结束");
iosDialog2.css({"display":"block"});
//轮播
setTimer();
function setTimer(){
const index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let num = 0;
timer = setInterval(function(){
num++;
setTimeout(function(){
if (num >= index.length - 1) {
num = 0;
}
popup.css({
background:`url('./vendor/images/ic_record@2x.png') no-repeat 25% center, url('./vendor/images/ic_record_ripple@2x-${index[num]}.png') no-repeat 75% center`,
backgroundColor:"rgba( 0 , 0 , 0 , .7)"
});
},70);
},70);
};
},false);
btn.on("touchend",function(){
btn.text("按住 说话");
iosDialog2.css({"display":"none"});
clearInterval(timer);
},false);
</script>
</body>
</html>
二、调取微信接口的步骤
我们知道。前端在移动端开发这块，主要设计的知识是 H5。但是前端在调取手机 API，这方面能力特别弱。微信公众号提供了JS-SDK，可以弥补这个缺点，让我们比较容易调取手机的接口和微信公众号提供的一些接口。但是在我们使用 JS-SDK 进行网页开发的时候必须通过微信服务器的验证。官网就叫 JS-SDK 的使用步骤：
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
测试号在这里填写：
步骤二：引入JS文件
在需要调用 JS 接口的页面引入如下 JS 文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载
一般我们在使用第三方包得时候，都是要求下载下来，但是这个可以不下载，因为如果接口废弃了官方直接就给除名了，压根不会去兼容低版本。
步骤三：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，让微信服务器完成验证，否则我们将无法调用其提供得 API。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，比较烦人，若要查看传入的参数，可以在pc端打开，在PC端参数信息会通过log打出，记住仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
步骤四：通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步骤五：通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
三、JS-SDK使用权限签名算法
前端要想通过 config 接口成功注入权限，还需在后端完成签名算法，发给前端，前端发给微信服务器来验证。
首先我们要拿到 access_token ，通过 access_token 拿到 jsapi_ticket，jsapi_ticket 里面的 ticket 是我们完成签名发算法必备字段。这个知识去参考之前写的 微信公众号获取 acess_token 和 jsapi-ticket
现在来看看签名算法的要求：
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。然后对这四个待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，在使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。最后对string1进行sha1加密，得到signature，字段名和字段值都采用原始值，不进行URL 转义。
在进行签名算法之前，首先讲明我们使用的模板引擎是 ejs：
//配置模板引擎为ejs，还可以为jade
app.set('view engine', 'ejs');
// 模板引擎搜索根目录（存放ejs文件的地方），views是固定写法
app.set('views', __dirname + '/views');
然后就是我们写项目的时候在 html 里面会引入一些静态资源，这时候需要静态文件夹，代码为：
// 静态资源目录，vendor前面必须有杠
app.use("/vendor",express.static(__dirname + '/vendor'));
//vendor文件夹里面的东西就被静态化了，访问例子如下
//http://192.168.1.6:3000/vendor/zepto.min.js
这时候来完成算法，见下：
// const { getUserDataAsync , parseXMLAsync , formatMessage} = require("./utils/tools");
// const { token , url } = require("./config");
const express = require("express");
const app = express();
//url:"http://bbc40eb8.ngrok.io"
const { url } = require("./config");
const sha1 = require("sha1");
const wechat = require("./Wechat/wechat");
//配置模板资源目录
// 杠得问题太多了。
// 静态资源目录，前面必须有杠
app.use("/vendor",express.static(__dirname + '/vendor'));
// 模板引擎搜索根目录views固定写法
app.set('views', __dirname + '/views');
//配置模板引擎
app.set('view engine', 'ejs');
app.get("/search",async (req,res,next)=>{
/*
生成js-sdk使用的签名：
1. 组合参与签名的四个参数：jsapi_ticket（临时票据）、noncestr（随机字符串）、timestamp（时间戳）、url（当前服务器地址）
2. 将其进行字典序排序，以'&'拼接在一起
3. 进行sha1加密，最终生成signature
*/
//获取随机字符串
const noncestr = Math.random().toString().split('.')[1];
//获取时间戳
const timestamp = Date.now();
//获取票据
const {ticket} = await wechat.fetchTicket();
// 1. 组合参与签名的四个参数：jsapi_ticket（临时票据）、noncestr（随机字符串）、timestamp（时间戳）、url（当前服务器地址）
const arr = [
`jsapi_ticket=${ticket}`,
`noncestr=${noncestr}`,
`timestamp=${timestamp}`,
`url=${url}/search`
]
// 2. 将其进行字典序排序，以'&'拼接在一起
const str = arr.sort().join('&');
console.log(str); //xxx=xxx&xxx=xxx&xxx=xxx
// 3. 进行sha1加密，最终生成signature
const signature = sha1(str);
console.log(signature)
//渲染页面，将渲染好的页面返回给用户
res.render('search', {
signature,
noncestr,
timestamp
});
});
app.listen(3000,()=>{console.log("3000端口已被监听")});
这时候在 views 文件夹里面有 search.ejs 我们来进行权限验证配置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
<script src="./vendor/jweixin.js"></script>
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '填写自己的', // 必填，公众号的唯一标识
timestamp: '<%= timestamp%>', // 必填，生成签名的时间戳
nonceStr: '<%= noncestr %>', // 必填，生成签名的随机串
signature: '<%= signature %>',// 必填，签名
jsApiList: [
"chooseImage",
"startRecord",
"stopRecord",
"onVoiceRecordEnd",
"playVoice",
"pauseVoice",
"stopVoice",
"onVoicePlayEnd",
"translateVoice"
], // 必填，需要使用的JS接口列表
});
</script>
</body>
</html>
在微信开发者工具里面访问，完美展示一个错误：
在微信开发者工具里面访问，完美展示一个错误
此时我估计把 JS 接口安全域名给配置错误，发现调试工具会报错会给出具体原因，还是不错的。
配置成功的截图
还给出了获取的权限列表。
接下来加上开始的布局并把录音转换 API 用起来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- https://res.wx.qq.com/open/libs/weui/2.2.0/weui.min.css -->
<link rel="stylesheet" href="./vendor/weui.min.css">
<title>H5页面</title>
<style>
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
width: 100%;
}
.js_dialog{
display: none;
}
.weui-dialog {
background-color: transparent;
}
.popup{
width: 176px;
height: 176px;
margin: auto;
background: url("./vendor/images/ic_record@2x.png") no-repeat 25% center,url("./vendor/images/ic_record_ripple@2x-1.png") no-repeat 75% center;
border-radius: 12px;
background-color: rgba(0, 0, 0, .7);
}
/* 防止长按选中字 */
.btn{
user-select: none;
}
</style>
</head>
<body>
<div class="page">
<div class="weui-form">
<div class="weui-form__text-area">
<h2 class="weui-form__title">公众号语音翻译</h2>
<div class="weui-form__desc">长按按钮进行录音，松开按钮开始翻译</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">翻译结果</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell ">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="这里是结果展示区" rows="8" id="inputText" data-id="10"></textarea>
<div class="weui-textarea-counter"><span id="counter">0</span>/1000</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form__opr-area">
<a class="weui-btn weui-btn_default btn" href="javascript:" id="btnRecord">按住 说话</a>
</div>
</div>
</div>
<!-- 录音图标 -->
<div class="js_dialog" id="iosDialog2">
<!-- 不要蒙层 -->
<!-- <div class="weui-mask"></div> -->
<div class="weui-dialog">
<div class="popup weui-dialog__bd" id="popup">
</div>
</div>
</div>
<!-- 录制时间太短提示 -->
<div id="toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">录制时间太短</p>
</div>
</div>
<script src="./vendor/zepto.min.js"></script>
<script src="./vendor/jweixin.js"></script>
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx22434dff749a1f16', // 必填，公众号的唯一标识
timestamp: '<%= timestamp%>', // 必填，生成签名的时间戳
nonceStr: '<%= noncestr %>', // 必填，生成签名的随机串
signature: '<%= signature %>',// 必填，签名
jsApiList: [
"chooseImage",
"startRecord",
"stopRecord",
"onVoiceRecordEnd",
"playVoice",
"pauseVoice",
"stopVoice",
"onVoicePlayEnd",
"translateVoice"
], // 必填，需要使用的JS接口列表
});
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
// checkJsApi检测是否支持API接口，上线一般都关掉
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
console.log(res);
}
});
const btn = $("#btnRecord");
const counter = $("#counter");
const inputText = $("#inputText");
const iosDialog2 = $("#iosDialog2");
const popup = $("#popup");
const toast = $("#toast");
// 定时器
let timer = null;
// 开始录音时间戳
let startTime = 0;
let recordTimer = null;
// 按下录音
btn.on("touchstart",function(){
startTime = new Date().getTime();
// 延时后录音，避免误操作
recordTimer = setTimeout(function () {
wx.startRecord({
success: function () {
},
cancel: function () {
alert('用户拒绝授权录音');
},
complete: function () {}
});
}, 300);
btn.text("松开 结束");
iosDialog2.css({"display":"block"});
//轮播
setTimer();
function setTimer(){
const index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let num = 0;
timer = setInterval(function(){
num++;
setTimeout(function(){
if (num >= index.length - 1) {
num = 0;
}
popup.css({
background:`url('./vendor/images/ic_record@2x.png') no-repeat 25% center, url('./vendor/images/ic_record_ripple@2x-${index[num]}.png') no-repeat 75% center`,
backgroundColor:"rgba( 0 , 0 , 0 , .7)"
});
},70);
},70);
};
},false);
// 停止录音
btn.on("touchend",function(){
btn.text("按住 说话");
iosDialog2.css({"display":"none"});
clearInterval(timer);
// 间隔太短
const timeDitance = new Date().getTime() - startTime;
if (timeDitance < 300) {
startTime = 0;
// 不录音
clearTimeout(recordTimer);
if (toast.css('display') != 'none') return;
toast.css({
"display": "block"
});
setTimeout(function () {
toast.css({
"display": "none"
});
}, 2000);
} else {
// 松手结束录音
wx.stopRecord({
success: function (res) {
const localId = res.localId;
wx.translateVoice({
localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
// 语音识别的结果
const result = res.translateResult
counter.text(result.length);
inputText.text(result);
// 播放录音
playVoice();
}
});
}
});
};
},false);
wx.onVoiceRecordEnd({
complete: function (res) {
voice.localId = res.localId;
alert('录音时间已超过一分钟');
}
});
function playVoice() {
wx.playVoice({
localId: voice.localId
});
};
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log("config配置失败");
});
</script>
</body>
</html>
现在还有一点需要优化的地方，在 search.ejs 里面我们使用了静态资源，而且按住按钮时候还不断通过定时器来加载图片，因为我们没有给这些静态资源添加 max-age 字段，max-age 默认为 0；
静态资源相对失效时间为 0 ，导致我们每次都会去请求服务器进行协商缓存，这时请求的多了，服务器会返回 429 状态码
Status Code: 429 Too Many Requests。所以我们得为静态资源设置相对失效时间。代码为：
// Status Code: 429 Too Many Requests
app.use("/vendor",express.static(__dirname + '/vendor',{
maxAge:"7200000"
}));
//7200秒再次访问
//Status Code: 200 OK (from disk cache)
最后得实现效果图：
手机就懒得搞动图了，不过语音识别效果还是不错的。
完成时间：2020年2月19日23点08分
