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

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

环境

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

相关内容

Node.js有道翻译爬虫

客户端

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

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，编译小程序客户端

编译结果

左侧的模拟器可以看到

测试结果

最后

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