最近接受了一個新的需求锈拨，希望制作一個基于微信的英語語音評價(jià)頁面十拣。即點(diǎn)擊錄音按鈕，用戶錄音說出預(yù)設(shè)的英文渔扎，根據(jù)用戶的發(fā)音給出對應(yīng)的評價(jià)硫狞。

功能列表

• ? 錄音
• ? 錄音動畫
• ? 錄音播放
• ? 英語語音評價(jià)（部分實(shí)現(xiàn)）
• ? 只允許微信客戶端打開

零 技術(shù)選型

錄音方面

可供選擇的方案有兩個：

1. 使用HTML5接口 - getUserMedia()；
2. 微信開放平臺-微信JS-SDK晃痴；.

通過http://caniuse.com查詢 getUserMedia()的兼容性残吩。

getUserMedia() API兼容性

由于主要應(yīng)用場景是在移動端，此API只能在iOS 11+ 與Android 5-6.X及以上可用倘核，兼容性感人泣侮，故舍棄此方案。所以此次錄音實(shí)現(xiàn)基于微信開放平臺提供的微信JS-SDK紧唱。

英語語音識別

因?yàn)橹饕腔谖⑿牌脚_活尊，所以要求語音識別平臺需要提供Web Api。

語音識別方面功能漏益，主要有兩種技術(shù)路線蛹锰。

1. 專門著力于語音識別及相關(guān)產(chǎn)業(yè)的技術(shù)平臺，例如訊飛以及調(diào)研中發(fā)現(xiàn)的馳聲绰疤。
   優(yōu)勢：專業(yè)并且提供語音評測相關(guān)功能铜犬；
   劣勢：花費(fèi)昂貴；
2. AI開放平臺轻庆，因?yàn)楦鞔髲S商布局AI癣猾，免費(fèi)提供語音識別相關(guān)的接口。
   優(yōu)勢：免費(fèi)余爆，API清晰煎谍；
   劣勢：并非為專門為教育定制，無語音評測功能龙屉；

結(jié)合項(xiàng)目的實(shí)際情況，決定使用第二種方案。（主要是因?yàn)榻?jīng)費(fèi)有限……）
大廠提供的免費(fèi)方案主要有：

• 百度AI
  限制：50000次/天免費(fèi)
  格式支持：pcm（不壓縮）转捕、wav（不壓縮作岖，pcm編碼）、amr（壓縮格式）五芝；固定16k 采樣率痘儡；
• 騰訊AI開發(fā)平臺
  語音參數(shù)：必須符合16k或8K采樣率、16bit采樣位數(shù)枢步、單聲道
  語音格式：PCM沉删、WAV、AMR醉途、 SILK
  其他：目前只支持漢語
• 騰訊云智能語音服務(wù)
  語音參數(shù)：必須符合16k或8K采樣率矾瑰、16bit采樣位數(shù)、單聲道
  語音格式：通用標(biāo)準(zhǔn)格式隘擎，例如 mp3殴穴，wma，wav 等
• 微信公眾平臺AI開放接口
  語音參數(shù)：16k货葬，單聲道采幌，最大1M
  語音格式：mp3
• 微信公眾平臺JS-SDK智能接口
  其他：目前只支持漢語

大廠競爭果然系列，大鵝廠光語音服務(wù)肉眼可見的就折騰了這么多震桶。（大霧）

經(jīng)過一番折騰休傍，最終可以形成兩種方案：

1. 微信JS-SDK音頻接口錄音->上傳到微信臨時(shí)素材->下載到服務(wù)器->轉(zhuǎn)換錄音文件格式->百度AI語音識別返回結(jié)果->與預(yù)置的文件比對->返回比對結(jié)果
   優(yōu)勢：識別結(jié)果準(zhǔn)
   劣勢：慢（因?yàn)闊o法直接獲取用戶的錄音，需要從微信公眾平臺的臨時(shí)素材中轉(zhuǎn)蹲姐，且錄音文件格式與百度AI可識別格式不一致磨取，所以整個流程下來太慢）；微信公眾號需要企業(yè)認(rèn)證
   其他：至于為什么不選用騰訊系列淤堵，因?yàn)?del>騰訊系列語音服務(wù)沒有調(diào)通寝衫。。拐邪。

2. 微信JS-SDK音頻接口錄音->調(diào)用JS-SDK智能接口返回識別結(jié)果->結(jié)果轉(zhuǎn)為拼音->與預(yù)置的文件比對->返回比對結(jié)果
   優(yōu)勢：返回結(jié)果迅速慰毅、方法簡單
   劣勢：識別結(jié)果不太準(zhǔn)確（因?yàn)?code>JS-SDK智能接口不只是單單根據(jù)語音直接轉(zhuǎn)換，還會在結(jié)果的基礎(chǔ)上進(jìn)行一定程度的聯(lián)想扎阶，話說為啥不能增加個語言選擇參數(shù)汹胃。）

本次整個方案使用方案2。

一 微信JS-SDK環(huán)境準(zhǔn)備

寫在前邊：此處的開發(fā)環(huán)境不是指本地的開發(fā)環(huán)境东臀，單指使用微信JS-SDK所需完成的一系列的獲取AccessToken着饥、jsapi_ticket等前置條件。

開發(fā)環(huán)境
云服務(wù)器：騰訊云 · 小程序（特價(jià)惰赋，買了個折騰）
后臺語音：PHP · CodeIgniter（小程序PHP樣例使用CI框架）

1）公眾號配置

前置的公眾號申請等就不再贅述宰掉，如果要正常使用微信JS-SDK的功能呵哨，需要在公眾號配置一些內(nèi)容。

配置IP白名單

通過微信公眾平臺 開發(fā) -> 基本配置 -> IP白名單 進(jìn)行設(shè)置轨奄，將開發(fā)環(huán)境的IP配置到IP白名單孟害。

