HBuilder開發詞典app（四）--呼叫有道api完成翻譯功能

阿新 • • 發佈：2019-01-31

這一節也比較簡單，就是建一個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完成翻譯功能

這一節也比較簡單，就是建一個textarea獲取使用者輸入的值，然後呼叫有道api進行翻譯，最後展現在相應位置，需要注意的是，點選頭部的翻譯按鈕自動跳轉到翻譯頁面，並且底部欄點亮樣式會隨之改變： <!DOCTYPE html> <html&g

WEB開發者之混合開發APP（四），index.html 首頁

App專案的首頁，index.html.首頁顯示效果和樣式的部分，不在此討論，本專案採用的是mui框架。 mui框架（http://www.dcloud.io/mui.html）也是dcloud公

安卓開發實戰-記賬本APP（四）

今天實現的內容有：新增賬本資訊，個人頭像的切換，密碼的修改，退出登入。新增賬本資訊有三個功能： ①記一筆支出專案 ②記一筆收入專案 ③清空所有專案在此期間遇到的困難有：Activity與Fragment之間數值的傳遞問題，我利用Bundle物件來進行傳值，但是佈局檔案中fragment裡的name=&ld

安卓開發筆記 Activity（四）

nac 創建 intent nbsp star lda this 空白空白頁 Activity -> Intent -> Activity startActivity(Intent) 創建Activity 步驟：右擊->new

Java開發小技巧（四）：配置文件敏感信息處理

加載 gem 加密解密 -i false valid ges enc factory 前言不知道在上一篇文章中你有沒有發現，jdbc.properties中的數據庫密碼配置是這樣寫的： jdbc.password=5EF28C5A9A0CE86C2D231A526ED5

使用Formik輕松開發更高質量的React表單（四）其他幾個API解析

else errors method however obj disable user etc gree （下面部分內容正處於翻譯中，敬請稍等......） <Field /> <Field /> will automagically hook up

SpringCloud開發學習總結（四）—— 客戶端負載均衡Ribbon

均衡 spring java www ref discovery 聯合方式嘗試　　通過上一章《SpringCloud開發學習總結（三）—— 服務治理Eureka》，我們已經搭建起微服務架構中的核心組件——服務註冊中心（包括單點模式和高可用模式）。同時還註冊了一個服務，

Smobiler打包apk安裝包——C# 或.NET Smobiler例項開發手機app（六）

免責宣告：此文涉及“極光”、“高德”、“掌上川電”關鍵字。本人以傳遞知識的心態發表文章，若有侵權聯絡[email protected]即刪！目錄一、前言二、建立應用 1、註冊Smobiler的賬號 2、上傳資源 3、連線專案三、應用打包

Smobiler實現美觀登入介面——C# 或.NET Smobiler例項開發手機app（二）

目錄一、本文目標二、準備工作 1、資料庫 2、材料三、介面佈局 1、設定控制元件的屬性值（1）輸入框（2）圖片屬性（3） HandElectricity的標題的label屬性（4）登入按鈕（5）版權申明（

Smobiler資料準備與環境搭建——C# 或.NET Smobiler例項開發手機app（一）

目錄一、前言二、關於"選擇" 三、資料準備 1、 Smobiler介紹 2、三款開源軟體原始碼下載 3、控制元件使用例項四、環境搭建到實現HelloWorld 1、安裝VS2015及以上 2、安裝Designer 3、實現Hello

Android開發 - 掌握ConstraintLayout（四）建立基本約束

上一篇我們介紹了編輯器的基本使用，本文我們介紹建立基本的約束。 "約束"表示View之間的位置關係。當我們在ConstraintLayout佈局中建立View時，如果我們沒有新增任何約束，雖然在設計檢視我們可以拖動它們到任意位置，但是執行後都會在左上角的原點位置，同時代碼中也會給出警告：所以我們必須

嵌入式Linux應用開發完全手冊（四）UART

11. 通用非同步收發器 UART 11.1 UART原理，部件使用方法 11.1.1UART原理 UART是Universal Asynchronous Receiver Transmitter的縮寫，即通用非同步收發器 UART用來傳輸序列資料： - 傳送時，CPU將

ArcGIS API For JavaScript（四）呼叫GP服務--簡單緩衝區分析

ArcGIS API For JavaScript（四）呼叫GP服務--簡單緩衝區分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

微信開發學習總結（四）——自定義選單（5）——個性化選單介面

一、個性化選單介面說明為了幫助公眾號實現靈活的業務運營，微信公眾平臺新增了個性化選單介面，開發者可以通過該介面，讓公眾號的不同使用者群體看到不一樣的自定義選單。該介面開放給已認證訂閱號和已認證服務號。開發者可以通過以下條件來設定使用者看到的選單： 1、使用者標籤（開發者的

微信開發學習總結（四）——自定義選單（4）——自定義選單事件推送

一、自定義選單事件推送介面說明使用者點選自定義選單後，微信會把點選事件推送給開發者，請注意，點選選單彈出子選單，不會產生上報。請注意，第3個到第8個的所有事件，僅支援微信iPhone5.4.1以上版本，和Android5.4以上版本的微信使用者，舊版本微信使用者點選後將沒有迴應，開

微信開發學習總結（四）——自定義選單（3）——自定義選單刪除介面

自定義選單刪除介面使用介面建立自定義選單後，開發者還可使用介面刪除當前使用的自定義選單。另請注意，在個性化選單時，呼叫此介面會刪除預設選單及全部個性化選單。請求說明 http請求方式：GET https://api.weixin.qq.com/cgi-bin/menu/d

微信開發學習總結（四）——自定義選單（2）——自定義選單查詢介面

自定義選單查詢介面使用介面建立自定義選單後，開發者還可使用介面查詢自定義選單的結構。另外請注意，在設定了個性化選單後，使用本自定義選單查詢介面可以獲取預設選單和全部個性化選單資訊。請求說明 http請求方式：GET https://api.weixin.qq.com/cg

微信開發學習總結（四）——自定義選單（1）——自定義選單建立介面

一、自定義選單建立介面說明自定義選單能夠幫助公眾號豐富介面，讓使用者更好更快地理解公眾號的功能。開啟自定義選單後，公眾號介面如圖所示：請注意： ①自定義選單最多包括3個一級選單，每個一級選單最多包含5個二級選單。 ②一級選單最多4個漢字，二級選單最多7個漢字，多出來的部分將

微信開發學習總結（四）——自定義選單——自定義選單建立介面

一、自定義選單建立介面說明自定義選單能夠幫助公眾號豐富介面，讓使用者更好更快地理解公眾號的功能。開啟自定義選單後，公眾號介面如圖所示：請注意： ①自定義選單最多包括3個一級選單，每個一級選單最多包含5個二級選單。 ②一級選單最多4個漢字，二級選單最多7個漢

輕裝上陣Html5遊戲開發，JEESJS（四）

下面我將通過完善Demo的形式，來演示下用法。首先在html中匯入需要的庫，我定義了一個index.html用來作為演示的入口： index.html: <!DOCTYPE html> <html> <head> <title><

HBuilder開發詞典app（四）--呼叫有道api完成翻譯功能

相關推薦