WEBAPP秘密开发笔记 第一集

移动端课程：

day1：认识移动端开发的3种主流模式、实现混合编程的基本步骤

day2、3：Ionic：基于ng的ui框架

day4、5：实现一个移动端的项目

day6、7：ZeptoJS：实现一个10k以内的类JQuqey接口的库

day8：phoneGap：帮助编写js来实现对于设备底层的调用。

一、移动端的3种主流的开发模式

1、WebApp： 网页应用程序，运行在手机浏览器中的，提供的用户体验非常接近原生app的体验的应用程序

（网页版的淘宝、京东）

2、NativeApp：原生应用程序：运行在手机的操作系统的，借助SDK所提供的原生组件或者服务进行编程而生成的app称之为NativeApp

SDK：Software Development Kit 软件开发包

Android（Google提供的SDK+java（kotlin））

iOS（Apple提供的SDK+oc(swift)）

WP（Microsoft提供的SDK..）

（可以下载安装的微信、淘宝）

3、HybridApp：混合编程：借助于前端开发技能和原生开发技巧，进行混合开发而生成的可以安装在手机上的app称之为HybridApp

（微信、美团。。）

二、如何来搭建Android的开发环境？？

http://www.androiddevtools.cn/

①安装jdk

（Java Development Kit java的运行环境）

②安装adt

（Android Developer tools 安卓开发工具）

三、介绍Android开发的工具的使用

Eclipse：一款IDE（集成开发环境 intergrated Develop enverionment）,主要是以java语言为主的开发（由于Android主要开发语言就是java）

工具条的显示或者隐藏：window->show/hide toolbar

创建模拟器（虚拟设备）：

点击工具条中 Android Virtual Device Manager 对应的按钮，在弹窗中点击new新建一个虚拟设备，

①指定设备的名称为myPhone，

②选中设备：4英寸 分辨率480*800;

③将backCamera设置为emulated

④sd卡指定512M

如何显示logCat？

window->show view->other->搜索logcat 选中第一个

四、第一个Android工程 创建和运行

1、创建：

①file->new->Android Application Project

②配置application name 以及 package name （com.tarena.demo01）

③configure launcher icon 启动图标

④一路next，最后finish

2、运行：

选中要运行的项目名字，点击右键，run as Android Application.

3、Android工程基本运行方式：

在layout目录下的activity_main.xml文件，完成app视图的配置。

通过java来编写业务逻辑代码的。（src进行java代码的编辑）

4、一个Android工程的基本目录结构

src ：存储的是编写业务逻辑的java代码

gen:存储的是整个Android工程自动生成的文件

assets:默认是空的，存储的hybrid开发时对应的前端的代码

bin:(binary) 存储是生成的可以安装在手机中的apk结尾的文件

libs：（libraries） 存储的是当前工程所依赖的库文件

res:(resource 资源) 存储的是图片、布局文件、值的配置文件

AndroidManifest.xml:这个配置文件非常重要，记录了当前Android程序的版本信息、权限的设置、启动哪个activity。。。。

5、如何给AndroidApp添加某种权限？？

①点击当前工程的AndroidManifest.xml

②点击permissions标签页

③点击add，在弹窗中选中最后一个uses permission

④从右侧的下拉菜单中找到需要用到的权限名字

⑤ctr+s 保存就完成权限的设置了。

五、第一个HybridApp工程

5.1、方式1：将前端代码全部拷贝到assets

混合是前端代码和原生的代码。

基本步骤：

①创建前端项目，实现功能，并测试保证功能是ok

②创建一个Android工程

③将前端项目中代码拷贝到Android工程的assets目录

④通过一个原生组件WebView载入指定的前端代码

//创建一个WebView类型的对象

WebView wv = new WebView(getApplicationContenxt());

//载入指定的url

wv

.loadUrl(“file:///android_asset/test.html”);

//将配置过的wv作为内容视图去展示

setContentView(wv);

练习：

有一个前端的html页面：列表和按钮，点击按钮将列表隐藏掉。

新建一个Android工程(demo03)，将html页面封装成一个可以安装在手机中的hybridApp.

①创建前端项目，实现功能，并测试保证功能是ok

②创建一个Android工程

③将前端项目中代码拷贝到Android工程的assets目录

④通过一个原生组件WebView载入指定的前端代码

知识点：

webView默认为了保证系统的安全，是不允许执行的js。

解决方案：

//设置允许执行js

wv.getSettings().setJavaScriptEnabled(true);

5.2 方案2: 将前端代码部署在服务器

①完成前端工程的所有的功能

②创建一个Android工程

③将前端代码部署在服务器端，拿到服务器返回的地址

localhost–>真实的ip地址

（windows+R -> cmd ->ipconfig）

④编写java，通过webView载入指定的url

⑤添加网络权限，才可以实现与服务器端的交互

任务：将开放了项目 打包生成一个hybridApp，在Android手机的操作系统中去运行。

①前端项目已经做好

②新建一个Android工程

③将前端项目中的代码 部署在服务器端

http://localhost/chaptor4/ng/kfl/kaifanla.html#/kflStart

–》

http://172.163.100.93/chaptor4/ng/kfl/kaifanla.html#/kflStart

④编写java代码

⑤添加能够访问网络的权限

在Android4.4系统版本之上，允许使用css3和es6的新特性，在之下是不允许。

在Android开发时，如何查看js通过控制台所输出的日志信息呢？？？

//可以查看控制台输出的日志信息

wv.setWebChromeClient(new WebChromeClient(){

//onCon

@Override

public boolean onConsoleMessage(ConsoleMessage consoleMessage) {

// TODO Auto-generated method stub

return super.onConsoleMessage(consoleMessage);

}

});