注1. 如果不配置白名單將無法獲取access_token，并在返回結(jié)果中返回40164錯誤挪拟；
注2. 因?yàn)槭窃?code>騰訊云 · 小程序主機(jī)開發(fā)環(huán)境下折騰的挨务，該環(huán)境如果一周不更新新的代碼會暫時(shí)關(guān)閉，IP也會發(fā)生變化玉组，所以建議每周更新一下代碼谎柄；

配置JS接口安全域名

通過微信公眾平臺 設(shè)置 -> 公眾號設(shè)置 -> 功能設(shè)置 -> JS接口安全域名 進(jìn)行設(shè)置，將JS接口安全域名寫入惯雳。

注1. 一個公眾號最多可以配置3個安全域名朝巫，需使用字母、數(shù)字及“-”的組合吨凑，不支持IP地址捍歪、端口號及短鏈域名，且域名必須經(jīng)過備案鸵钝；
注2. 需要將MP_verify_qEwAJiPuWerKftkO.txt（可在配置JS接口安全域名處自行下載）放到配置域名的根目錄,并確辈诰剩可以訪問到。騰訊云 · 小程序默認(rèn)樣例使用的CI框架恩商，需要放到\server下变逃；
注3. 如不配置JS接口安全域名，則無法成功調(diào)用JS-SDK怠堪；

2）獲取access_token

access_token是公眾號的全局唯一接口調(diào)用憑據(jù)揽乱，調(diào)用公眾號的各個接口時(shí)都需要使用。獲取access_token需要appid與appsecret粟矿。微信公眾平臺的access_token有效期為7200s (2小時(shí))凰棉，每天最高可調(diào)用上限為2000次。因此獲取access_token需要做到：

1. 定時(shí)刷新（刷新間隔大于1分鐘陌粹，小于120分）撒犀；
2. 全局緩存access_token；

Show me the code

class className extends CI_Controller {
  var $appId = "appId";
  var $appSecret = "appSecret";
  var $accessTokenFile = "wxtoken.txt";
  // var $jsapiTicketFile = "wxjsapiTicket.txt";

  public function index() {
    $this - > build_access_token(); //獲取access_token
    // $this - > get_jsapi_ticket(); //獲取jsapic_ticket
  }


  public function build_access_token() {
    $ch = curl_init(); //初始化一個CURL對象
    curl_setopt($ch, CURLOPT_URL, "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$this->appId}&secret={$this->appSecret}");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    $data = json_decode(curl_exec($ch));
    if ($data - > access_token) {
      $token_file = fopen($this - > accessTokenFile, "w") or die("Unable to open file!"); //打開wxtoken.txt文件掏秩，沒有會新建
      fwrite($token_file, $data - > access_token); //重寫wxtken.txt全部內(nèi)容
      fclose($token_file); //關(guān)閉文件流
    } else {
      echo $data - > errmsg;
    }
    curl_close($ch);
  }

  public function read_token() {
    $token_file = fopen($this - > accessTokenFile, "r") or die("Unable to open file!");
    $rs = fgets($token_file);
    fclose($token_file);
    return $rs;
  }
}

Talk is cheap

1. 因?yàn)槭褂玫氖荂I框架或舞，將文件寫到server\application\controllers\下可直接通過域名+文件名訪問到該接口，默認(rèn)執(zhí)行文件中的index中的方法蒙幻；
2. 代碼中的基本邏輯通過build_access_token()方法獲取access_token映凳，并存儲到wxtken.txt，通過read_token()方法讀取access_token邮破；

獲取access_token的詳細(xì)情況見官方API诈豌。

3）獲取jsapi_ticket

jsapi_ticket是公眾號用于調(diào)用微信JS接口的臨時(shí)票據(jù)仆救，通過access_token來獲取失驶。微信公眾平臺的jsapi_ticket有效期為7200s (2小時(shí))几缭，每天最高可調(diào)用上限為1000000次。因此同樣在全局緩存贵少。

Show me the code

public function get_jsapi_ticket() {
  $access_token = $this - > read_token();
  $ch = curl_init(); //初始化一個CURL對象
  curl_setopt($ch, CURLOPT_URL, "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi"); 
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
  $data = json_decode(curl_exec($ch));
  if ($data - > ticket) {
    $token_file = fopen($this - > jsapiTicketFile, "w") or die("Unable to open file!");
    fwrite($token_file, $data - > ticket);
    fclose($token_file); //關(guān)閉文件流
  } else {
    echo $data - > errmsg;
  }
  curl_close($ch);
}

public function read_jsapi_ticket() {
  $jsapi_ticket_file = fopen($this - > jsapiTicketFile, "r") or die("Unable to open file!");
  $rs = fgets($jsapi_ticket_file);
  fclose($jsapi_ticket_file);
  return $rs;
}

Talk is cheap

1. 寫到跟獲取access_token同一文件中蚌斩，以便同時(shí)刷新；
2. 同之前的代碼中邏輯類似范嘱，通過get_jsapi_ticket()方法獲取jsapi_ticket送膳，并存儲到wxjsapiTicket.txt，通過read_jsapi_ticket()方法讀取jsapi_ticket丑蛤；

獲取access_token的詳細(xì)情況見官方API叠聋。

4）刷新access_token及jsapi_ticket

由于微信公眾平臺的access_token與jsapi_ticket有兩個小時(shí)有效期，故需要定期刷新受裹÷挡梗基本思路有如下三個：

1. PHP定時(shí)執(zhí)行任務(wù)；
2. 服務(wù)器定時(shí)任務(wù)棉饶；
3. 定時(shí)訪問URL厦章；

1.PHP定時(shí)執(zhí)行任務(wù)

