创建一个OnsenUI2 + Angular + PhoneGap的框架模板

2 年 ago
清, 扬
4 minutes

请参考以下链接以查看有关angular-onsenui2-webpack2的最新内容。

這篇文章是作為2016年Onsen UI Advent Calendar第11天的文章所創作的。

首先

从OnsenUI2和Angular2发布以来已经过了一段时间，大家有没有同时使用这两个工具？

当在使用Angular2时，由于很少有与之配套的示例教程，有时我们不知道该从哪里开始，或者在用Angular2开发手机应用程序时，我们需要参考一些内容。本文将介绍如何创建一个”OnsenUI2 + Angular2 + PhoneGap”的框架作为参考。

以下是开发环境的预期配置：
– 已安装 Node.js 4.x
– 已安装 PhoneGap/Cordova

请使用您喜欢的编辑器。

创建一个空的项目

用PhoneGap Create创建一个空项目。

$ phonegap create onsenui2-angular2

如果未安装PhoneGap/Cordova，请使用npm进行安装。

$ npm install -g phonegap

2. 安装依赖库

使用npm init命令创建一个空的package.json文件。

$ npm init -y
無題.png
{
  "name": "onsenui2-angular2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

将所生成的package.json文件按照下面的方式进行修改。

改变的地方有三个。

scriptsにビルド用スクリプト追加

dependenciesにOnsenUI2とAngular2関連を追加

devDependenciesにTypeScriptとWebpack関連を追加

{
  "name": "onsenui2-angular2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tsc": "tsc -p .",
    "bundle": "webpack src/main.js www/js/bundle.js",
    "build": "npm run tsc && npm run bundle",
    "start": "static .",
    "postinstall": "cpx node_modules/onsenui/**/* www/lib/onsenui",
    "postbuild": "cpx src/**/*.html www/src"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.2.4",
    "@angular/compiler": "^2.2.4",
    "@angular/core": "^2.2.4",
    "@angular/platform-browser": "^2.2.4",
    "@angular/platform-browser-dynamic": "^2.2.4",
    "angular2-onsenui": "1.0.0-rc.2",
    "core-js": "^2.4.1",
    "onsenui": "^2.0.4",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21",
    "cpx": "^1.5.0"
  },
  "devDependencies": {
    "node-static": "^0.7.9",
    "typescript": "^2.0.10",
    "webpack": "^1.13.3"
  }
}

由于最新版本的angular2-onsenui（RC3）存在pushPage动画无法播放的问题，所以这次我们采用了前一个版本。请迅速进行修正，Asial先生。

完成更改后，请使用npm install命令执行安装依赖库。

$ npm install

写index.html

我将修改www/index.html如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
    <link rel="stylesheet" href="./lib/onsenui/css/onsen-css-components-default.css">
    <link rel="stylesheet" href="./lib/onsenui/css/onsenui.css">

    <title>Hello world</title>
</head>
<body>
    <my-app></my-app>
    <script src="./lib/onsenui/js/onsenui.min.js"></script>
    <script src="./js/bundle.js"></script>
</body>
</html>

哎呀？bundle.js是什么呢？（稍后会出现）

有一个叫做my-app的陌生标签，但这就是应用的主体。

4. 制作应用程序的内容

那么，我们就马上开始制作吧。

在新建的src/app.module.ts文件中定义应用程序的模块。

「模块」是将应用程序的功能集合在一起的东西。

我认为你可能会对@NgModule内（包括Angular2和OnsenUI2等库）以及组成应用程序各个页面的组件有所了解。

import {OnsenModule} from 'angular2-onsenui';
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

import {AppComponent}         from './components/app/app.component';
import {DefaultPageComponent} from './components/defaultPage/defaultPage.component';
import {PageComponent}        from './components/page/page.component';

