第一个HybridApp

Android工程的目录结构：

1. src：存储的是java文件

2. assets：资源文件，比如要混编用到的HTML/CSS/JS

3. res/layout：布局文件activity_main.xml

4. AndroidMainfest.xml文件中，包含版本号、权限的设置、图标的设置···

基本步骤：

1. 编写前端代码，完成指定的功能，保证测试是没有问题的。

2. 创建一个Android项目。

3. 将前端代码拷贝到Android工程的assets目录。

4. 调用原生组件（WebView）来加载前端代码。

  // 创建一个原生组件WebView

  WebView wv = new WebView(getApplicationContext());

// 让wv来加载assets目录夏的demo01.html

  wv.loadUrl("file:///android_asset/demo01.html");;)

// 设置wv允许执行js

  wv.getSettings().setJavaScriptEnabled(true);

// 查看JS通过从console.log所输出的日志信息

  wv.setWebChromeClient(new WebChromeClient(){

  @Override

  public boolean onConsoleMessage(ConsoleMessage cons oleMessage) {

  // TODO Auto-generated method stub

  return super.onConsoleMessage(consoleMessage);

  }

});

// 让wv作为当前页面要显示的内容视图

  setContentView(wv);

Ionic

what? 用来构建移动端应用程序的开元框架
when? 用在任何一个需要实现移动端效果的应用程序
why? ①成本低，可以使用前端技术来轻松编写出扩平台运行的应用程序；②Ionic基于Angular，Cordova来实现的；③支持ES6、ts；④强大的命令行工具的支持。
how? ··· ···

搭建开发环境：
        ①通过npm去安装Ionic

                npm install -g cordova ionic

        ②通过Ionic指令去创建官网所提供的模板项目
                ionic start myApp blank/tabs/sidemenu

        ③运行项目

$ cd myApp     
$ ionic platform add android    //创建Android应用     
$ ionic build android    
$ ionic emulate android

$ cd myApp        
$ ionic platform add ios     //创建iOS应用        
$ ionic build ios        
$ ionic emulate ios

ionic serve //在8100端口启动该APP

或者 ionic serve -l

创建新页面：

$ ionic g page myPage   //在项目pages目录创建出新页面

创建出一个文件夹 文件夹中有 .ts文件，（页面，可定义数据）

使用page页面：

1. 将page页面导出的类，在app.module.ts中进行声明；

    2.剩下的省略··· ···

使用自带的组件：

    1.引入

import { AlertController } from 'ionic-angular';

    2.在构造函数内实例化类

constructor(

    public navCtrl: NavController,

    public navParams: NavParams,

    public alertCtrl: AlertController) {

}

    3.使用

let myAlert = this.alertCtrl.create({

    title: '搞事？',

    message:'嗯昂是要搞事？',

    buttons: ['是啊', '我怂']

});

myAlert.present();

常见错误：

忘记声明：

Uncaught (in promise): Error: No component factory found for Demo01BasicPage. Did you add it to @NgModule.entryComponents? app.module.ts中引入页面类，在entryComponents和declarations声明。是一个警告，提示引入了一个类，但是没有使用

tslint: …:/xampp/htdocs/Framework_codes/webApp/template/template/src/app/app.component.ts, line: 9

Unused import: 'Demo02AlertPage

WebApp移动端学习

第一个HybridApp

Ionic