一個翻譯app的開發全過程---編碼+打包+上架

摘要： 前言： 心血來潮。（受不了現在某翻譯app煩人的廣告）冒出想法，自己通過百度提供的翻譯api介面自己去做一個簡易的app來用。小白專案，大佬勿噴 :) 1開啟編輯器開始擼程式碼 準備工具：HBuilder  百度翻譯api介面（自行申請） 技術： m...

前言：

心血來潮。（受不了現在某翻譯app煩人的廣告）冒出想法，自己通過百度提供的翻譯api介面自己去做一個簡易的app來用。小白專案，大佬勿噴 :)

準備工具：HBuilder  百度翻譯api介面（自行申請）

技術： mui  jQuery  vue

這個專案利用HBuilder  來進行打包的  利用他家的mui框架來寫

① 建立  一個mui專案

目錄結構

我們開啟 manifest.json     進行app配置

我們可以在這個檔案下進行app的設定   包括  app名字、描述、圖示、啟動圖片等

②引入js

用jQuery是因為習慣了他的ajax寫法、md5.js是百度提供的身份驗證要用到的(需要大家自行翻譯api申請key)

③ 語音輸入的引用

mui家有個     H 5+Runtime    裡邊有個語音api可以呼叫  實現語音輸入、、需要在app加入語音輸入的小夥伴合一瞭解下

④ 上程式碼

其實很簡單的原理  拿到輸入內容 -->ajax請求-->返回的結果輸出

H5部分：

<div>
<textarea placeholder="翻譯結果" v-model="returns"></textarea>
</div>
<div>
<textarea v-model="keys" placeholder="請輸入翻譯內容"></textarea>
</div>
<div class="yi" @click="buttons">
<img class="sousuo" src="img/sousuo.png" />
</div>

js部分：

new Vue({
el: '#app',
data: {
keys: '',
returns: ''
},
methods: {
startRecognize: function() {
var self = this;
if(plus.os.name == 'Android' && navigator.userAgent.indexOf('StreamApp') > 0) {
plus.nativeUI.toast('當前環境暫不支援語音識別外掛');
return;
}
var options = {};
options.engine = 'iFly';
//options.punctuation = false;// 標點符號 

outSet("開始語音識別：");
plus.speech.startRecognize(options, function(s) {
outLine(s);
self.keys = s;
}, function(e) {
outSet("語音識別失敗：" + e.message);
});
},
buttons: function() {
var self = this;
var appid = '20181008000216390';
var key = 'zlC0Z4ROvv0_3c4hiiHe';
var salt = (new Date).getTime();
var query = self.keys;
var from = 'auto';
var to = 'en';
var str1 = appid + query + salt + key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',//百度翻譯的api介面
type: 'get',
dataType: 'jsonp',
data: {
'q': query,
'appid': appid,
'salt': salt,
'from': from,
'to': to,
'sign': sign
},
success: function(data) {
self.returns = data.trans_result[0].dst;
}
});
}
}
})

startRecognize 這個方法是h5+的語音輸入方法百度api的呼叫方法：

我們可以在本瀏覽器對樣式進行除錯 不過建議真機除錯 下面是我做的介面

2 進行打包上架

專案敲完後   就要開始打包啦    利用HBuilder自帶的打包功能進行一鍵打包   可以使用它的公用證書

點選打包後  程式碼上傳雲端  喝杯茶稍等幾分鐘就ok了

總結：專案沒啥技術含量  ~小白也能搞懂  就是呼叫百度翻譯api介面   利用HBuilder進行打包，我之後也想強化下這個app加入個拍照翻譯功能~~大家有啥好建議歡迎提出~

我做的這個專案  的GitHub地址：https://github.com/mumu731/dyd        想了解的可以參考一下   目前也上架了百度應用商店

— END —