@NgModule({
  imports:         [OnsenModule],
  declarations:    [AppComponent, DefaultPageComponent, PageComponent],
  entryComponents: [DefaultPageComponent, PageComponent],
  bootstrap:       [AppComponent],
  schemas:         [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {

}

接下来，我们将创建一个新的文件src/main.ts，并编写启动处理程序。

import 'core-js/shim';
import 'zone.js/dist/zone';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
image

5. 制作各组件

5.1组件

我們要創建初始畫面的組件。
這次我們將使用Onsen UI來創建頁面轉換的示例，只需編寫ons-navigator。

import {Component} from '@angular/core';
import {DefaultPageComponent} from '../defaultPage/defaultPage.component';

@Component({
    selector: 'my-app',
    template: '<ons-navigator [page]="page"></ons-navigator>'
})
export class AppComponent {
    page = DefaultPageComponent
}

您在初始表示页面上指定了DefaultPageComponent。

我们将在DefaultPageComponent中创建要显示的第一个页面。

5.2 默认页面组件

DefaultPageComponent的内容如下。

pushPage函数的第一个参数是目标页面，第二个参数是要传递给目标页面的任意对象。

import {Component} from '@angular/core';
import {OnsNavigator, Params} from 'angular2-onsenui';

import {PageComponent} from '../page/page.component';

@Component({
    selector: 'ons-page',
    templateUrl: './src/components/defaultPage/defaultPage.template.html'
})
export class DefaultPageComponent {
    constructor(private _navigator: OnsNavigator, private _params: Params) {
        console.log('parameters:', _params.data);
    }
    push() {
        // 遷移
        this._navigator.element.pushPage(PageComponent, {data: {hoge: 'fuga'}});
    }
}

在AppComponent中，我們直接編寫模板，但在進行分離到其他文件時，需要使用templateURL。

<ons-toolbar>
    <div class="center">test</div>
</ons-toolbar>
<div class="content">
    <div style="text-align: center; margin: 10px">
        <ons-button (click)="push()">push</ons-button>
    </div>
</div>

当您点击此模板内的ons-button时，将会跳转至下一页的PageComponent。

5.3 页面组件

除了包含”返回上一个画面”的处理之外，其他与DefaultPageComponent相同。

import {Component} from '@angular/core';
import {OnsNavigator, Params} from 'angular2-onsenui';

@Component({
    selector: 'ons-page',
    templateUrl: './src/components/page/page.template.html'
})
export class PageComponent {
    constructor(private _navigator: OnsNavigator, private _params: Params) {
        console.log('parameters:', _params.data);
    }

    push() {
        this._navigator.element.pushPage(PageComponent, {animation: 'slide', data: {foo: 'bar'}});
    }

    pop() {
        this._navigator.element.popPage();
    }
}

<ons-toolbar>
    <div class="left">
      <ons-back-button>Back</ons-back-button>
    </div>
    <div class="center">test</div>
</ons-toolbar>
<div class="content">
    <div style="text-align: center; margin: 10px">
        <ons-button (click)="push()">push</ons-button>
        <ons-button (click)="pop()">pop</ons-button>
    </div>
</div>
image

将TypeScript进行转换（转译）

由于本次是用TypeScript编写的，因此需要将其转换为JavaScript，以便在普通浏览器上运行。

请在与package.json相同的目录中创建一个名为tsconfig.json的配置文件来进行转换设置，并保存。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "moduleResolution": "node",
    "noImplicitAny": true,
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "compileOnSave": false,
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

在 package.json 文件中已经写入了执行 TypeScript 转换所需的命令。现在就来立即执行试试看吧。

$ npm run build
image

使用浏览器确认

等编译完成后，试着在浏览器中确认一下。

启动应用程序服务器

$ phonegap serve

当您访问 http://localhost:3000，会显示您之前创建的应用程序。

image

最后

辛苦了！

这次的样本已经上传到 https://github.com/puku0x/onsenui2-angular2。

请在想要玩Angular2 + OnsenUI2时使用它。

✖
广告
将在 10 秒后关闭
bannerAds