2. 程式人生 > >使用Html5多媒體實現微信語音功能

使用Html5多媒體實現微信語音功能

阿新 • • 發佈：2018-12-09

隨著微信等社交App的興起，語音聊天成為很多App必備功能，大到將語音聊天作為主要功能的社交App，小到電商App的語音客服、店小二功能，語音聊天成為了必不可少的方式。

但是很多人感覺網頁端語音離我們很遙遠，這些更多是本地應用的工作，其實不然，隨著Html5的發展，語音功能也漸漸成為前端必會的功能之一。

為什麼要學會HTML5 的語音呢？

1.Html5 規範推進，手機的更新加速了作業系統更新，語音功能將會變成前端主要的工作之一，就像現在的canvas一樣。前端實現語音功能開發速度更快，更節省人力（這意味著給老闆省錢，給老闆省錢就是在給自己漲工資）

2.即使是現在本地應用做語音功能，熟悉前端語音互動的各種坑能夠讓你們的同事關係更和諧，協作更順暢，而不是互相掐架。

3.瞭解新的技術可以一方面，防止自己被面試官問倒，二來可以預判技術潮流，不至於學了一堆屠龍之技或者墨守成規，更有利於讓自己的知識和職業核心競爭力一直處在食物鏈的頂端。

4.前端大部分人對語音功能有誤解，以為語音功能就是HTML5 audio標籤而已，事實上真的不是那麼簡單的"而已"

不墨跡那麼多，咱們直接開發一個小專案啥都明明白兒白兒了，先看效果圖

使用Html5多媒體實現微信語音功能

業務邏輯非常簡單，

跟我們微信用法一模一樣，手按下去字變成鬆開結束，同時說話被錄下來，鬆手的時候，變成按下結束，同時傳送語音給對方

我們一步一步一步來，首先我們先整一個html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微信語音</title>
    <link rel="stylesheet" href="css/record.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div id="left">
                <i class="material-icons">
                    chevron_left
                </i>
                微信(184)
            </div>
            <div id="mid">艾達·王</div>
            <div id="right">
                <i class="material-icons">
                    more_horiz
                </i>
            </div>
        </header>
        <div id="contentWrap">
            <ul id="chatList">
                <li class="item_me">
                    <div class="chatContent">我是不是你最疼愛的人?
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" alt="">
                    </div>
                    <div class="chatContent">奔跑吧，兄弟！（滾犢子）
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">這裡我就不多說了，上來就是一梭子程式碼……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" alt="">
                    </div>
                    <div class="chatContent">大彬哥，你說你咋這麼優秀呢？看見你我有一種大海的感覺
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">老妹兒，你是不是喜歡上我了呢……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" alt="">
                    </div>
                    <div class="chatContent">不是，我暈船，看見你想吐……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
            </ul>
        </div>
        <footer id="footer">
            <div id="keyboard">
                <i class="material-icons">
                    keyboard
                </i>
            </div>
            <div id="sayBtn">
                <span id="sendBtn" class="sendBtn">按下 說話</span>
            </div>
            <div id="icon"><i class="material-icons">
                    sentiment_satisfied
                </i></div>
            <div id="add"><i class="material-icons">
                    add_circle_outline
                </i></div>
        </footer>
    </div>
</body>

</html>

css部分，

*{
    margin: 0;
    padding: 0;
}
ul li{ list-style: none;}
html,body{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body{
    background: #ebebeb;
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../css/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(../css/iconfont/MaterialIcons-Regular.woff) format('woff2'),
      url(../css/iconfont/MaterialIcons-Regular.woff2) format('woff'),
      url(../css/iconfont/MaterialIcons-Regular.ttf) format('truetype');
  }

  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 32px;  /* Preferred icon size */
    display: inline-block;
    /* line-height: 0.01rem; */
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
  }
#wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
#header{
    height: 46px;
    line-height: 46px;
    background: #363539;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: space-between;
}

#header #left{
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 100px;
}
#header #right{
    display: flex;
    align-items: center;
    width: 100px;
    justify-content: flex-end;

}
#header #right i{
    padding-right: 6px;
}
#header #mid{
    text-align: center;
    flex: 1;
}
#contentWrap{
    flex: 1;
    overflow-y:auto;
}