主要使用死循環(huán)，執(zhí)行一次時(shí)間照藻，使用sleep()函數(shù)休眠一段時(shí)間袜啃，如下代碼：

ignore_user_abort();//即使Client斷開(如關(guān)掉瀏覽器)，PHP腳本也可以繼續(xù)執(zhí)行.
set_time_limit(0);//執(zhí)行時(shí)間為無限制幸缕，php默認(rèn)的執(zhí)行時(shí)間是30秒群发，通過set_time_limit(0)可以讓程序無限制的執(zhí)行下去
$interval=60*100;//每隔100分鐘運(yùn)行
do{
    //do sth
    sleep($interval);//按設(shè)置的時(shí)間等待100分鐘循環(huán)執(zhí)行
}while(true);

缺點(diǎn)：缺點(diǎn)嚴(yán)重，啟動之后发乔，無法控制熟妓。而且一直消耗服務(wù)器資源，容易被殺死栏尚；

2.服務(wù)器定時(shí)任務(wù)

windows平臺的計(jì)劃任務(wù)或者是Unix平臺的Crontab都有定時(shí)執(zhí)行php腳本或者訪問URL的方法起愈，但是由于使用的騰訊云 · 小程序使用的是Wafer一體化解決方案，無法直接訪問遠(yuǎn)端服務(wù)器抵栈，故此方法放棄告材。

3. 定時(shí)訪問URL

我們這次定時(shí)刷新access_token及jsapi_ticket采用的就是此方法，騰訊云平臺古劲，有個免費(fèi)的功能云撥測可定時(shí)訪問某個URL斥赋，并且在無法訪問時(shí)，將預(yù)警信息發(fā)送給某個設(shè)定好的用戶組产艾。
將我們之前寫好的獲取access_token及jsapi_ticket方法疤剑，寫到index()方法下滑绒，將URL填到撥測地址中，定時(shí)刷新隘膘，搞定疑故。

注1. 云撥測最長的周期為半個小時(shí)，而且每次撥測可能訪問地址5-6次弯菊，其實(shí)更穩(wěn)妥的方法是在數(shù)據(jù)庫中設(shè)置標(biāo)志位纵势，防治過度刷新，但是每天2000次的限額完全夠用管钳，就暫時(shí)未做此功能钦铁。

5）生成JS-SDK配置信息

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用才漆，配置信息需要的參數(shù)如下：

wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來牛曹，若要查看傳入的參數(shù)，可以在pc端打開醇滥，參數(shù)信息會通過log打出黎比，僅在pc端時(shí)才會打印。
    appId: '', // 必填鸳玩，公眾號的唯一標(biāo)識
    timestamp: , // 必填阅虫，生成簽名的時(shí)間戳
    nonceStr: '', // 必填，生成簽名的隨機(jī)串
    signature: '',// 必填怀喉，簽名
    jsApiList: [] // 必填书妻，需要使用的JS接口列表
});

其中的appId、jsApiList已知躬拢，timestamp躲履、nonceStr動態(tài)生成，signature由算法生產(chǎn)聊闯。其中關(guān)于signature的算法官方API描述如下：

簽名算法

簽名生成規(guī)則如下：參與簽名的字段包括noncestr（隨機(jī)字符串）, 有效的jsapi_ticket, timestamp（時(shí)間戳）, url（當(dāng)前網(wǎng)頁的URL工猜，不包含#及其后面部分） 。對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后菱蔬，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1篷帅。這里需要注意的是所有參數(shù)名均為小寫字符。對string1作sha1加密拴泌，字段名和字段值都采用原始值魏身，不進(jìn)行URL 轉(zhuǎn)義。

即signature=sha1(string1)蚪腐。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步驟1. 對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后箭昵，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

步驟2. 對string1進(jìn)行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項(xiàng)

1. 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同回季。
2. 簽名用的url必須是調(diào)用JS接口頁面的完整URL家制。
3. 出于安全考慮正林，開發(fā)者必須在服務(wù)器端實(shí)現(xiàn)簽名的邏輯。

Show me the code

public function get_signpackage(){
  $jsapi_ticket = $this->read_jsapi_ticket();  
  $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
  $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";  // 注意 URL 一定要動態(tài)獲取颤殴，不能 hardcode.
  $noncestr = $this->createNonceStr();
  $timestamp = time();

  $trs_url = $this->input->post('trs_url');

  $url = isset($trs_url)?$trs_url:$url;
  $string1 = "jsapi_ticket={$jsapi_ticket}&noncestr={$noncestr}&timestamp={$timestamp}&url={$url}";
  $signature = sha1($string1);

  $this->json([
    'appId'     => $this->appId,
    'nonceStr'  => $noncestr,
    'timestamp' => $timestamp,
    'signature' => $signature,
    'url' => $url
  ]);
  // return $signPackage;
}

private function createNonceStr($length = 16) {
  $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  $str = "";
  for ($i = 0; $i < $length; $i++) {
    $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
  }
  return $str;
}

Talk is cheap

1. 一定要注意觅廓，簽名用的url必須是調(diào)用JS接口頁面的完整URL，這里通過前端POST獲取調(diào)用頁的URL涵但；
2. 返回值為json格式杈绸，前端通過ajax獲取矮瘟；
3. 因?yàn)椴捎昧薈I框架蝇棉，前端ajax請求地址為域名/weapp/此段代碼的文件名/get_signpackage。

至此芥永，使用微信公眾平臺JS-SDK的前置條件均已準(zhǔn)備完畢。

二 實(shí)現(xiàn)錄音按鈕動畫

基本的交互邏輯如下圖演示：

此處來實(shí)現(xiàn)長按錄音按鈕的動畫钝吮÷窠В基本思路是：

1. 通過CSS3的transition屬性實(shí)現(xiàn)record突變的平滑變小、平滑變大奇瘦；
2. 通過CSS3的keyframes動畫與偽類配合完成環(huán)形進(jìn)度動畫棘催；

