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

前言：

 

心血來潮。（受不了如今某翻譯app煩人的廣告）冒出想法，本身經過百度提供的翻譯api接口本身去作一個簡易的app來用。小白項目，大佬勿噴 :)

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—