HBuilder开发词典app（四）--调用有道api完成翻译功能

这一节也比较简单，就是建一个textarea获取用户输入的值，然后调用有道api进行翻译，最后展现在相应位置，需要注意的是，点击头部的翻译按钮自动跳转到翻译页面，并且底部栏点亮样式会随之改变：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>

</head>
<body>
<div class="mui-content">
    <div style="width:90%; padding-top:38px; margin:0 auto;">
        <textarea id="keywords" style="width:100%; height:128px;" placeholder="请输入要翻译的文本"></textarea>
    </div>
    <div style="width:90%; margin:0 auto;">
        <button type="button" id="submitBtn" class="mui-btn" style="width:100%;">开始翻译</button>
    </div>
    <div style="width:90%; background:#FFFFFF; margin:0 auto; margin-top:18px; display:none;" id="resShow">
        <p style="line-height:1.8em; font-size:15px; padding:10px;"></p>
    </div>
</div>

    <script src="js/mui.min.js"></script>
    <script src="js/h.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        var _index, _self, _next,_prev;
        h('#submitBtn').tap(function(){
            var keywords = h('#keywords').val();
            if(keywords.length < 1){mui.toast('请输入要翻译的文本'); return false;}
                mui.getJSON(
        'http://fanyi.youdao.com/openapi.do?keyfrom=testorot&key=1145972070&type=data&doctype=json&version=1.1&q='+keywords,
        function(data){
            console.log(JSON.stringify(data));
            h('#resShow').find('p').html(data.translation);
            h('#resShow').show();
        }
    );
    });
        mui.plusReady(function(){
            _self = plus.webview.currentWebview();
           _next = plus.webview.getWebviewById('sub3.html');
           _prev = plus.webview.getWebviewById('sub1.html');
           _index = plus.webview.getLaunchWebview();
           //向右滑动
            _self.drag({
                direction : "left",
                moveMode  : "followFinger"
            },{
                view : _next,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav3").addClass("mui-active")')
                }
            });
            //向左滑动
            _self.drag({
                direction : "right",
                moveMode  : "followFinger"
            },{
                view : _prev,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav1").addClass("mui-active")')
                }
            });
        });
    </script>
</body>
</html>

主要代码在这，还需要添加一些css样式，已经加到mui.css尾部了，最后index.html里需要做一个searchBut的触发事件：


h('#searchBut').tap(function(){
    changSub(2);
    h('#navFooter').find("a").removeClass('mui-active');
    h('#nav2').addClass('mui-active');
});

HBuilder开发词典app（四）--调用有道api完成翻译功能

猜你喜欢