Show me the code

<div class="content">
    <div class="dialogBox" id="dialogBox">
    </div>
    <div class="voice-remote">
    <span class="cover"></span>
    <span class="icon"></span>
    </div>
</div>

<style type="text/css">
.voice-remote {
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    position: absolute;
    background: #f6f6f6;
    bottom: 1.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: all .2s;
    -webkit-transition: all .2s;
}

.voice-remote:active {
    width: 4.5rem;
    height: 4.5rem;
    bottom: 1rem;
    border: 1px solid #e7e7e7;
}

.voice-remote:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-image: linear-gradient(-90deg, transparent 50%, #1dc61c 50%);
}

.voice-remote:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-image: linear-gradient(-90deg, transparent 50%, #1dc61c 50%);
}

.voice-remote .cover {
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    z-index: 4;
    top: 0;
    left: 0;
    background-image: linear-gradient(-90deg, transparent 50%, #f6f6f6 50%);
}

.voice-remote .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #f6f6f6 url(../../images/voice.png) no-repeat center center;
    background-size: 100%;
    border-radius: 50%;
    z-index: 5;
}

.voice-remote .icon:active {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background-size: 100%;
}

.voice-remote:active:before {
    -webkit-animation: scoll linear 30s;
    animation: scoll linear 30s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.voice-remote:active:after {
    -webkit-animation: xscoll linear 60s;
    animation: xscoll linear 60s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.voice-remote:active .cover {
    -webkit-animation: hide linear 60s;
    animation: hide linear 60s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes scoll {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes scoll {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@-webkit-keyframes xscoll {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes xscoll {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes hide {
    0% {
        opacity: 1
    }

    49.9% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes hide {
    0% {
        opacity: 1
    }

    49.9% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
</style>

Talk is cheap

錄音按鈕原理圖

錄音按鈕動畫原理如上圖分層，其中:before層添加動畫為旋轉(zhuǎn)180度耳标，時(shí)間為30s醇坝，與此同時(shí):after層添加動畫為旋轉(zhuǎn)360度，時(shí)間為60s次坡，即前30s兩個圖層同時(shí)旋轉(zhuǎn)呼猪，當(dāng)30s后:after層繼續(xù)旋轉(zhuǎn)，:before層保持位置不變砸琅，使整個右側(cè)環(huán)形顯示宋距。.cover層添加動畫為前30s覆蓋整個左側(cè)，后30s隱藏症脂。 整個動畫由最頂部.icon覆蓋谚赎，使整個動畫過程顯示為一個環(huán)形。

三 實(shí)現(xiàn)錄音及錄音播放功能

開始是實(shí)現(xiàn)錄音及播放的相關(guān)功能诱篷。主要流程是引入JS文件壶唤、通過config接口注入權(quán)限驗(yàn)證配置、通過ready接口處理成功驗(yàn)證棕所、撰寫錄音代碼邏輯闸盔、撰寫錄音播放代碼邏輯。

1）引入JS文件

在需要調(diào)用JS接口的頁面引入如下JS文件橙凳，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

Show me the code

requirejs.config({
    baseUrl: './lib/js',
    paths: {
        'jquery': 'jquery',
        'jweixin': 'jweixin',
        'util': 'util',
        'post_data': 'data',
        'pinyin_dict_notone': 'pinyin_dict_notone',
        'pinyinUtil': 'pinyinUtil',
    }
});

define(['jquery', 'jweixin', 'post_data', 'util', 'pinyin_dict_notone', 'pinyinUtil'], function($, wx) {
}

Talk is cheap

1. 此次使用AMD模式requirejs引入相關(guān)文件蕾殴；
2. 這里引入多個文件笑撞，之后的代碼需要使用；

注1. 支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載钓觉，也支持直接使用<script></script>直接引用茴肥；
注2. 調(diào)用之前需要完成配置JS接口安全域名。

2）通過config接口注入權(quán)限驗(yàn)證配置

通過ajax請求之前完成的生成JS-SDK配置信息接口荡灾，獲取到相關(guān)的配置內(nèi)容瓤狐，另外jsApiList接口列表需要根據(jù)業(yè)務(wù)需求自行添加。

Show me the code

$.ajax({
    url: "your js-sdk interface",
    dataType: "json",
    contentType : "application/x-www-form-urlencoded; charset=utf-8",
    data:{"trs_url":window.location.href.split("#")[0]},
    type:"POST",
    success: function(data) {
        var baseWxData = data;
        wx.config({
            debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來批幌，若要查看傳入的參數(shù)础锐，可以在pc端打開，參數(shù)信息會通過log打出荧缘，僅在pc端時(shí)才會打印皆警。
            appId: baseWxData['appId'], // 必填，公眾號的唯一標(biāo)識
            timestamp: baseWxData['timestamp'], // 必填截粗，生成簽名的時(shí)間戳
            nonceStr: baseWxData['nonceStr'], // 必填信姓，生成簽名的隨機(jī)串
            signature: baseWxData['signature'], // 必填，簽名绸罗，見附錄1
            jsApiList: [
                'startRecord', // 錄音開始api
                'stopRecord', // 錄音結(jié)束api
                'onVoiceRecordEnd', // 超過一分鐘自動停止api
                'playVoice', // 播放錄音api
                'pauseVoice', // 暫停錄音api
                'stopVoice',    // 停止播放api
                'onVoicePlayEnd', // 監(jiān)聽語音播放完畢api
                'translateVoice'
            ]
        });
    }
});

Talk is cheap

1. 用post傳入當(dāng)前頁面URL意推，因?yàn)楹灻惴ū仨毷鞘褂?strong>調(diào)用頁的地址；
2. 此次功能只用到如代碼中的幾個API珊蟀，更多API詳見官方API菊值；

3）通過ready接口處理成功驗(yàn)證

wx.ready(function(){
    // config信息驗(yàn)證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后育灸，config是一個客戶端的異步操作腻窒，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行描扯。對于用戶觸發(fā)時(shí)才調(diào)用的接口定页，則可以直接調(diào)用，不需要放在ready函數(shù)中绽诚。
});

4）撰寫錄音代碼邏輯

創(chuàng)建一個對象R典徊，封裝錄音、播放以及翻譯等過程恩够。監(jiān)聽錄音按鈕的touchstart事件啟動錄音卒落，監(jiān)聽touchend時(shí)間結(jié)束錄音。

Show me the code

/* Javascript Code*/

var R = {
    options: {
        spoint: 0,  //記錄recordstart時(shí)間
        tpoint: 0,  //記錄touchstart時(shí)間
        epoint: 0,  //記錄touchend時(shí)間
        timer: 0,   //setInterval
        iOrder: 0   //記錄錄音序列order
    },
    feedback: {
        great: ["Excellent!", "Well done!", "口語不錯嘛蜂桶！", "非常棒儡毕！", "Great"],
        good: ["Good job!", "Not bad!", "還不錯哦！", "Good! Keep going!", "干得不錯！加油"],
        normal: ["Please try again!", "Oh,you can do better than that!", "分?jǐn)?shù)有點(diǎn)兒低哦腰湾！", "再來一次試試雷恃！", "Have another try,please!"]
    },
    recode: function() { //定時(shí)最長60s后結(jié)束錄音
        R.options.timer = setInterval(function() {
            var time = +new Date() - R.options.spoint;
            if (time >= 60000) {
                alert("時(shí)間超過60秒，請?jiān)俅武浿疲?);
                setTimeout(function() {
                    R.translate();
                }, 100);
                clearInterval(R.options.timer);
            }
        }, 1000);
    },
    translate: function() { //結(jié)束錄音并識別語音
        wx.stopRecord({
            success: function(res) {
                localId = res.localId;
                $(".voice-remote").addClass("vrPause");

                wx.translateVoice({
                    localId: localId,
                    complete: function(res) {}
                });
            },
            fail: function(res) {
                alert(JSON.stringify(res));
            }
        });
    },
    insertContent: function(obj) {
        var _str = "";
        switch (obj.iType) {
            case 1:
                _str = '<div class="p1 dialogItem"><div class="avatarBox"><img src="./images/avatar1.png" class="avatar" /></div><div class="contentBox"><div class="wordBox"><span>' + obj.iContent + '</span></div></div></div>';
                break;
            case 2:
                _str = '<div class="p2 dialogItem isSound ' + obj.iClass + '"><div class="contentBox iPlayVoice" data-localid="' + obj.iContent + '"><div class="wordBox"><span><i class="sound"></i></span></div></div><div class="avatarBox"><img src="./images/avatar2.png"  class="avatar" /></div>'
                break;
            case 3:
                break;
            case 4:
                break;
            default:
                console.log('Undefined element of iType :' + iType);
        }
        $("#dialogBox").append(_str).scrollTop($("#dialogBox")[0].scrollHeight);
    },
    init: function() {

        R.insertContent({
            iType: 1,
            iContent: word.keyword[R.options.iOrder].content,
        });

        // $.ajax();

        wx.ready(function() {
            $('.voice-remote').on('touchstart', function(e) {

                $(".playing").each(function() {
                    _stoplocalId = $(this).data("localid");
                    $(this).removeClass("playing");
                    wx.stopVoice({
                        localId: _stoplocalId
                    });
                });

                R.options.tpoint = +new Date(); //記錄touchstart時(shí)間點(diǎn)

                wx.startRecord({
                    success: function() {
                        $('.voice-remote').addClass('active');
                        R.options.spoint = +new Date(); //記錄開始錄音成功時(shí)間點(diǎn)
                        R.recode(); //啟用定時(shí)結(jié)束錄音定時(shí)器

                        if (R.options.spoint > R.options.epoint && R.options.epoint > R.options.tpoint) { //處理因?yàn)槎贪捶逊唬瑂tartRecord還未初始成功倒槐，導(dǎo)致無法正常停止錄音
                            clearInterval(R.options.timer);

                            $('.voice-remote').removeClass('active');

                        }
                    },
                    fail: function(res) {
                        alert(JSON.stringify(res));
                    },
                    cancel: function() {
                        alert('您拒絕了授權(quán)錄音');
                    }
                });
            });

            document.oncontextmenu = function(e) {
                // 阻止部分手機(jī)長按會產(chǎn)生彈出框的問題
                e.preventDefault();
            };

            $('.voice-remote').on('touchend', function() {
                R.options.epoint = +new Date(); //記錄touchend時(shí)間點(diǎn)
                $(this).removeClass('active');

                var time = +new Date() - R.options.spoint;
                if (time < 60000) { //當(dāng)錄音間隔時(shí)間小于60s，touchend后清除定時(shí)結(jié)束錄音定時(shí)器附井，并調(diào)用結(jié)束錄音方法
                    setTimeout(function() {
                        R.translate();
                    }, 200);
                    clearInterval(R.options.timer);
                }
            });

            $(document).on('touchstart', '.iPlayVoice', function() {
                // do sth
            });

            wx.onVoicePlayEnd({
                complete: function(res) {
                    // do sth
                }
            });

        });
    }
}
R.init();

/* CSS Code*/

.setHide {
    display: none;
}

.content {
    background: #ebebeb;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Microsoft YaHei;
}

.dialogBox {
    margin: 3%;
    width: 94%;
    height: 81%;
    overflow-y: scroll;
}

.dialogItem {
    margin: 3% 0;
    overflow: hidden;
    text-align: left;
}

.avatarBox {
    display: inline-block;
}

.contentBox {
    display: inline-block;
    max-width: 68%;
    margin-left: 12px;
}

.wordBox:before {
    content: "";
    width: 12px;
    height: 25px;
    background: url(../../images/sharpOther.png) 0 0 no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    left: -12px;
}

.wordBox {
    border: 1px solid #d4d4d4;
    background-color: #fff;
    padding: 5px 10px;
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    min-height: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: left;
}

.wordBox>span {
    line-height: 1.5em;
    display: inline-block;
    vertical-align: middle;
    text-align: justify;
}

.avatar {
    width: 40px;
    vertical-align: middle;
}

.sharpStyle {
    width: 17px;
    height: 35px;
    background: url(../../images/sharpOther.png) 0 0 no-repeat;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.sharpMe {
    background-image: url(../../images/sharpMe.png);
    margin-left: 0;
    margin-right: 6px;
}

.sound {
    display: inline-block;
    width: 18px;
    height: 25px;
    background: url(../../images/sound.png) 0 0 no-repeat;
    background-size: 100% 100%;
}

.playing .sound {
    background-image: url(../../images/sound.gif);
}

.p2 {
    text-align: right;
}

.p2 .contentBox {
    margin-left: 0;
    margin-right: 12px;
}

.p2 .wordBox {
    border: 1px solid #86b850;
    background-color: #a1e75b;
}

.p2 .wordBox:before {
    background: url(../../images/sharpMe.png) 0 0 no-repeat;
    left: auto;
    right: -12px;
}

.p2 .sound {
    background-image: url(../../images/soundMe.png);
}

.p2 .playing .sound {
    background-image: url(../../images/soundMe.gif);
}

.dialogItem .contentBox:after {
    color: #969696;
    margin-left: 3px;
}

.dialogItem .contentBox:before {
    color: #969696;
    margin-right: 3px;
}

.isSound .contentBox {
    width: 68%;
}

.p2.isSound .wordBox {
    text-align: right;
}

.soundOt1 .wordBox {
    width: 15%;
}

.soundOt2 .wordBox {
    width: 16%;
}
/*……*/

.soundOt1  .contentBox:after {
    content: "1 ''";
}

.soundOt2  .contentBox:after {
    content: "2 ''";
}
/*……*/

.soundMe1 .contentBox:before {
    content: "1 ''";
}

.soundMe2 .contentBox:before {
    content: "2 ''";
}
/*……*/

.soundMe1 .wordBox {
    width: 15%;
}

.soundMe2 .wordBox {
    width: 16%;
}
/*……*/

Talk is cheap

1. 構(gòu)建了insertContent()方法構(gòu)建頁面讨越，使用scrollTop()方法使填充的新的對話框出現(xiàn)再最下邊;
2. 構(gòu)建了spoint與epoint兩個參數(shù)，判斷錄音時(shí)間永毅；
3. 構(gòu)建recode()方法把跨，使用setInterval()方法，限制錄音超過60s后停止（因?yàn)槲⑿臞S-SDK限制錄音時(shí)長最多為60s）沼死；
4. 構(gòu)建feedback參數(shù)着逐，為之后翻譯提供反饋；
5. 使用偽類實(shí)現(xiàn)對話前后的音頻時(shí)長意蛀；

已知兼容性問題

1. 部分華為手機(jī)滨嘱，長按后彈出彈出菜單，檢測document的oncontextmenu事件浸间，阻止默認(rèn)事件e.preventDefault()；
2. 微信開發(fā)者工具調(diào)試時(shí)吟榴，超過60s后會因?yàn)?code>alert()會觸發(fā)一次touchend事件魁蒜，真正抬手后又會觸發(fā)一次touchend，真機(jī)運(yùn)行時(shí)無此問題吩翻；

5）撰寫錄音播放代碼邏輯

在構(gòu)建頁面時(shí)將localid寫到對應(yīng)對話語句中兜看，通過該localid對應(yīng)相應(yīng)的錄音。

Show me the code

$(document).on('touchstart', '.iPlayVoice', function() {
    var $this = $(this),
        _localId = $this.data("localid");

    if ($this.hasClass("playing")) {
        wx.stopVoice({
            localId: _localId
        });
        $this.removeClass("playing");
    } else {
        $(".playing").not($this).each(function() {
            _stoplocalId = $(this).data("localid");
            $(this).removeClass("playing");
            wx.stopVoice({
                localId: _stoplocalId
            });
        });
        wx.playVoice({
            localId: _localId
        });
        $this.addClass("playing");
    }
});

wx.onVoicePlayEnd({
    complete: function(res) {
        $(".playing").removeClass("playing");
    }
});

Talk is cheap

1. 使用$(document).on('touchstart', '.iPlayVoice', function() {})為.iPlayVoice動態(tài)綁定事件狭瞎；
2. 使用playing類名细移，控制播放時(shí)的狀態(tài)；

四 實(shí)現(xiàn)語音評價(jià)功能

開篇的技術(shù)選型時(shí)已經(jīng)將前因后果說明了⌒芏В現(xiàn)在就寫借助微信JS-SDK中的wx.translateVoice()方法實(shí)現(xiàn)語音評價(jià)功能的具體實(shí)現(xiàn)弧轧。具體流程為引入示例json、獲取語音翻譯結(jié)果碗殷、語音結(jié)果轉(zhuǎn)為拼音精绎、結(jié)果比對、反饋評價(jià)锌妻。

1）引入示例json

將示例的數(shù)據(jù)寫成json代乃，用requirejs引入。

Show me the code

var word = {
  keyword: [{
      order: 1,
      content: "請說：<br />What's your name.",
      matched: "我次要兒內(nèi)幕,我想那,我次有那么",
      localId: "-1"
    }, {
      order: 2,
      content: "請說：<br />How are you.",
      matched: "好啊有",
      localId: "-1"
    }, {
      order: 3,
      content: "請說：<br />Nice to meet you.",
      matched: "挨次圖密特油",
      localId: "-1"
    }],
}

Talk is cheap

1. content數(shù)據(jù)項(xiàng)仿粹，標(biāo)識的是引導(dǎo)語搁吓；
2. matched項(xiàng)標(biāo)識的是匹配內(nèi)容原茅，通過“，”分隔多個匹配內(nèi)容堕仔，以提高匹配度擂橘；

2）獲取語音翻譯結(jié)果

Show me the code

wx.translateVoice({
    localId: '', // 需要識別的音頻的本地Id，由錄音相關(guān)接口獲得
    isShowProgressTips: 1, // 默認(rèn)為1贮预，顯示進(jìn)度提示
    success: function(res) {
        alert(res.translateResult); // 語音識別的結(jié)果
    }
    fail: function(res) {
        alert(JSON.stringify(res));
    }
});

Talk is cheap

翻譯接口主要依靠localId來完成一系列的工作贝室，成功后返回一段json格式的數(shù)據(jù)。

3）語音結(jié)果轉(zhuǎn)為拼音

此步驟主要將返回的內(nèi)容轉(zhuǎn)換成拼音仿吞。借助的是@sxei（小茗同學(xué)）的一個庫滑频，地址為github。
因?yàn)橹恍枰D(zhuǎn)換成無聲掉的拼音唤冈，那么只需要引入pinyin_dict_notone.js與pinyinUtil.js兩個文件峡迷，使用pinyinUtil.getPinyin('')方法將漢字轉(zhuǎn)化成拼音。

4）結(jié)果比對

比對語音翻譯的拼音與預(yù)置的信息的拼音進(jìn)行比對你虹，返回匹配程度绘搞。因?yàn)轭A(yù)置的結(jié)果有多個，取其中匹配程度最高的的一項(xiàng)傅物。

Show me the code

var str_User = pinyinUtil.getPinyin(res.translateResult.split("夯辖。")[0]),
    str_Ans = word.keyword[R.options.iOrder].matched.split(","),
    matchedArray = new Array(),
    matchedNum = 0;

for (var i = 0; i < str_Ans.length; i++) {
    matchedArray[i] = strSimilarity2Percent(Trim(str_User), Trim(pinyinUtil.getPinyin(str_Ans[i])));
}

matchedNum = arrayMax(matchedArray);

Talk is cheap

1. 返回的json數(shù)據(jù)，返回結(jié)果的key為translateResult董饰；
2. 返回的結(jié)果有“蒿褂。”卒暂，故需要使用res.translateResult.split("啄栓。")[0]將“∫察簦”排除昙楚；
3. 使用了三個自定義方法，strSimilarity2Percent()返回匹配程度诈嘿、Trim()排除字符串中的空格堪旧、arrayMax()返回?cái)?shù)組中的最大值。相關(guān)方法存放在unit.js中奖亚；

/**
 * 兩個字符串的相似程度崎场，并返回相差字符個數(shù)
 *
 *
 * @param    {string}  s  字符串1
 * @param    {string}  t  字符串2
 * @returns  {number}  d[n][m]  字符串差異個數(shù)
 *
 * @date     2018-03-02
 * @author   ReeCode
 */
function strSimilarity2Number(s, t) {
  var n = s.length,
    m = t.length,
    d = [];
  var i, j, s_i, t_j, cost;
  if (n == 0) return m;
  if (m == 0) return n;
  for (i = 0; i <= n; i++) {
    d[i] = [];
    d[i][0] = i;
  }
  for (j = 0; j <= m; j++) {
    d[0][j] = j;
  }
  for (i = 1; i <= n; i++) {
    s_i = s.charAt(i - 1);
    for (j = 1; j <= m; j++) {
      t_j = t.charAt(j - 1);
      if (s_i == t_j) {
        cost = 0;
      } else {
        cost = 1;
      }
      d[i][j] = Minimum(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost);
    }
  }
  return d[n][m];
}
/**
 * 兩個字符串的相似程度，并返回相似度百分比
 *
 *
 * @param    {string}  s  字符串1
 * @param    {string}  t  字符串2
 * @returns  {number}     字符串差異百分比
 *
 * @date     2018-03-02
 * @author   ReeCode
 */
function strSimilarity2Percent(s, t) {
  var l = s.length > t.length ? s.length : t.length;
  var d = strSimilarity2Number(s, t);
  return (1 - d / l).toFixed(4);
}

function Minimum(a, b, c) {
  return a < b ? (a < c ? a : c) : (b < c ? b : c);
}
/**
 * 去除字符串中的空格
 *
 * 去除字符串中的空格遂蛀，
 * 如果不加參數(shù)"g",只去除字符串前后空格谭跨；
 * 如果加參數(shù)"g",去除字符串全部空格；
 *
 * @param    {string}  str        目標(biāo)字符串
 * @param    {string}  is_global  是否檢測整個字符串，如果是螃宙，輸入為 "g",其他情況無視該參數(shù)
 * @returns  {string}
 *
 * @date     2018-03-02
 * @author   ReeCode
 */
function Trim(str, is_global) {
  var result,
    _is_global = (typeof(is_global) !== "undefined") ? is_global : "n";
  result = str.replace(/(^\s+)|(\s+$)/g, "");
  if (_is_global.toLowerCase() == "g") {
    result = result.replace(/\s/g, "");
  }
  return result;
}
/**
 * 獲取字符串的長度
 *
 * 獲取字符串的長度蛮瞄，
 * 漢字為兩個字符長度，英語級其他符號為1個長度谆扎；
 *
 * @param    {string}  val        目標(biāo)字符串
 * @returns  {number}
 *
 * @date     2018-03-05
 * @author   ReeCode
 */
function getByteLen(val) {
  var len = 0;
  for (var i = 0; i < val.length; i++) {
    var a = val.charAt(i);
    if (a.match(/[^\x00-\xff]/ig) != null) {
      len += 2;
    } else {
      len += 1;
    }
  }
  return len;
}

/**
 * 移除數(shù)組中的某個元素   （改變數(shù)組長度）
 *
 *
 * @param    {array}  arr         目標(biāo)數(shù)組
 * @param    {any}    item      要從數(shù)組中移除的元素
 * @returns  {array}
 *
 * @date     2018-03-06
 * @author   ReeCode
 */
function removeWithoutCopy(arr, item) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == item) {
      arr.splice(i, 1);
      i--;
    }
  }
  return arr;
}
/**
 * 找出數(shù)組中的最小值
 *
 *
 * @param    {array}  arr       目標(biāo)數(shù)組
 * @returns  {number} min       數(shù)組最小值
 *
 * @date     2018-04-19
 * @author   ReeCode
 */
function arrayMin(arr) {
  var min = arr[0],
    len = arr.length;
  for (var i = 1; i < len; i++) {
    if (arr[i] < min) {
      min = arr[i];
    }
  }
  return min;
}
/**
 * 找出數(shù)組中的最大值
 *
 *
 * @param    {array}  arr       目標(biāo)數(shù)組
 * @returns  {number} max       數(shù)組最小值
 *
 * @date     2018-04-19
 * @author   ReeCode
 */
function arrayMax(arr) {
  var max = arr[0],
    len = arr.length;
  for (var i = 1; i < len; i++) {
    if (arr[i] > max) {
      max = arr[i];
    }
  }
  return max;
}

5）反饋評價(jià)

根據(jù)評價(jià)結(jié)果的情況挂捅，分為三檔：

matchedNum >= 0.8 ---------- great
0.8 > matchedNum >= 0.6 -- good
matchedNum < 0.6 ----------- normal

同時(shí)在此時(shí)對小于0.5s的錄音予以忽略。

Show me the code

translate: function() { //結(jié)束錄音并識別語音
    wx.stopRecord({
        success: function(res) {
            localId = res.localId;
            $(".voice-remote").addClass("vrPause");

            wx.translateVoice({
                localId: localId,
                complete: function(res) {
                    var voice_time = Math.abs(R.options.epoint - R.options.point),
                        _iClass = "soundMe" + Math.round(voice_time / 1000);
                    if (res.hasOwnProperty('translateResult') && voice_time > 500) {
                        var str_User = pinyinUtil.getPinyin(res.translateResult.split("堂湖。")[0]),
                            str_Ans = word.keyword[R.options.iOrder].matched.split(","),
                            matchedArray = new Array(),
                            matchedNum = 0;

                        for (var i = 0; i < str_Ans.length; i++) {
                            matchedArray[i] = strSimilarity2Percent(Trim(str_User), Trim(pinyinUtil.getPinyin(str_Ans[i])));
                        }

                        matchedNum = arrayMax(matchedArray);

                        R.insertContent({
                            iType: 2,
                            iClass: _iClass,
                            iContent: localId,
                        });

                        if (matchedNum >= 0.8) {

                            R.options.iOrder++;
                            alert(R.feedback.great[parseInt(Math.random() * 5)] + "\r\n 您本次錄音匹配程度為：" + (matchedNum * 100).toFixed(2) + "% 闲先。");
                            if (R.options.iOrder < word.keyword.length) {
                                R.insertContent({
                                    iType: 1,
                                    iContent: word.keyword[R.options.iOrder].content,
                                });
                            } else {
                                alert("恭喜，本次測試完成无蜂！");
                            }
                        } else if (matchedNum >= 0.6) {
                            alert(R.feedback.good[parseInt(Math.random() * 5)] + "\r\n 您本次錄音匹配程度為：" + (matchedNum * 100).toFixed(2) + "%伺糠！");
                        } else {
                            alert(R.feedback.normal[parseInt(Math.random() * 5)] + "\r\n 您本次錄音匹配程度為：" + (matchedNum * 100).toFixed(2) + "%！");
                        }

                    } else if (voice_time > 500) {
                        alert('無法識別');
                    } else if (voice_time <= 500) {
                        alert("錄音過短斥季，請重新錄音训桶！");
                    }
                }
            });
        },
        fail: function(res) {
            alert(JSON.stringify(res));
        }
    });
},

Talk is cheap

使用parseInt(Math.random() * 5)生成隨機(jī)數(shù)，使反饋語隨機(jī)生成酣倾；

五 限制只允許微信客戶端打開

檢測客戶端版本的micromessenger值舵揭，微信用的是瀏覽器內(nèi)核是這個。

Show me the code

/**
 * 判斷是否是微信
 *
 * @returns  {boolen}       true 是微信  false  不是微信
 *
 * @date     2018-05-29
 * @author   ReeCode
 */
function iswx() {
  var ua = navigator.userAgent.toLowerCase();

  return ua.indexOf('micromessenger') != -1 ? true:false;
}

if (!iswx()) {
        document.head.innerHTML = '<title>抱歉躁锡，出錯了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" ;
        document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">請?jiān)谖⑿趴蛻舳舜蜷_鏈接</h4></div></div>';
    }else{
        R.init();
    }

Talk is cheap

判斷如果是微信瀏覽器午绳，對對象R進(jìn)行初始化，如果不是映之，返回請?jiān)谖⑿趴蛻舳舜蜷_箱叁；

總結(jié)

絮絮叨叨終于總結(jié)好了。過段時(shí)間用小程序?qū)υ摴δ苓M(jìn)行重寫惕医。