Native Script ~ 教你學識寫APPS II

Native Script可以幫本身識寫網頁,而從來未學過寫Apps嘅人去快速製造一隻Android 和IOS 。


當完成Native Script的基本安裝後(本篇使用javascripttns create first_app),可以開始編寫第一個Apps,開始次之前先了解整個結構。

打開First_app 文件夾裡面有幾個子目錄包括: app, node_modules platforms,所有應用程式代碼都係位於“App” 裡,JavaScript js)的檔案負責應用程式部分,而XML 檔案負責設計部分。”node_modules” library,放置plugin包含應用程序的npm模塊的位置。”Platform” 放置Android IOS 應用程式的地方,當執行 ”tns run android ” “tns run ios” “tns platform add android” “tns platform add ios” 後便會出現。

“App” 目錄裡面有一個叫做 main-page.xml 的文件,它是用戶界面的默認版面。在 main-view-model.js 中是默認的模型代碼,而 main-page.js 定義了應用程序邏輯。最後 app.js 包含了使用定義好的啟動應用程序的代碼。

先用一個簡單而常用的功能~ ”會員登入/ 註冊開始製作第一個Apps,首先係 “App” 建立一個叫“view” 的文件夾,然後在 ”View” 裡建一個名為”login” 的文件夾,於login文件夾內建立login.xml login.js

打開”App” –”app.ts” ”application.start({ moduleName: ‘main-page’ });” 改成applicationModule.start({ moduleName: “views/login/login” });
apps開啟時就會以views/login/login.xml 為第一個開啟頁。

1. 設定布局

開啟login.xml設定布局, 輸入以下的編碼:

“StackLayout”Native Script 的一種布局(其他布局方法可以參考:https://docs.nativescript.org/ui/layouts)。

2. CSS 的設計

另外可以於“App”->”app.css” 加入外觀的設計。

Page{

background-color: white;

    font-size: 17;

}

TextField{

    margin: 10;

    padding: 10;

}

Image{

    margin-top: 20;

   margin-left: 0;

    margin-right: 0;

     margin-bottom: 80;

}

Button{

     margin: 10;

     padding: 10;}

如果想把IOS Android 版本的外觀分開設計時可以先建立兩個不同的CSS 檔案,一個給IOS (app/platform.ios.css),一個給Android (app/platform.android.css),並於app.css 加入platform.css (@import url(‘~/platform.css’);)。小篇把以下的CSS 編碼加入到

platform.ios.css

.textField {

    border-width: 1;

}

.button{

background-color: #dee3ea;

}

login.xml button text 後方加入“class=”button”, TextField後方加入“class=”textField””, 如下:

 

3. 加入圖片
之後加入一張圖片於login.xml, 首先開一個新的文件夾 “App -> images”並放入圖片。

login.xml 輸入<Image src=”~/images/icon.png  height=”50%”>

接下來開始寫邏輯部份,開始先係 App建立文件夾 “Shared” 係裡面建立constants.js 的檔案,用來裝著API:

export var baseURI = “http://website.address”;

exports.checkLoginURI = exports.baseURI + “/verifyLogin”;  //用來驗證的位置

然後於“view->login->login.js”輸入以下編碼:

var frameModule = require(“ui/frame”); 

var config = require(“../../shared/constants”);

var fetchModule = require(“fetch”);

var http = require(“http”);

var page;

var utilityModule = require(“utils/utils”);

var fs = require(“tns-core-modules/file-system”);

//拿取用戶輸入的資料

exports.loaded = function(args) {

    page = args.object;

};

//登入

exports.login = function() {

        

        //拿取用戶輸入電郵

email = page.getViewById(“email”);

    //拿取用戶輸入密碼

    password = page.getViewById(“password”);

    

    //檢查登入

    http.request({

        url: config.checkLoginURI + “/post”,

        method: “POST”,

        headers: { “Content-Type”: “application/json” },

        content: JSON.stringify({ password: password.text,

email:email.text })

    }).then(function(result) {

        var json = JSON.parse(result.content);

//如果回應是 “N”則出現提示

        if (json.status == ‘N’) {

            alert({ title: “提示”, message: JSON.stringify(json.message), okButtonText: “Close” });

//如果回應是 “Y”則接入去 main-page

        } else {

file.writeText(JSON.stringify(json));

frameModule.topmost().navigate(“main-page”);

        }

    }, function(error) {

    });

}

然後儲存並於Terminal 輸入”tns run ios”,運行沒有問題就成功完成第一隻Apps。

What's Your Reaction?

cute cute
1
cute
scary scary
0
scary
confused confused
0
confused
fun fun
1
fun
love love
1
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Oliver

一個有近十年經驗的IT人,做過System Engineer亦做過Networking最後做了Programmer。

More From: 生活消閒

You may also like

Choose A Format
圖文格式
以文字配圖片說故事
加載視頻
上載任何形式的視頻