小程序模板網(wǎng)

百度翻譯api實(shí)現(xiàn)微信翻譯小程序

發(fā)布時(shí)間:2017-11-29 18:08 所屬欄目:小程序開發(fā)教程

效果圖如下:我的小程序要點(diǎn):nodejs百度翻譯api騰訊云服務(wù)器ssl證書nginx反向代理nodejs項(xiàng)目使用:下載本項(xiàng)目到本地或者你的服務(wù)器,進(jìn)入server文件夾,輸入npm install安裝依賴,等待安裝 ...

 
 
 

效果圖如下:


我的小程序

要點(diǎn):

  • nodejs
  • 百度翻譯api
  • 騰訊云服務(wù)器
  • ssl證書
  • nginx反向代理nodejs項(xiàng)目

使用:

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

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

這個(gè)小程序,部署在我的騰訊云服務(wù)器里面,在3000端口跑,用Nginx在443端口進(jìn)行代理,在server文件夾內(nèi)的server.js負(fù)責(zé)接收小程序發(fā)送過來的請(qǐng)求,并且使用translate.js里面的函數(shù)進(jìn)行翻譯,最后把結(jié)果反饋給小程序。

translate.js里面使用百度翻譯的api,主要使用http.request()函數(shù),百度翻譯的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(); 


};

參數(shù):

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

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


解決語音問題:

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


官方文檔:

其實(shí)在幾個(gè)月之前我就開始關(guān)注它,而且小程序發(fā)布那天是9號(hào),那時(shí)候我正好考試,因?yàn)樾〕绦蚴切率挛?,?dāng)時(shí)我真的有點(diǎn)忍不住,但是又要復(fù)習(xí)考試,所以很不爽,放假之后我就開始看微信小程序的官方文檔 通俗易懂很不錯(cuò)。個(gè)人推薦想學(xué)習(xí)小程序的就按照這份官方文檔按順序看吧,其它比如掘金或者w3school也有,但是這畢竟是官方的,比較權(quán)威。語言是基于es6,注意這里使用的wxml,wxss,是是對(duì)應(yīng)html和css的,wxml跟html語法上相似,wxss語法就是跟css一樣。


注意事項(xiàng):

首先開發(fā)小程序是需要一個(gè)APPID的

這個(gè)在教程官方文檔里面的官方文檔里面會(huì)說到,但是這個(gè)微信小程序表面上是必須具有個(gè)體戶工商營業(yè)執(zhí)照者企業(yè)營業(yè)執(zhí)照才可以注冊(cè)的,但是像我這種窮學(xué)生要是想學(xué)一下小程序怎么辦呢?這時(shí)候你需要這個(gè) 我就是像這樣申請(qǐng)一個(gè)小程序賬號(hào),得到一個(gè)APPID,注意不需要搞這個(gè)微信認(rèn)證的,這個(gè)??兆由暾?qǐng)的APPID只可以用來開發(fā),是沒辦法拿來發(fā)布小程序的,認(rèn)證也是認(rèn)證不了的

在小程序里面的wx.reques函數(shù)在是用來向你的后端服務(wù)器發(fā)出請(qǐng)求的

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

注意這個(gè)函數(shù)的url必須是https,這是除了看文檔之外我花費(fèi)時(shí)間最多的地方


接上面講https

這個(gè)真的浪費(fèi)我很多時(shí)間,我的后端是在我的騰訊云服務(wù)器使用nodejs語言搭建的server,因?yàn)樾〕绦虮仨毜膔equest的url必須是https這就需要你的服務(wù)器具有ssl證書。如果你使用的騰訊云服務(wù)器的話,登錄你的騰訊云服務(wù)器云主機(jī),在上面的ssl證書管理那里你會(huì)看到這個(gè):

你需要申請(qǐng)證書,按照指引走就行,申請(qǐng)之后就會(huì)看到截圖那樣的證書申請(qǐng)好在那里了,下載之后會(huì)發(fā)現(xiàn)主要有三部分:Apache, Nginx, IIS:

注意:證書的安裝騰訊云的文檔不是說的太明白,我當(dāng)時(shí)就是搞得一臉懵逼。因?yàn)槲业牡姆?wù)端是用nodejs寫的,所以需要安裝Nginx服務(wù)器(涉及Nginx反向代理nodejs項(xiàng)目),Nginx的安裝教程

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

安裝好ssl證書之后,你就可以適應(yīng)https://yourDomainName 來訪問你的服務(wù)器

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


先說說使用Nginx反向代理nodejs項(xiàng)目是什么意思

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


forever(后端小tips)

forever是可以讓nodejs項(xiàng)目在后臺(tái)運(yùn)行的,只需要npm install forever一下就可以使用forever start server.js來運(yùn)行你的expres項(xiàng)目,簡單好用,當(dāng)你想停止下來debug的時(shí)候就forever stop server.js一下就行

github地址:https://github.com/15331094/translate-wechat-mini-program 
項(xiàng)目下載: translate-wechat-mini-program-master.zip



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17992.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