.item_me,.item_audio{
    display: flex;
    align-items: flex-start;
    justify-content:flex-end;
    padding: 8px;
}
.item_you{
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    padding: 8px;
}
.avatar{
    width: 40px;
    height: 40px;
}
.avatar img{width: 100%;}
.item_me .chatContent{
    padding: 10px;
    background: #a0e75a;
    border: 1px solid #6fb44d;
    margin-right: 15px;
    border-radius: 5px;
    position: relative;
}
.chatContent span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.item_me .chatContent span.bot{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color: transparent transparent transparent #6fb44d; 
    right:-17px; 
    top:10px;
}
.item_me .chatContent span.top{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color:transparent transparent transparent #a0e75a ;  
    right:-15px; 
    top:10px;
} 
.item_you .chatContent{
    padding: 10px;
    background: #a0e75a;
    border: 1px solid #6fb44d;
    margin-left: 15px;
    border-radius: 5px;
    position: relative;
} 
.item_you .chatContent span.bot{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color: transparent #6fb44d transparent transparent ; 
    left:-17px; 
    top:10px;
}
.item_you .chatContent span.top{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color:transparent #a0e75a transparent transparent  ;  
    left:-15px; 
    top:10px;
}        

#footer{
    height: 46px;
    padding: 0 4px;
    background: #f4f5f6;
    border-top: 1px solid #d7d7d8;
    display: flex;
    align-items: center;
    color: #7f8389;
    justify-content: space-around;
}
#sayBtn{
    flex: 1;
    display: flex;
    margin: 0 5px;
    color:#565656;
    font-weight: bold;
}
.sendBtn{
    display: block;
    flex: 1;
    padding: 8px;
    background: #f4f5f6;
    border:1px solid #bec2c1;
    border-radius: 5px;
    text-align: center;

}
.activeBtn{
    display: block;
    flex: 1;
    padding: 8px;
    background: #c6c7ca;
    border:1px solid #bec2c1;
    border-radius: 5px;
    text-align: center;
}
.item_audio .chatContent{
    padding: 6px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    margin-right: 15px;
    position: relative;
    width:120px;
    min-height: 20px;

}
.item_audio .chatContent span.bot{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color: transparent transparent transparent #999; 
    right:-17px; 
    top:10px;
}
.item_audio .chatContent span.top{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color:transparent transparent transparent #fff ;  
    right:-15px; 
    top:10px;
} 
.material-icons_wifi{
    transform: rotate(90deg);
    color: #a5a5a5;
    font-size: 22px;
}
.redDot{
    background: #f45454;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 10px;
}

這裡我說兩個注意點，

1.html部分：

圖省事我並沒有畫素級切圖，圖省事我也直接用了svg圖示，具體庫我使用的是

https://material.io/tools/icons/?style=outline

2.css部分：使用flex佈局。我只是為了講解Html5功能，所以flex並沒有寫相容性寫法，另外App頭部部分寫法大家注意一下，那裡是非常常用的。

下面說重點js部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微信語音</title>
    <link rel="stylesheet" href="css/record.css">
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            var oSendBtn = document.getElementById('sendBtn');
            var soundClips = document.querySelector('.sound-clips');
            var mediaRecorder;
            var oChatList = document.getElementById('chatList');
            navigator.getUserMedia = (navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(
                    // constraints - only audio needed for this app
                    {
                        audio: true
                    })
                    // Success callback
                    .then(function (stream) {
                        rec(stream);
                    })

                    // Error callback
                    .catch(function (err) {
                    }
                    );
            } else {
            }
             function rec(stream) {
                mediaRecorder = new MediaRecorder(stream);
                oSendBtn.addEventListener('touchstart', function (ev) {
                    ev.preventDefault();
                    this.innerHTML = '鬆開 結束';
                    this.classList.add('activeBtn');
                    mediaRecorder.start();
                }, false);
                oSendBtn.addEventListener('touchend', function (ev) {
                    ev.preventDefault();
                    this.innerHTML = '按下 說話';
                    this.classList.remove('activeBtn');
                    mediaRecorder.stop();
                }, false);
                mediaRecorder.ondataavailable = function (e) {
                    var clipContainer = document.createElement('li');
                    var audio = document.createElement('audio');
                    clipContainer.classList.add('item_audio');
                    clipContainer.innerHTML = `
                    <div class = "redDot"></div>
                    <div class="chatContent">
                        <i class="material-icons material-icons_wifi">wifi</i>
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>`;
                    audio.setAttribute('controls', '');
                    oChatList.appendChild(clipContainer);
                    var audioURL = window.URL.createObjectURL(e.data);
                    audio.src = audioURL;
                    oChatList.addEventListener('touchstart', function (ev) {
                        if (ev.srcElement.parentNode.className!== 'item_audio') return;
                        audio.play();
                        ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])
                    }, false);
                };
            }
        }, false);
    </script>
