百度翻譯api實現微信翻譯小程序

本項目的github地址,喜歡的同志可以star或者fork


效果圖如下:

效果圖1
效果圖1

效果圖2
效果圖2

效果圖3
效果圖3

效果圖4
效果圖4

我的小程序

要點:

  • nodejs
  • 百度翻譯api
  • 騰訊云服務器
  • ssl證書
  • nginx反向代理nodejs項目

使用:

下載本項目到本地或者你的服務器,進入server文件夾,輸入npm install安裝依賴,等待安裝完成輸入npm start啟動后端腳本,app文件夾使用微信開發工具打開,把pages文件夾內index.js中的wx.request中的url改為你的服務器域名或者ip地址(真機測試必須是https訪問,這就是下面我煞費口舌說https的原因),也可以本地調試的話應該可以改為:localhost:端口

我做的這個小程序是一個翻譯助手,非常簡單,微信的api我只是使用wx.request和onShareAppMessage兩個重要的官方api函數,至于邏輯那些只能自己寫。

這個小程序,部署在我的騰訊云服務器里面,在3000端口跑,用Nginx在443端口進行代理,在server文件夾內的server.js負責接收小程序發送過來的請求,并且使用translate.js里面的函數進行翻譯,最后把結果反饋給小程序。

translate.js里面使用百度翻譯的api,主要使用http.request()函數,百度翻譯的api很好用,很喜歡。

核心代碼

module.exports = function(params, callback) { 
  if (typeof params === 'string') { 
    params = { 
      query: params 
    }; 
  } 

  params = { 
    from: params.from || 'zh', 
    to: params.to || 'en', 
    query: params.query || '' 
  }; 
   
  var data = querystring.stringify(params); 
    options = { 
      host: 'fanyi.baidu.com', 
      port: 80, 
      path: '/v2transapi', 
      method: 'POST', 
      headers: { 
        'Content-Type':'application/x-www-form-urlencoded', 
        'Content-Length': data.length 
      } 
    }; 
  
  var req = http.request(options, function(res) { 
    var result = ''; 

    res.setEncoding('utf8'); 

    res.on('data', function(data) { 
      result += data; 
    }); 

    res.on('end', function() { 
    //console.log(result);
      var obj = JSON.parse(result);
      console.log(obj);
      var str = obj.trans_result.data[0].dst; 
      callback(str); 
    }); 
  }); 
  
  req.on('error', function(err) { 
    console.log(err); 
    setTimeout(function() { 
      translation(query, callback); 
    }, 3000); 
  }); 
  

  req.write(data); 
  req.end(); 


}; 

參數:

params = { 
   from: params.from || 'zh', //原來是什么語言                
   to: params.to || 'en', //要翻譯為什么語言         
   query: params.query || ''  //要翻譯的語句
 }; 

使用百度翻譯的api,必須知道每種語言,百度翻譯使用什么單詞表示的(本人整理):


百度翻譯語言表示
百度翻譯語言表示

解決語音問題:

這是百度翻譯女聲語音的url,喜歡的朋友可以收藏,以后可能用得上
注意里面有兩個參數,一個是lan意思是要讀出出來的是什么語言,zh是中文,en是英文,很遺憾,這個url這可以播報中文和英文的語音,其他的小語種不可以這也是我的小程序只可以有中文和英文兩種語言的語音的原因,第二個參數是text就是要播報的文本是什么


官方文檔:

其實在幾個月之前我就開始關注它,而且小程序發布那天是9號,那時候我正好考試,因為小程序是新事物,當時我真的有點忍不住,但是又要復習考試,所以很不爽,放假之后我就開始看微信小程序的官方文檔 通俗易懂很不錯。個人推薦想學習小程序的就按照這份官方文檔按順序看吧,其它比如掘金或者w3school也有,但是這畢竟是官方的,比較權威。語言是基于es6,注意這里使用的wxml,wxss,是是對應html和css的,wxml跟html語法上相似,wxss語法就是跟css一樣。


注意事項:

首先開發小程序是需要一個APPID的

