简介

当验证信息通过后，我们一般就会微信提供的接口
在使用微信提供的接口前，我们需要调用api来验证当前，我们能使用那些接口点击
注意上面的接口测试，需要我们在微信开发者工具内进行测试，下载微信开发者工具点击

微信开发者工具的使用

当下载好微信开发者工具的时候，我们首先要进行扫码登录
然后我们选择微信网页项目
把网页的网址复制到地址栏中
这个时候我们后端会打印出，我们可以使用的js-sdk可以使用的接口

语音接口

因为语音识别，需要，先录音，然后进行语音的识别，所以这里
我们通过官网查看语音接口，官网

在这里插入图片描述

代码

语音识别

wx.ready(function () {// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。// 验证接口wx.checkJsApi({jsApiList, // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,success: function (res) {// 以键值对的形式返回，可用的 api 值true，不可用为falseconsole.log(res)// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}}});// 语音api的使用const btn = document.getElementById("btn")// 微信客户端并不支持ontouchstart，这里用click来进行代替let isRecord = falsebtn.onclick = () => {if (!isRecord) {wx.startRecord() // 开始录音isRecord = true} else {wx.stopRecord({success: (res) => {// 拿到录音后，微信会把录音上传到微信服务器，然后返回给开发者一个idconst { localId } = reswx.translateVoice({localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {isRecord = falsealert(res.translateResult); // 语音识别的结果}});}})}}
});

公众号客户端不支持长按时间，那么这里我们使用点击事件来模拟长按
因为我们是模拟使用的微信客户端，调用translateVoice 接口的时候，他返回的是一个模拟的信息，如

每日一笑

因为在测试端我们没法使用语音转换的接口，下面，我们来做一个每日一笑的功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!-- 嵌入zepto --><script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script><title>每日一笑</title><script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script>// 1. 绑定安全域名// 2. 引入js文件// 3. 通过config接口注入权限配置var jsApiList = ["onMenuShareQQ","onMenuShareQZone","startRecord","stopRecord","translateVoice"]wx.config({debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳nonceStr: '<%=noncestr%>', // 必填，生成签名的随机串signature: '<%=signature%>',// 必填，签名jsApiList, // 必填，需要使用的 JS 接口列表appId: '<%=appID %>', // 必填，公众号的唯一标识});wx.ready(function () {// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。// 验证接口wx.checkJsApi({jsApiList, // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,success: function (res) {// 以键值对的形式返回，可用的 api 值true，不可用为falseconsole.log(res)// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}}});// 语音api的使用const btn = document.getElementById("btn")// 微信客户端并不支持ontouchstart，这里用click来进行代替let isRecord = falsebtn.onclick = () => {const url = "https://bird.ioliu.cn/joke/rand"$.getJSON(url, (res) => {const { data } = res_html = data.reduce((_pre, _cur) => {const { content, url, hashId } = _curreturn _pre + `<section><h2>${content}</h2><img style="width:100%;" src="${url}" alt="${hashId}"></section>`}, "")$("#content").html(_html)})}});wx.error(function (res) {// config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。});</script>
</head><body><h1>这是一个搜索页面</h1><button id="btn">录音</button><div id="content"></div>
</body></html>