</head>

<body>
    <div id="wrap">
        <header id="header">
            <div id="left">
                <i class="material-icons">
                    chevron_left
                </i>
                微信(184)
            </div>
            <div id="mid">艾達·王</div>
            <div id="right">
                <i class="material-icons">
                    more_horiz
                </i>
            </div>
        </header>
        <div id="contentWrap">
            <ul id="chatList">
                <li class="item_me">
                    <div class="chatContent">我是不是你最疼愛的人?
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" alt="">
                    </div>
                    <div class="chatContent">奔跑吧，兄弟！（滾犢子）
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">這裡我就不多說了，上來就是一梭子程式碼……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" alt="">
                    </div>
                    <div class="chatContent">大彬哥，你說你咋這麼優秀呢？看見你我有一種大海的感覺
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">老妹兒，你是不是喜歡上我了呢……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" alt="">
                    </div>
                    <div class="chatContent">不是，我暈船，看見你想吐……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
            </ul>
        </div>
        <footer id="footer">
            <div id="keyboard">
                <i class="material-icons">
                    keyboard
                </i>
            </div>
            <div id="sayBtn">
                <span id="sendBtn" class="sendBtn">按下 說話</span>
            </div>
            <div id="icon"><i class="material-icons">
                    sentiment_satisfied
                </i></div>
            <div id="add"><i class="material-icons">
                    add_circle_outline
                </i></div>
        </footer>
    </div>
</body>

</html>

這裡實現的錄影功能要注意的點很多，我們一個個說，

第一個東西，

navigator.getUserMedia = (navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(

                    {
                        audio: true
                    })
                    // Success callback
                    .then(function (stream) {
                        rec(stream);
                    })

                    // Error callback
                    .catch(function (err) {
                    }
                    );
            } else {

            }

當大家看一些html5關於錄音的介面的時候，你看到這個

Navigator.getUserMedia()

就要小心了，這個是老規範的東西了，被廢了，新的是

navigator.mediaDevices.getUserMedia

html5 多媒體裡面的語音這塊換了好幾茬規範，很亂，有些標籤甚至一個瀏覽器都沒實現過，未曾綻放就枯萎了，你也不用關心也沒必要浪費那個時間知道，你只要知道我說這些就夠了，因為你知道那些被廢掉的過往沒啥用，有那個時間還不如來一局LOL或者王者榮耀（雖然我並不懂二者的區別，不過這兩個遊戲應該都挺好玩吧）。

裡面的東西大家也不需要看懂，什麼promise了，什麼媒體流了，你不用知道，你就知道這樣一件事就行了，

上面的程式碼就相當於打開了水龍頭（或者說按下的錄音機的錄音鍵），那麼我們得有東西接著水啊，我們可以用電飯鍋（錄音機的話就是磁帶）放水龍頭下面看著它往裡面射，如下程式碼

mediaRecorder = new MediaRecorder(stream);

接下來就是，一按按鈕就生米煮成熟飯了，對應錄音機就是錄完了按按鈕就播放了，但是在我們程式裡面要想播放你不僅要有磁帶，還得有錄音機，錄音機就是audio標籤，沒有好辦，我們new一個。這個世界上沒有什麼物件是程式設計師不敢new的，new一個不行，就new兩個。剩下的程式碼除了嚇人之外，沒啥缺點，簡單的令人髮指。

mediaRecorder.ondataavailable = function (e) {
                    var clipContainer = document.createElement('li');
                    var audio = document.createElement('audio');
                    clipContainer.classList.add('item_audio');
                    clipContainer.innerHTML = `
                    <div class = "redDot"></div>
                    <div class="chatContent">
                        <i class="material-icons material-icons_wifi">wifi</i>
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" alt="">
                    </div>`;
                    audio.setAttribute('controls', '');
                    oChatList.appendChild(clipContainer);
                    var audioURL = window.URL.createObjectURL(e.data);
                    audio.src = audioURL;
                    oChatList.addEventListener('touchstart', function (ev) {
                        if (ev.srcElement.parentNode.className!== 'item_audio') return;
                        audio.play();
                        ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])
                    }, false);
                };

