微信公众号网页开发—

今天就来学习使用微信公众号网页开发中的JS-SDK。然后来模仿微信客户端的语音输入功能。

一、移动端网页布局

第一步简单移动端布局，主要使用了两个第三方得库：

WeUI
zepto

布局得效果如图：

布局源代码：




    
    
    
    
    H5页面
    


    
        
            
                公众号语音翻译
                    长按按钮进行录音，松开按钮开始翻译
            
            
                
                    翻译结果
                    
                        
                            
                                
                                0/1000
                            
                        
                    
                
            
            
                按住 说话

二、调取微信接口的步骤

我们知道。前端在移动端开发这块，主要设计的知识是 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 我们来进行权限验证配置：




    
    
    Document


    hello world

在微信开发者工具里面访问，完美展示一个错误：

在微信开发者工具里面访问，完美展示一个错误

此时我估计把 JS 接口安全域名给配置错误，发现调试工具会报错会给出具体原因，还是不错的。

配置成功的截图

还给出了获取的权限列表。

接下来加上开始的布局并把录音转换 API 用起来：




    
    
    
    
    H5页面
    


    
        
            
                公众号语音翻译
                    长按按钮进行录音，松开按钮开始翻译
            
            
                
                    翻译结果
                    
                        
                            
                                
                                0/1000
                            
                        
                    
                
            
            
                按住 说话
            
        
    
    
    
        
        
        
            

            
        
    

    
    
        
        
            
            录制时间太短

现在还有一点需要优化的地方，在 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分

微信公众号网页开发——语音输入