如何創建HTML5與原生UI組件混合的移動應用程序

openkk 12年前發布 | 41K 次閱讀 HTML5 移動開發

本文將介紹如何使用Trigger.io創建原生的頂部欄、標簽欄、以及HTML/CSS/JavaScript的混合型移動應用程序。

以后我們將添加更多的原生UI組件到Trigger.io，但現在你只需要使用web技術就可以在IOS和Android上創建漂亮而流暢的移動應用。

這是一個簡單的菜譜應用程序的屏幕截圖，我們使用Trigger.io提供的原生UI組件，我們將向你展示該應用程序是如何構建的：

配置Trigger.io，并添加頂部欄和標簽欄到應用程序中
給原生控件添加樣式
用JavaScript給控件添加監聽器

你可以從github中獲取項目的源代碼：https://github.com/trigger-corp/forge-template-list-and-detail

第一步：創建App并添加頂部欄

你需要使用Trigger.io生成App的基本框架，然后使用web技術來獲取原生的UI組件。因此，在開始之前，你需要先進行注冊簽約。這里有完整的文檔教你如何設置Trigger.io，一旦你完成設置只需要運行：

forge create

這時會提示你給app命名，命令完成后會自動生成app的項目文件夾。

讓我們開始給app添加一個頂部欄，之后在Android模擬器上運行測試。

將src/config.json文件的代碼替換成以下代碼：

{
    "author": "amir@trigger.io",
    "config_version": "2",
    "description": "View ingredients for your favorite recipes",
    "modules": {
        "is": true,
        "logging": {
            "level": "INFO"
        },
        "prefs": true,
        "request": {
            "permissions": []
        },
        "tools": true,
        "topbar": true
    },
    "name": "Recipe list",
    "platform_version": "v1.3",
    "version": "0.1"
}

在模塊配置中設置頂部欄可用：“topbar”: true。

然后修改一下index.html

     


        
            Hello world!

現在你可以使用forge命令運行并測試app了：

forge build

forge run android --android.sdk ~/Desktop/android-sdk-macosx

如何創建HTML5與原生UI組件混合的移動應用程序

第二步：配置標簽欄

在app的底部添加標簽欄也很容易，你只需要在src/config.json（模塊配置）中加上“tabbar”: true，如下：

{
    "author": "amir@trigger.io",
    "config_version": "2",
    "description": "View ingredients for your favorite recipes",
    "modules": {
        "is": true,
        "logging": {
            "level": "INFO"
        },
        "prefs": true,
        "request": {
            "permissions": []
        },
        "tools": true,
        "topbar": true,
        "tabbar": true
        },
    "name": "Recipe list",
    "platform_version": "v1.3",
    "version": "0.1"
}

但是，在運行之前，我們還需要添加一些按鈕和偵聽器。這樣，當點擊每個選項卡時，我們就可以執行JavaScript來處理頁面的切換。

讓我們添加一個JavaScript文件，命名為src/js/main.js：

// A helper function so that when we change tab the web view scrolls to the top of the new page
var scrollTop = function () {
    setTimeout(function () {
        document.body.scrollTop = 0;
    }, 0);
}

// This is the method we are going to call when a tab button is pressed
var updateRecipes = function (search) {
    scrollTop();
    // For now just pop up a message with the tab which was pressed
    alert(search);
}

// Set a better title for the topbar
forge.topbar.setTitle("Recipe shopping list");

// Add our 3 tab buttons to the tabbar and add press listeners
var starterButton = forge.tabbar.addButton({
    text: "Starters",
    icon: "img/tomato.png",
    index: 0
}, function (button) {
    button.onPressed.addListener(function () {
        updateRecipes("starter");
    });
    // This is the default button, activate it immediately
    button.setActive();
    updateRecipes("starter");
});

var mainButton = forge.tabbar.addButton({
    text: "Mains",
    icon: "img/pizza.png",
    index: 1
}, function (button) {
    button.onPressed.addListener(function () {
        updateRecipes("main");
    });
});
var dessertButton = forge.tabbar.addButton({
    text: "Desserts",
    icon: "img/strawberry.png",
    index: 2
}, function (button) {
    button.onPressed.addListener(function () {
        updateRecipes("dessert");
    });
});

這里我們調用了forge.topbbar.setTitle，該API會改變頂部的標題，然后用forge.tabbar.addButton來添加標簽欄的按鈕，以及該按鈕的監聽器。

我們修改src/index.html這個文件：

     
        


        
            Hello world!

src/js/main.js文件里面引用了一些圖片，這些圖片你可以從代碼示例中獲取，并放在src/img目錄里。

這次我們在IOS里面運行測試：

如何創建HTML5與原生UI組件混合的移動應用程序

第三步：創建列表視圖

OK，現在我們需要創建菜譜列表，并讓它們點擊后可跳轉。

我們將使用輕量級的zepto.js庫，以幫助我們處理DOM操作。我們已經發表了一篇關于如何使用zepto.js和backbone.js快速創建HTML5的移動應用程序的博客。因此，我們就不在這對做介紹了。接下來在菜譜列表中使用HTML/CSS/JavaScript。

首先，讓我們將菜譜數據導入到zepto.js庫。你可以下載zepto.js和data.js從Github上的例子，并把它們放在你的src/js目錄里。

然后我們更新src/js/的main.js中的updateRecipe功能 - 這是當標簽欄按鈕被按下時調用的：

var updateRecipes = function (search) {
    scrollTop();
    $('.content').html('
');
    $.each(data[search], function (i, recipe) {
        var el = $(''+recipe.title+'
');
        el.on('click', function () {
            scrollTop();
            $('.content').html(''+recipe.title+'

View full recipe

');
            $.each(recipe.ingredients, function (i, ingredient) {
                $('.ingredients').append('
'+ingredient+'
');
            });
            forge.tabbar.setInactive();
        });
        $('.list').append(el);
    });
}