其實就是錄好了就播。

OK，是不是很簡單 ，整個專案我說幾個點吧：

1.切圖結構合理是你後面做功能的前提，結構做的好，後面就省事，想想諸葛亮吧，未出茅廬人家就把html5結構搭好了，有三個section.

2.原生js和ES6的基礎打牢可以為你提供不同的思路，比如我這裡就使用了事件委託，還有ES6模板引擎。尤其是事件委託，不用的話查詢節點很麻煩，另外程式碼套來套去也容易亂。

3.新的 知識和技術其實並不複雜，其實很簡單，你想如果新技術不是為了讓功能更好實現，更能解決我們的問題，那開發新技術幹嘛？因為那幫大鬍子的大牛們沒事幹怕被領導說工作量不飽和？技術是為了解決問題和讓我們生活更美好服務的。

4.這個專案IOS 11以下跑不通，因為IOS 11.2之前不支援這個方法，需要IOS本地應用開發人員給你提供支援，但是在android下面是很OK的。而且可以預見，再過幾年IOS 原生也不用給你支援都支援了，那你開發效率得多高。不要以為這些技術很遙遠，html5真正商用也不過15年左右（vue 、react、angular大規模使用才幾年？），機會留給有準備的人。

整個專案細節和要注意的點還是很多的，希望大家真正自己敲一遍，因為你看懂了我的文章跟你會用這個技術兩碼事，祝大家在前端的路上越走越遠（記得常回來看看^_^）。

相關推薦

使用Html5多媒體實現微信語音功能

隨著微信等社交App的興起，語音聊天成為很多App必備功能，大到將語音聊天作為主要功能的社交App，小到電商App的語音客服、店小二功能，語音聊天成為了必不可少的方式。 但是很多人感覺網頁端語音離我們很遙遠，這些更多是本地應用的工作，其實不然，隨著Html5的發展，語音功能也漸漸成為前端必會的功能之一。

cacti實現微信告警功能

cacti 微信告警 背景近來受朋友所托，為他實現cacti的微信告警功能，但是在印象之中，cacti的thold插件貌似只有郵件告警功能吧？於是花了點時間在網絡上搜索了相關信息，發現cacti的微信告警的信息著實很少，唯一看似可用的文章嘗試了下卻無法成功，在那篇文章的基礎上，我修改了一下微信腳本的代

HTML5+weui仿微信聊天功能、長按刪除功能

html5微信聊天 h5微信聊天界面最近由於項目需要， 就運用html5+css3+weui+jquery實現的微信聊天小案例，可發表圖像、紅包、打賞...功能， 還可以長按刪除消息。。。案例截圖如下：HTML及Js片段：<!DOCTYPE html><html lang="zh-cn"&g

使用PHP+MySql操作——實現微信投票功能

lis 結果 ansi 代號 his html back utf-8 微信 1. 投票主頁面： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

【轉】微信小程序實現微信支付功能（可用）

arr 必須 enc red use sam func 結束 單表 原博： https://blog.csdn.net/fredrik/article/details/79697963 微信小程序實現微信支付功能 直接把裏面的參數替換成你的就

實現微信分享功能

