微信小程序翻译实践:Node.js + 百度API + 腾讯云服务器

4 下载量 92 浏览量 更新于2024-08-26 收藏 397KB PDF 举报
该资源主要介绍如何使用Node.js、百度翻译API和微信小程序开发一个翻译应用。开发者通过腾讯云服务器部署项目,使用SSL证书确保安全访问,并借助Nginx进行反向代理。小程序的核心功能包括调用wx.request和onShareAppMessage微信API,以及利用百度翻译API进行文本翻译。 在实现这个微信翻译小程序的过程中,涉及的关键技术点包括: 1. **Node.js**:作为后端服务器的运行环境,Node.js在这里用于处理来自微信小程序的请求,与百度翻译API交互并返回翻译结果。 2. **百度翻译API**:百度提供的一种在线翻译服务,支持多种语言之间的互译。开发者需要在百度AI开放平台注册并获取API密钥,然后在后端代码中调用API进行翻译。 3. **腾讯云服务器**:作为项目的托管平台,提供稳定运行的计算资源。开发者需要在腾讯云上配置服务器环境,安装必要的软件和依赖。 4. **SSL证书**:为了满足微信小程序真机测试时必须使用HTTPS协议的要求,需要在服务器上配置SSL证书,以实现安全的HTTPS连接。 5. **Nginx反向代理**:Nginx是一个高性能的HTTP和反向代理服务器,这里用于将来自微信小程序的HTTPS请求转发到运行在非标准端口(如3000端口)上的Node.js服务。 6. **微信小程序开发**:在微信开发者工具中,开发者编写小程序的前端代码,使用wx.request向服务器发送请求,获取翻译结果。同时,利用onShareAppMessage API实现小程序的分享功能。 7. **核心代码示例**:在`translate.js`中,通过`http.request()`函数与百度翻译API通信,将请求参数(如源语言、目标语言和待翻译文本)转换为字符串并发送请求,然后处理响应,将翻译结果返回给小程序。 8. **部署流程**:首先,下载项目至本地或服务器,进入`server`目录执行`npm install`安装依赖,然后运行`npm start`启动服务。在微信开发工具中,将`wx.request`的URL指向服务器地址,并确保在真机测试时使用HTTPS。 这个项目结合了前后端开发技术,利用了第三方API服务,展示了如何构建一个实用的微信小程序翻译应用。通过学习和实践这个项目,开发者可以提升在微信小程序开发、服务器部署、API集成等方面的能力。
2019-09-23 上传
官方文档:其实在几个月之前我就开始关注它,而且小程序发布那天是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证书管理那里你会看到这个: 你需要申请证书,按照指引走就行,申请之后就会看到截图那样的证书申请好在那里了,下载之后会发现主要有三部分:Apache, Nginx, IIS: 注意:证书的安装腾讯云的文档不是说的太明白,我当时就是搞得一脸懵逼。因为我的的服务端是用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配置文件):我的小程序使用: 下载本项目到本地或者你的服务器,进入server文件夹,输入npm install安装依赖,等待安装完成输入npm start启动后端脚本,app文件夹使用微信开发工具打开,把pages文件夹内index.js中的wx.request中的url改为你的服务器域名或者ip地址(真机测试必须是https访问,这就是上面我煞费口舌说https的原因),也可以本地调试的话应该可以改为:localhost:端口我做的这个小程序是一个翻译助手,非常简单,微信的api我只是使用wx.request和onShareAppMessage两个重要的官方api函数,至于逻辑那些只能自己写小程序部分在这个项目的app文件夹里面,可以下载到本地,使用微信开发工具打开这个名为app的文件夹就可以打开我的这个小程序啦这个小程序,部署在我的腾讯云服务器里面,在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就是要播报的文本是什么效果图如下:foreverforever是可以让nodejs项目在后台运行的,只需要npm install forever一下就可以使用forever start server.js来运行你的expres项目,简单好用,当你想停止下来debug的时候就forever stop server.js一下就行