人工智能實戰小程序之語音_前端開發

1. 人工智能實戰小程序之準備工作

2. 人工智能實戰小程序之語音_前端開發

今天這部分主要講小程序前端功能的開發

由于我偏后端，css是我的弱項，可能很多人和我一樣開發小程序不知道如何下手，希望本篇文章對你有幫助

我的學習路線是：

大略看一遍小程序的api文檔

然后在github上找一些小程序(我傾向于找有readme附圖的那種)

然后download下來去跑起來 然后在看代碼。(最快速的學習是能夠學習別人優秀的代碼這個我很贊同)

我收藏了一個代碼寫的不錯的開源電影推薦的小程序

https://github.com/yuzd/wechat-weapp-movie(感謝作者)

作者的代碼目錄結構我很喜歡(本次demo的開發我借鑒了)

本次demo的前端流程很簡單：

錄音=>上傳=>展示返回結果

下手之前：

希望能找到一個開源的帶錄音功能的demo能幫助我快速上手，

終于找到一個比較適合的開源demo：https://github.com/WalkingFrog/SiYu-WX

雖然該項目的作者說項目年久失修，學習價值有限。。

但是ui ico部分，對我來說太有幫助啦(感謝作者)

自己寫css是避免不了的那么

我希望能找一個類似于bootstrap庫的css庫能幫助我快速排版布局

我在github搜索到了一個ZanUI小程序專用的css庫，https://www.youzanyun.com/zanui/weapp#/zanui/base/icon

(果真很贊)

具體代碼我已經放到了github上面了

https://github.com/yuzd/microsoft_ai

下面就說說我在開發過程中遇到的一些問題和解決方法

1.小程序的component功能我的理解像是asp.net mvc中的PartialView。使用的時候不要忘記將wxss文件也要引用到主wxss里面。

例如你自己寫了一個loading的組件。

如果你在index.wxml里面用到了message.wxml 不要忘記要將message.wxs import到index.wss，否則樣式就加載不進來(不要認為會默認約定加載)

2.bindtouchstart 和 bindlongtap 的使用區別

剛開始的時候我用的是bindlongtap 但是測試發現多次我長按了事件沒有被調用

然后我換成了bindtouchstart 但是又太靈敏了，然后采用的是settimeout 200毫秒，并在 bindtouchend方法進行

clearTimeout的方式解決的。

3.動畫效果,比如出現錄音的動畫，用小程序自帶的動畫功能對我來說有點難，我就用了多組圖片切換的方式解決

哈哈，這樣真的可行。

4.錄音和播放都采用了小程序最新的api

錄音對象：wx.getRecorderManager()

音頻播放對象：wx.createInnerAudioContext()

這2個對象都提供時間注冊 例如 onStart onStop onError等等。我原來以為是注冊多次會覆蓋，其實這個類似于c#的多播委托 其實是+=的概念

?

下篇文章會講后端的代碼實現邏輯以及音頻轉換會遇到的坑，希望大家多多支持