百度翻译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阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,598评论 18 139
  • 第一章 Nginx简介 Nginx是什么 没有听过Nginx?那么一定听过它的“同行”Apache吧!Ngi...
    JokerW阅读 32,637评论 24 1,002
  • 不知何时, 喜欢: 伤春悲秋, 莫名感伤, 无病呻吟。 其实, 那么美的日子, 那么晴的天气, 那么开心的我。
    棠洛语阅读 168评论 0 1
  • ARM课程 回顾 进入虚拟机,因为之前已经烧写好了,直接进行以下步骤。 ls -l /dev/ttyUSB0 su...
    I踏雪寻梅阅读 363评论 0 1
  • 这周我们读的书是《非暴力沟通》,我主要学到了一下几点: 1 掌控情绪 发脾气谁都会,控制住不发脾气是本事。 人有七...
    阿鹏船长阅读 319评论 1 2