初步学习微信小程序，接入百度翻译API

首先去百度开发平台申请通用翻译服务，记下APPID和密钥

需要下载的相关资源：点我；这些都是从官网上下载的MD5和实例。

在小程序中创建如下结构，红框中是有用的相关内容

一、select翻译语言选择框

select是“请选择组件”，实现代码如下：

1. select.wxml文件内容

   <view class='ms-content-box'>
       <view class='ms-content' bindtap='selectToggle'>
           <view class='ms-text'>{{selectText}}</view>
            <view class="{{selectShow ? 'icon-up' : 'icon-down'}}"></view>
       </view>
       <view class='ms-options' wx:if="{{selectShow}}">
           <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='ms-option' bindtap='setText'>{{item.text || item.value || item}}</view>
       </view>
   </view>
   

2. select.wxss文件内容

   .ms-content-box{width:100%;margin-top:20rpx}.ms-content{border:1px solid #e2e2e2;background:white;font-size:16px;position:relative;height:30px;line-height:30px}.ms-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 40rpx 0 6rpx;font-size:14px;margin-left:20rpx}.ms-options{background:white;width:inherit;position:absolute;border:1px solid #e2e2e2;border-top:0;box-sizing:border-box;z-index:3;max-height:150px;overflow:auto}.ms-option{height:60rpx;line-height:40rpx;border-top:1px solid #e2e2e2;padding:0 6rpx;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:35rpx}.ms-item:first-child{border-top:0}.icon-right,.icon-down,.icon-up{display:inline-block;padding-right:13rpx;position:absolute;right:20rpx;top:10rpx}.icon-right::after,.icon-down::after,.icon-up::after{content:"";display:inline-block;position:relative;bottom:2rpx;margin-left:10rpx;height:10px;width:10px;border:solid #bbb;border-width:2px 2px 0 0}.icon-right::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icon-down::after{bottom:14rpx;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.icon-up::after{bottom:0rpx;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
   

3. select.json文件内容

   {
     "component": true,
     "usingComponents": {}
   }
   

4. select.js文件内容

   Component({properties:{propArray:{type:Array,}},data:{selectShow:false,selectText:"请选择",},methods:{selectToggle:function(){var nowShow=this.data.selectShow;this.setData({selectShow:!nowShow})},setText:function(e){var nowData=this.properties.propArray;var nowIdx=e.target.dataset.index;var nowText=nowData[nowIdx].text||nowData[nowIdx].value||nowData[nowIdx];this.setData({selectShow:false,selectText:nowText,});this.triggerEvent("select",nowData[nowIdx])}}});
   

二、MD5加密函数

md5.js是百度翻译的加密方式

var MD5 = function (string) {
function RotateLeft(lValue, iShiftBits) {
return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
}

function AddUnsigned(lX,lY) {
var lX4,lY4,lX8,lY8,lResult;
lX8 = (lX & 0x80000000);
lY8 = (lY & 0x80000000);
lX4 = (lX & 0x40000000);
lY4 = (lY & 0x40000000);
lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
if (lX4 & lY4) {
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
}
if (lX4 | lY4) {
if (lResult & 0x40000000) {
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
} else {
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
}
} else {
return (lResult ^ lX8 ^ lY8);
}
}

function F(x,y,z) { return (x & y) | ((~x) & z); }
function G(x,y,z) { return (x & z) | (y & (~z)); }
function H(x,y,z) { return (x ^ y ^ z); }
function I(x,y,z) { return (y ^ (x | (~z))); }

function FF(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function GG(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function HH(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function II(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function ConvertToWordArray(string) {
var lWordCount;
var lMessageLength = string.length;
var lNumberOfWords_temp1=lMessageLength + 8;
var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
var lNumberOfWords = (lNumberOfWords_temp2+1)16;
var lWordArray=Array(lNumberOfWords-1);
var lBytePosition = 0;
var lByteCount = 0;
while ( lByteCount < lMessageLength ) {
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)8;
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
lByteCount++;
}
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)*8;
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
lWordArray[lNumberOfWords-2] = lMessageLength<<3;
lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
return lWordArray;
};

function WordToHex(lValue) {
var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
for (lCount = 0;lCount<=3;lCount++) {
lByte = (lValue>>>(lCount*8)) & 255;
WordToHexValue_temp = "0" + lByte.toString(16);
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
}
return WordToHexValue;
};

function Utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";

for (var n = 0; n < string.length; n++) {

var c = string.charCodeAt(n);

if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}

}

return utftext;
};

var x=Array();
var k,AA,BB,CC,DD,a,b,c,d;
var S11=7, S12=12, S13=17, S14=22;
var S21=5, S22=9 , S23=14, S24=20;
var S31=4, S32=11, S33=16, S34=23;
var S41=6, S42=10, S43=15, S44=21;

string = Utf8Encode(string);

x = ConvertToWordArray(string);

a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;

for (k=0;k<x.length;k+=16) {
AA=a; BB=b; CC=c; DD=d;
a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
d=GG(d,a,b,c,x[k+10],S22,0x2441453);
c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
a=II(a,b,c,d,x[k+0], S41,0xF4292244);
d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
c=II(c,d,a,b,x[k+6], S43,0xA3014314);
b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
a=AddUnsigned(a,AA);
b=AddUnsigned(b,BB);
c=AddUnsigned(c,CC);
d=AddUnsigned(d,DD);
}
var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);

return temp.toLowerCase();
}
module.exports={
MD5: MD5
}

