一個翻譯app的開發全過程---編碼+打包+上架
阿新 • • 發佈：2018-11-13
翻譯 ron ast rip 請求 ont navigator sage sta
前言：
心血來潮。（受不了現在某翻譯app煩人的廣告）冒出想法，自己通過百度提供的翻譯api接口自己去做一個簡易的app來用。小白項目，大佬勿噴 :)
—END—
1
打開編輯器開始擼代碼
準備工具：HBuilder 百度翻譯api接口（自行申請）
技術： mui jQuery vue
這個項目利用HBuilder 來進行打包的 利用他家的mui框架來寫
① 創建 一個mui項目
目錄結構
我們打開manifest.json 進行app配置
我們可以在這個文件下進行app的設置 包括 app名字、描述、圖標、啟動圖片等
②引入js
用jQuery是因為習慣了他的ajax寫法、md5.js是百度提供的身份驗證要用到的(需要大家自行翻譯api申請key)
③ 語音輸入的引用
mui家有個 H5+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—
一個翻譯app的開發全過程---編碼+打包+上架