這個在教程官方文檔里面的官方文檔里面會說到,但是這個微信小程序表面上是必須具有個體戶工商營業執照者企業營業執照才可以注冊的,但是像我這種窮學生要是想學一下小程序怎么辦呢?這時候你需要這個 我就是像這樣申請一個小程序賬號,得到一個APPID,注意不需要搞這個微信認證的,這個專空子申請的APPID只可以用來開發,是沒辦法拿來發布小程序的,認證也是認證不了的

不需認證
不需認證

在小程序里面的wx.reques函數在是用來向你的后端服務器發出請求的

wx.request({
  url: 'test.php', //僅為示例,并非真實的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

注意這個函數的url必須是https,這是除了看文檔之外我花費時間最多的地方


接上面講https

這個真的浪費我很多時間,我的后端是在我的騰訊云服務器使用nodejs語言搭建的server,因為小程序必須的request的url必須是https這就需要你的服務器具有ssl證書。如果你使用的騰訊云服務器的話,登錄你的騰訊云服務器云主機,在上面的ssl證書管理那里你會看到這個:

ssl證書
ssl證書

你需要申請證書,按照指引走就行,申請之后就會看到截圖那樣的證書申請好在那里了,下載之后會發現主要有三部分:Apache, Nginx, IIS:


ssl證書
ssl證書

注意:證書的安裝騰訊云的文檔不是說的太明白,我當時就是搞得一臉懵逼。因為我的的服務端是用nodejs寫的,所以需要安裝Nginx服務器(涉及Nginx反向代理nodejs項目),Nginx的安裝教程

安裝之后你就可以使用http://yourDomainName yourDomainName是你的域名(沒有域名的話需要自己申請一個,在騰訊云上有得買,加上優惠券還是挺便宜的,但是之后幾年的價格怎樣不知道,想要免費的域名也可以,可以自行谷歌百度搜素一下就行) 來訪問你的服務器的了(默認是80端口),然后安裝Nginx證書,教程

安裝好ssl證書之后,你就可以適應https://yourDomainName 來訪問你的服務器

接著就是使用你的Nginx服務器來代理你作為微信小程序后端的nodejs項目了


先說說使用Nginx反向代理nodejs項目是什么意思

Nginx是安裝在你服務器里面,他可以占據著一個端口,比如443,然后你運行你的nodejs項目,讓它在3000端口跑,這時候你讓Nginx代理,讓別人訪問你服務器443端口的時候,轉而自動訪問你nodejs所在3000端口,這就是使用Nginx反向代理nodejs項目 教程 核心部分如下(下圖源自Nginx的nginx.conf配置文件):

nginx.conf配置文件
nginx.conf配置文件


forever(后端小tips)

forever是可以讓nodejs項目在后臺運行的,只需要npm install forever一下就可以使用forever start server.js來運行你的expres項目,簡單好用,當你想停止下來debug的時候就forever stop server.js一下就行


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,748評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,165評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,595評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,633評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,435評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,943評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,035評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,175評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,713評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,599評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,788評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,303評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,034評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,412評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,664評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,408評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,747評論 2 370

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,778評論 18 139
  • 第一章 Nginx簡介 Nginx是什么 沒有聽過Nginx?那么一定聽過它的“同行”Apache吧!Ngi...
    JokerW閱讀 32,733評論 24 1,002
  • 不知何時, 喜歡: 傷春悲秋, 莫名感傷, 無病呻吟。 其實, 那么美的日子, 那么晴的天氣, 那么開心的我。
    棠洛語閱讀 178評論 0 1
  • ARM課程 回顧 進入虛擬機,因為之前已經燒寫好了,直接進行以下步驟。 ls -l /dev/ttyUSB0 su...
    I踏雪尋梅閱讀 378評論 0 1
  • 這周我們讀的書是《非暴力溝通》,我主要學到了一下幾點: 1 掌控情緒 發脾氣誰都會,控制住不發脾氣是本事。 人有七...
    阿鵬船長閱讀 329評論 1 2