三、translate

1. translate.wxml

   <!--pages/translate/translate.wxml-->
   <view>
   <view>
     <view class="choose">
       <Select prop-array='{{selectArray}}' bind:select='select'></Select>
     </view>
     <view class="txtarea">
       <textarea value="{{txt}}" bindinput="getInputValue" class="txt" placeholder="请输入..."></textarea>
     </view>
   
     <view class="translatearea">
       <textarea value="{{translateResult}}" class="translatetxt" placeholder="翻译结果..."></textarea>
     </view>
   </view>
   
   <view class="but">
   <button bindtap="translateBut" style="width:35vw;color:#00FA9A;background-color:#FFFACD">翻译</button>
   <button bindtap="clearBut" style="width:35vw;color:#00FA9A;background-color:#FFFACD">清空</button>
   </view>
   </view>
   

2. translate.wxss

   page{background-color:#fff}.txt{margin:20rpx auto;font-size:35rpx;font-family:"Microsoft YaHei"}.txtarea{margin-top:20rpx;border:1rpx solid #e2e2e2}.translatearea{border:1rpx solid #e2e2e2;margin-top:10rpx}.translatetxt{margin:20rpx auto;font-size:35rpx;font-family:"Microsoft YaHei"}.but{display:flex;margin:60rpx auto}
   

3. translate.json

   {
     "usingComponents": { "Select": "/componet/select/select"}
   }
   

4. translate.js

   将translateBut函数中的APPID和key换成你自己的

   // pages/translate/translate.jsconst the_md5 = require("../../utils/md5")var inputTxt = '';var selectText='';Page({  /**   * 页面的初始数据   */  data: {    txt: "",    translateResult: "",    selectArray: [      {        "id": "10",        "text": "中译英"      },      {        "id": "21",        "text": "英译中"      }    ]  },  //清空  clearBut: function (e) {    this.setData({      txt: '',      translateResult: ''    })  },  //翻译  translateBut: function () {    var appid = '******';    var key = '******';    var salt = (new Date).getTime();    var from = 'auto';    var to = 'auto';    if(selectText==="中译英"){      from = 'zh',      to = 'en'    }else if(selectText==="英译中"){      from = 'en',      to = 'zh'    }       var query = inputTxt;    var str1 = appid + query + salt + key;    var sign = the_md5.MD5(str1);    let that = this;    if (query === undefined || query === '') {      return;    }    wx.request({      url: 'https://api.fanyi.baidu.com/api/trans/vip/translate',      type: 'get',      data: {        q: query,        appid: appid,        salt: salt,        from: from,        to: to,        sign: sign      },      success: function (res) {        // console.log(res)        that.setData({          translateResult: res.data.trans_result[0].dst        })      },    })  },  //获取要翻译的内容  getInputValue: function (e) {    inputTxt = e.detail.value  },  //获取翻译类型  select: function(e){    selectText = e.detail.text;  },})
   

四、把要访问的百度翻译API域名添加到微信小程序开发平台

登录 微信小程序开发平台 进入 “开发 >> 开发管理 >> 开发设置 >> 域名管理”，将 https://api.fanyi.baidu.com 添加到里面，保存并提交

最后的效果如下图所示：