基于有道翻译的英翻中微信小程序

环境

微信开发者工具
微信小程序云开发
node.js v12.16.3
axios@0.20.0
cheerio@1.0.0-rc.3

客户端

创建新的微信小程序项目，创建时选择不使用小程序云开发，进入项目后自行编写云函数，并修改下列文件

project.config.json

project.config.json
其中 "cloudfunctionRoot" : "cloud/"用于设置云函数根目录，cloud/可以修改为任意目录名
修改<appid>

{"description": "项目配置文件","cloudfunctionRoot": "cloud/","packOptions": {"ignore": []},"setting": {"urlCheck": true,"es6": true,"postcss": true,"preloadBackgroundData": false,"minified": true,"newFeature": true,"coverView": true,"nodeModules": false,"autoAudits": false,"showShadowRootInWxmlPanel": true,"scopeDataCheck": false,"checkInvalidKey": true,"checkSiteMap": true,"uploadWithSourceMap": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""},"useCompilerModule": true,"userConfirmedUseCompilerModuleSwitch": false},"compileType": "miniprogram","libVersion": "2.13.0","appid": "<appid>","projectname": "spider","debugOptions": {"hidedInDevtools": []},"isGameTourist": false,"simulatorType": "wechat","simulatorPluginLibVersion": {},"cloudfunctionTemplateRoot": "cloudfunctionTemplate","condition": {"search": {"current": -1,"list": []},"conversation": {"current": -1,"list": []},"game": {"currentL": -1,"list": []},"miniprogram": {"current": -1,"list": []}}
}

App.js

app.js

修改下述代码中的<环境ID>

//app.js
App({onLaunch: function () {wx.cloud.init({env: "<环境ID>",// traceUser: true,});},globalData: {userInfo: null}
})

index.wxml

pages\index\index.wxml


<!--index.wxml-->
<view class="container"><view class="userinfo"><button bindtap="translate">翻译</button></view><view class="usermotto"><input placeholder="Word" bindinput="getWord"></input></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

index.js

pages\index\index.js

//index.js
//获取应用实例
const app = getApp()Page({data: {motto: '释义',word : ''},onLoad: function () {},translate: function(e) {var that = this;wx.cloud.callFunction({name: "translator",data: {word : that.data.word},success: (res) => {console.log(res.result["meaning"]);that.setData({motto : res.result["meaning"]});},fail: (res) => {console.log("fail", res);}});console.log(this.data.word);},getWord: function(e) {this.setData({word : e.detail.value});}
})

云函数

创建云函数

右击云函数根目录，点击新建Node.js云函数，输入translator保存，右击新建的Node.js云函数目录translator，点击在终端打开，输入npm install axios cheerio，进行npm安装

npm安装

npm install axios cheerio

index.js

基于有道翻译和爬虫技术获取英文的中文释义，将结果返回给小程序
爬虫获取英文的中文释义可以参考Node.js有道翻译爬虫
cloud\translator\index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数
exports.main = async (event, context) => {const cheerio = require("cheerio");const axios = require("axios");var str = null;try {const a = await axios.get(`http://www.youdao.com/w/eng/${event.word}`).then((response) => {let $ = cheerio.load(response.data);$(".results-content").each((index, element) => {str = String($(".trans-container").children().first().text()).replace(' ', '').replace('\n', '')console.log(str);});});} catch(err) {console.log(err);}return {meaning : str};
}

云函数部署

右击Node.js云函数目录，点击上传并部署：所有文件，等待更新云函数translator的云调用权限和上传云函数translator提示出现后上传成功

编译

点击上方的编译或快捷键Ctrl+S，编译小程序客户端

编译结果

左侧的模拟器可以看到

测试结果

最后

由于博主水平有限，不免有疏漏之处，欢迎读者随时批评指正，以免造成不必要的误解！