微信小程序 通过百度API接口实现汉译英翻译
目录
先看一下做出来的效果：
一、微信开发平台的网址（微信开发者工具的官方使用说明）
二、百度API（文本翻译的API）
三、进入正文，微信小程序的代码部分
先看一下做出来的效果：
一、微信开发平台的网址（微信开发者工具的官方使用说明）
基础 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/
二、百度API（文本翻译的API）
文本翻译_机器翻译-百度AI开放平台 (baidu.com)https://ai.baidu.com/tech/mt/text_trans
1、点击立即使用，然后登录账号（需要实名认证），然后看到下图的界面。
2、先点击“去领取”，进入如下页面。
3、 点击“去创建”进入下图界面
4、跳转如下界面：
5、点击“查看应用详情”，获取“API Key”和“Secret Key”。这两条key下面步骤需要用。
6、然后点击左侧栏的“技术文档”-->“API文档”-->“文本翻译-通用版”
机器翻译 - 文档 (baidu.com)https://cloud.baidu.com/doc/MT/s/4kqryjku9
7、点击蓝色字体跳转页面
8、找到并复制下图网址，进行替换后，在新的页面打卡替换后的网址
！！！注意“&”符号要保留
9、在新的网页输入网址出现下图界面，获取access_token
10、进入使用说明，按照文档要求来写。
机器翻译 - 文档 (baidu.com)https://cloud.baidu.com/doc/MT/s/4kqryjku9
三、进入正文，微信小程序的代码部分
1、wxml代码
<view></view>
<view class="head"><rich-text>翻译</rich-text>
</view><view class="t_c"><view class="text"><text class="info">请输入翻译内容：</text><!-- 输入的时候就会触发inputInfo函数，{{text}}里的text对应js的data中的text --><textarea class="my_input" rows="8" value="{{text}}" bindinput="inputInfo"></textarea><view class="action"><!-- bindtap里的函数在点击对应图片时被调用 点“译”调用search函数，del函数同理（调用时清空翻译内容和翻译结构） --><image class="search" src="../../icon/翻译.png" bindtap="search"></image><image class="del" bindtap="del" src="../../icon/删除.png"></image></view></view><view class="tran_text"><text class="info">翻译结果：</text><!-- {{translation}}对应data中的translation即翻译结果 --><textarea class="tran_content" rows="8" value="{{translation}}"></textarea></view>
</view>2、wxss代码（样式）
Page{background-color: #5f8ae7;
}.head{font-size: 42rpx;text-align: center;background-color: #3d59ab;padding: 10rpx;color: #fff;
}.info{margin-top: 10rpx;margin-left: 10rpx;margin-bottom: 10rpx;color: white;
}.text{width: auto;height: 530rpx;display: flex;justify-content: flex-start;flex-wrap: wrap;border-bottom: 20rpx white solid;
}.my_input{width: 100%;height: 350rpx;margin-left: 1rpx;margin-right: 1rpx;margin-bottom: 15rpx;background-color: white;border: 2rpx solid #292421;color: #292421;
}.action{width: 100%;height: 28rpx;display: flex;margin: 15px;justify-content:space-between;align-items: center;
}
.search{width: 64rpx;height: 64rpx;
}.del{width: 64rpx;height: 64rpx;
}.tran_text{width: auto;height: 480rpx;display: flex;justify-content: flex-start;flex-wrap: wrap;
}.tran_content{width: 100%;height: 390rpx;margin-left: 1rpx;margin-right: 1rpx;background-color: white;border: 2rpx solid #292421;
}
3、js代码及解释（json文件没改动）
（1）wx.request使用说明如下文档。
RequestTask | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
（2）获取下面url的前缀
（3）打印res，找翻译结果，如下图所示
js代码
Page({data: {token:'24.14dcdb7e07a794f2ffd736641847f7bf.2592000.1666952487.282335-27674044',//刚刚在百度API网页上获取的access_toknetext: "请输入需要翻译的中文内容",//初始页面展示的文本内容，对应“请输入翻译内容”下面输入框的文本translation: "",//用于接收翻译的结果，然后显示在页面上},// 点击删除图片时，调用del函数del(){// this.setData可以修改data中的数据，并且刷新页面，显示修改好的新数据this.setData({text:'',translation:''})},// 点击“译”时，调用search函数。这里需用调用wx.request来发起 HTTPS 网络请求。// 后附wx.request的说明文档。search(){console.log(this.data.text);wx.request({// https://aip.baidubce.com/rpc/2.0/mt/texttrans/v1?access_token= 获取方式见 文章的3.（2）url: 'https://aip.baidubce.com/rpc/2.0/mt/texttrans/v1?access_token='+this.data.token,data:{'from':'zh',//源语种方向'to':'en',//目标语种方向'q':this.data.text//输入的要翻译的内容，我这里用this.data.text来取上面输入的文本内容，即需要翻译的文本内容},header:{//请求头'Content-Type': 'application/json;charset=utf-8'},method:'POST',//HTTP 方法success: (res)=>{//函数调用成功的回调函数// 可以打印一下res，然后发现结果存在res.data.result.trans_result[0].dst// console.log(res);let result = res.data.result.trans_result[0].dst//新建一个变量result来存翻译的结果// console.log(res.data.result.trans_result[0].dst)this.setData({translation:result//把结果展示在页面上})},fail:(err)=>{console.log(err);}})},// 输入时触发该函数，用于获取要翻译的内容inputInfo(e){// console.log(e.detail.value)// this.data.text = e.detail.valuethis.setData({text:e.detail.value,})},
})微信小程序 通过百度API接口实现汉译英翻译相关推荐
- 微信小程序如何封装api接口
微信小程序如何封装api接口 一. 小程序接口请求流程 二,域名配置 一定要配置https,小程序上配置的域名必须是域名备案的 三.打开微信开发者工具,打开你的项目,点开详情.确认一下域名是否一一匹对 ...
- 微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息 微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
- 微信小程序+OLAMI自然语言API接口制作智能查询工具--快递、聊天、日历等
微信小程序最近比较热门,再加上自然语义理解也越来越被人关注,于是我想赶赶潮流,做一个小程序试试.想来想去快递查询应该是一种比较普遍的需求. 如果你也在通过自然语言接口做点什么,希望我的这篇博客能帮到你 ...
- 微信小程序利用百度api达成植物识别
看完本文你可学会: 如何使用百度智能云 如何在微信小程序中去接入百度api,达成植物识别的效果 如何使用百度智能云? 官网:https://cloud.baidu.com 进入官网,在用户中心下选择图 ...
- 【微信小程序调用百度API实现图像识别功能】----项目实战
本章主要讲述: 如何更快的上手小程序 如何搭建一个页面以及跳转到另一个页面 如何调用百度API接口实现图像识别技术 如何在微信小程序的后台添加合法域名 私信获取源码,有问题可以关注留言或私信,计算机毕 ...
- 微信小程序上传API接口wx.uploadFile的坑
小程序的坑比较多,原因在于小程序开发文档相当的不全,所以开发小程序是比较痛苦的,但也正是因为坑多,技术却一步一步的往上升了...不知道该笑还是该哭. 进入正题:wx.uploadFile的坑 坑一:返 ...
- 微信小程序使用豆瓣API接口
douban: function (){ wx.request({ url: 'https://douban.uieee.com/v2/book/1220562', //必须要设置"cont ...
- 百度小程序源码php_dedecms织梦小程序插件万能api接口插件（支持百度微信小程序）...
dedecms织梦小程序插件万能api接口,让你无需有php或sql基础,不需要依赖任何第三方网站授权,后台一键安装,小程序分分钟配置完成,让你拥有真正属于自己的小程序!支持gbk和utf版 dede ...
- dedecms织梦小程序插件万能api接口插件1.1版上线（同步支持百度小程序、微信小程序）
我自己开发的dedecms织梦小程序插件万能api接口,无需有php或sql基础,不需要依赖任何第三方网站授权,后台一键安装,支持gbk和utf版 dedecms小程序插件目前主要的功能有: (1)网 ...
- 微信小程序和百度的语音识别接口详解
介绍 因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享. 技术关键字 微微信小程序 百度语音接口 nodejs,express fluent-ffmegp 环境 ...
最新文章
- matlab数字图像处理初级入门
- 为什么我们做分布式的使用都是用Redis？
- PHP堆实现TopK算法实例,top-k 算法浅析
- 分析:windows下cmd默认的编码是ASCII编码 ,windows的中文环境下编码是GBK 方法一:在保存输出流保存的时候做一个对文字GBK编码,在输出到文件 如下 [python] view
- 【项目管理】虚拟团队
- linux 环境下 openssl 生成ecdsa公、私钥
- 曾是微信最大对手的它，如今却黯然退场，一代即时通讯App就此谢幕！
- springboot2的redis缓存管理器cacheManager配置，使存入json格式数据
- System.arrayCopy()和普通数组复制之间的效率差别
- Oracle禁止connect / as sysdba方式登录
- 放苹果（整数划分变形题 水）poj1664
- 无限宽神经网络 - 神经网络正切核理论【NTK】
- 电脑重装系统超详细完整教程图解
- 如何修改服务器ntp配置,[修改]Linux下NTP服务器的配置
- 应届毕业生在面试的时候应该如何谈薪资待遇？
- 毕业设计网站项目的开发流程
- 聊聊新股市盈率的那些事
- 史蒂夫·乔布斯传记_Chapter 4: Atari and India
- 图像相似度对比-直方图
- [转]SpringMVC常见面试题总结