實現微信分享功能整理 1、引入js檔案 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 2、通過config介面注入許可權驗證配置 var wxConfig = { de

cocos creator利用ShareSDK實現微信登入功能

首先在ShareSDK官網下載SDK或者在android studio中配置build.gradle. ShareSDK Maven整合文件 注：使用ShareSDK maven整合方式，不需要在AndroidMainfest.xml下面配置任何許可權和Activity 注意：需要先申請M

微信小程式：web-view巢狀H5實現微信支付功能解決方案及填坑

最近一個多月加班比較嚴重，偶爾休息一天也是在補睡眠+陪家人，比較長時間沒有來進行總結記錄了。今天不加班，開始為這段時間做的東西進行下經驗總結。 這段時間因為公司需要，接觸了一些.Net前後臺開發，慢慢了解了一些WCF、H5站點、WebService、Soap、Linq等，也

java實現windows下amr轉換為mp3（可實現微信語音和qq語音轉換）

最近做一個專案需要將微信的語音檔案放在頁面進行播放，查了好多資料發現，web頁面直接播放並沒有一個好的解決方案，於是就想到了先將amr檔案轉換成易於在頁面播放的mp3檔案，然後在進行播放，現在將amr檔案轉化為mp3檔案的幾種方式以及踩過的坑分享一下： 查了好多資料，總結一下，amr轉換mp3的方式有如下幾

ShareSDK接入實現微信分享功能（轉）

ShareSDK接入實現微信分享功能 首先需要去Mob官網（http://www.mob.com/）下載shareSDK For Unity3d 下載完成,解壓，將以下plugins資料夾移入Unity專案的Assets資料夾裡，並將專案平臺轉換為安卓平臺 在場景裡建立幾個cube作為

微信小程式實現微信支付功能

這裡我直接上程式碼，附有註釋，直接把我的程式碼貼上一下就可以用了，也是自己走了好多的彎路。。，寫在部落格裡做個記錄直接把裡面的引數替換成你的就可以了，前提是你要開通的有微信支付功能，需要商戶號，appid，appsecret,openid，openid的獲取比較簡單，我再寫一

使用jquery.qrcode生成二維碼實現微信分享功能

pen spa blog 插件 詳情 空間 asc inf pan 前言： 最近有個這樣的需求，在pc端的商品詳情頁增加分享功能。 微博分享、QQ好友分享、QQ空間分享這些都很常見。但是微信分享我還沒有手動寫過（以前改過）。 最終效果如下圖： 解決方案：使用jque

PHP實現微信支付功能開發+例項程式碼

namespace Wechat\Controller; use Think\Controller; /** * 父類控制器，需要繼承 * @file ParentController.class.php * @author Gary <[email protected]> *

快速實現微信支付功能

首先去支付寶開發平臺申請支付接入功能,並且填寫正確的包名和APP簽名 1,包名直接在Androidmainfest中檢視   package="com.company.demo"; 2,APP簽名可以用騰訊開發平臺的簽名生成工具Gen_Signature_Android.a

Python 使用圖靈機器人實現微信聊天功能

測試 自己的 class port get 圖靈 com reat arch 　　首先需要去圖靈官網創建一個屬於自己的機器人然後得到apikey。 一、自動與指定好友聊天 # -*- coding: utf-8 -*- """ Created at 2019

在Unity3D項目中接入ShareSDK實現安卓平臺微信分享功能（可使用ShareSDK默認UI或自定義UI）

顯示 選項 dev template 腳本 配置文件 all 自己 show 　　最近公司的大廳要重做，我協助主程一起制作新大廳和新框架，前面制作的編輯器也派上了用場。等全部功能做完後我會再寫一個復盤，這兩天主程在忙於寫熱更新的功能，所以把接入分享SDK功能的任務交給了我，

android 實現微信分享多張圖片的功能

files gui 功能實現 pen ring row 還要 bsp sha 昨天公司老大通知客戶改需求了，原來的微信分享改成分享多張圖片，然後屁顛屁顛跑到微信平臺看了以後 心裏千萬只草泥馬狂奔而過，微信平臺沒有提供分享多張的SDK有木有啊，我們只能自己調用系統自帶的分享

基於百度雲實現微信服務號內文字語音互轉STT TTS

.com wid ech 設置 errcode creat ice 遍歷 組裝 先上效果圖： 使用百度語音識別和語音合成兩個接口實現 1.語音識別STT 用戶微信輸入，調用百度api，得到識別文本。 2.語音合成TTS 用戶輸入問題，調用百度api，得到mps音頻，使用開

spring boot項目之微信支付功能實現詳細介紹

tab 流程 invalid body 正方形 無法 數據 fmt -s 對接微信支付功能主要有以下幾個步驟， 而其第一個關鍵點就是獲取OpenID，在這裏介紹兩種獲取方式： 一、微信授權 微信網頁授權 如果用戶在微信客戶端中訪問第三方網頁，公

微信小程序 使用微信支付功能實現在線支付訂單

navi order lose ray 如果 image 全部 extern base 以前做過PC頁面微信支付，但是這次在小程序 直接調用微信支付功能還是方便很多 先放個微信官方API鏈接：https://pay.weixin.qq.com/wiki/doc/api/wx