webAppAll
2017-02-15 14:42:09 0 举报AI智能生成
webAppAll是一款全面且强大的网络应用平台，它集成了各类在线服务和工具，为用户提供一站式的网络体验。无论是办公、学习、娱乐还是生活，webAppAll都能满足用户的各种需求。其界面简洁明了，操作便捷，使得用户无需在多个平台之间切换，就能轻松完成各种任务。同时，webAppAll还具有强大的数据管理和安全保障功能，确保用户的个人信息和数据安全。此外，webAppAll还支持多设备同步，无论用户在何处，何时，都能随时随地访问自己的数据和应用。总的来说，webAppAll是一款集多功能、高效便捷、安全可靠于一体的网络应用平台。
作者其他创作
大纲/内容
day1 hybrid App
NativeApp、WebApp、HybridApp对比
1、WebApp
网页应用，比如说网页版qq、网页版微信
具备跨平台运行的优势，但是如果在手机访问
每次都需要输入网址，比较麻烦
2、NativeApp
NativeApp又叫原生应用，
是借助SDK提供的原生组件和服务进行编程而生成的本地App。
比如说我们经常提到的Android开发、iOS开发
3、HybirdApp
HybirdApp又叫混合编程，
是介于WebApp和NativeApp之间的app，
兼具NativeApp良好的用户交互体验的优势、WebApp跨平台开发的优势
4、对比
分支主题
搭建Android的开发环境
1、配置JDK
2、配置SDK
下载并使用ADT
可以去www.androiddevtools.cn下载对应工具
如何新建一个Android工程
1、找到Eclipse
分支主题
2、File->New->Android Application Project
分支主题
3、填写工程信息
分支主题
分支主题
分支主题
分支主题
分支主题
4、目录简介
分支主题
5、使用注意事项
ActivityManager: Warning: Activity not started, its current task has been brought to the front
原因是由于对工程没有做任何修改，就去重复编译运行
工程有×号
根据x号 找到是哪个目录下的具体的文件的问题，找到出错的那一行根据提示解决问题
window->Reset Perspective（恢复默认视图）
创建一个HybridApp并运行起来
1、在webStorm中编写web代码
2、将前端代码拷贝到项目的assets目录下边
分支主题
3、编写少量的java代码
WebView组件：
what？ 是一个网络视图组件，加载对应的html
when？ onCreate方法
where? 混合开发
how？
WebView wv = new WebView(getApplicationContext());
步骤
//创建一个网络视图
WebView wv = new WebView(getApplicationContext());
//设置允许执行js操作
wv.getSettings().setJavaScriptEnabled(true);
//载入本地的网页
wv.loadUrl("file:///android_asset/index.html");
//将网络视图作为App的视图
setContentView(wv);
允许网络通信：
androidManefiest.xml文件，在标签页中找到permissions，点击add添加 INTERNET。
4、注意事项
日志输出
//查看控制台的日志输出
wv.setWebChromeClient(new WebChromeClient(){
@Override
@Deprecated
public void onConsoleMessage(String message, int lineNumber,
String sourceID) {
// TODO Auto-generated method stub
super.onConsoleMessage(message, lineNumber, sourceID);
Log.e("test", "内容为"+message+" 行号为"+lineNumber);
}
});
允许执行js
wv.getSettings().setJavaScriptEnabled(true);
day2 phoneGap
PhoneGap介绍
概述
PhoneGap是一款开放源代码的移动设备开发框架，旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动设备应用程序
发展历史
09 phoneGap（在开发者大会，尝试使用前端技术来代替oc）
09年底 支持了Android、BlackBerry等
11年被ADOBE收购，将phoneGap核心技术开源了->apache cordova
12年 PhoneGap Build云端编译打包
特点
①兼容性
written once,run everywhere
②标准化
采用w3c标准
③大众化
不需要手机编程技术，只要会html、js就能实现原生开发的效果
工作原理图
分支主题
搭建PhoneGap的开发环境
1、命令行
1、安装cordova
npm install -g cordova
想要通过国内的npm镜像快速安装：
npm install -g cordova --registry=https://registry.npm.taobao.org
2、使用cordova去创建工程
cordova create test
3、cordova默认是空白工程，如果针对平台:
cordova platform add android
cordova platform add ios
cordova platform remove android 取消对android平台的支持
4、判断是否具备运行的条件
cordova requirements
5、编译运行生成安装包
cordova emulate android
cordova run android
2、图形化
分支主题
打包方式
云端打包（建议）
1 build.phonegap.com
2、注册adobe账号 去登录
3、new app
4、upload .zip package phoneGap会
使用云端打包服务帮助我们打包生成各个平台下
的应用程序
5、找到应用程序，需要更新的话，
直接update code,选择你的压缩包，上传即可
借助于eclipse去打包
1、创建一个Android项目
2、把相关phoneGap代码拷贝到项目
phoneGap的事件列表
事件列表
分支主题
demo
分支主题
phoneGap的核心API
API列表
分支主题
device
分支主题
实现原理：device可以拿到设备信息
device.js<--->exec<-->cordova.js<--根据当前系统-->
nativeApiProvider.exec <----> 调用device.java/device.h/...
accelerometer
分支主题
capture
分支主题
notification
分支主题
file
写文件
1、得到文件系统
分支主题
2、得到文件对象
分支主题
3、filewriter
分支主题
读文件
1、得到文件系统
分支主题
2、得到文件对象
分支主题
3、fileReader
分支主题
camera
demo
html
分支主题
js
分支主题
contacts
增
<button onclick="newContact()">新建联系人</button>
分支主题
删
改
查
<button onclick="findContact()">查找联系人</button>
分支主题
day3 Ionic CSS
Components
概述
what
ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )
where
可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序
why
①免费、开源
②构建在ng之上
③界面美观
④性能优越
⑤支持命令行操作
⑥集成了cordova，可以通过api调用底层硬件
how
工作原理图
分支主题
搭建Ionic的开发环境
1、命令行
①安装nodeJs
可以去nodejs.org官网上下载安装
②安装cordova
npm install -g cordova
③安装ionic
npm install -g ionic
④ 执行ionic的命令
ionic start appName
2、使用压缩包
①找到压缩包
分支主题
②在工程中将压缩包所有文件引入
③在html中引入ionic.css和ionic.bundle.js即可使用
ionic的基本页面结构
分支主题
ionic的颜色
应用场景
ionic一共定义了9种颜色，
可以应用在前景色、背景色、边框的色彩样式
效果
分支主题
ionic CSS Components
button
class
button
button-small
button-large
button-block
button-full
button-outline
button-clear
button icon-left ion-home
button button-icon icon ion-settings
button-bar
demo
分支主题
list
class
list
item
list-inset
item-divider
item-icon-left
item-icon-right
badge
item-avator
item-thumbnail
demo
分支主题
分支主题
分支主题
card
分支主题
form
表单
list
item
item-input
input-label
item-stacked-label
item-floating-label
开关
分支主题
复选框
分支主题
单选框
分支主题
下拉菜单
分支主题
tabs
分支主题
grid
class
row
col
col-10 col-20 col-25 ... col-90
col-offset-10 col-offset-20...col-offset-90
col-top col-center col-bottom
demo
分支主题
分支主题
分支主题
day4 Ionic Js
刷新
下拉刷新
步骤
①使用对应的标签 <ion-refresher>
②设置对应的方法 on-refresh=''
③发出广播 结束刷新动作 $scope.$broadcast();
scroll.refreshComplete
demo
分支主题
上拉加载更多
步骤
① ion-infinite-scroll
②on-infinite=''
③scroll.infiniteScrollComplete
demo
分支主题
侧边栏
基本构成
<ion-side-menus>
<ion-side-menu-content></..>
<ion-side-menu></...>
</ion-side-menus>
用法
打开侧边栏菜单：
①js
$ionicSideMenuDelegate.toggleLeft/Right(true)
②扩展属性
menu-toggle='left/right'
关闭：
①js
$ionicSideMenuDelegate.toggleLeft/Right(false)
②扩展属性
menu-close
demo
分支主题
窗口
loading
用法
需要注入$ionicLoading服务
$ionicLoading.show({template:'正在刷新'});
$ionicLoading.hide();
demo
分支主题
actionSheet
基本用法
概述
上拉菜单是一个自屏幕底部向上滑出的菜单，通常用来让用户做出选择。
ionic 的上拉菜单由三种按钮组成，点击任何按钮都自动关闭上拉菜单：
取消按钮 - 取消按钮总是位于菜单的底部，用户点击该按钮将关闭。一个上拉菜单 最
多有一个取消按钮。
危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个 危险
选项按钮。
自定义按钮 - 用户定义的任意数量的按钮。
常用属性
titleText - 上拉菜单的标题文本
buttons - 自定义按钮数组。每个按钮需要一个描述对象，其 text 字段用于按钮显示
cancelText - 取消按钮的文本。如果不设置此字段，则上拉菜单中不出现取消按钮
destructiveText - 危险选项按钮的文本。如果不设置此字段，则上拉菜单中不出现危险
选项按钮
buttonClicked - 自定义按钮的回调函数，当用户点击时触发
cancel - 取消按钮回调函数，当用户点击时触发
destructiveButtonClicked - 危险选项按钮的回调函数，当用户点击时触发
用法
$ionicActionSheet 服务的 show()方法用来创建上拉菜单，返回一个函数，调用该 返回函数
可以关闭此菜单
demo
分支主题
popup
基本用法
alert
alert(options) - 警告弹出框，仅包含一个按钮供关闭弹出框
option 属性：
{
title: '', // String. 弹窗的标题。
subTitle: '', // String (可选)。弹窗的子标题。
template: '', // String (可选)。放在弹窗 body 内的 html 模板。
templateUrl: '', // String (可选)。 放在弹窗 body 内的 html 模板的 URL。
okText: '', // String (默认: 'OK')。 OK 按钮的文字。
okType: '', // String (默认: 'button-positive')。 OK 按钮的类型
confirm
confirm(options) - 确认弹出框，包含一个取消按钮和一个确认按钮
option 属性：
{
title: '', // String. 弹窗标题。
subTitle: '', // String (可选)。弹窗的副标题。
template: '', // String (可选)。放在弹窗 body 内的 html 模板。
templateUrl: '', // String (可选)。放在弹窗 body 内的一个 html 模板的 URL。
cancelText: '', // String (默认: 'Cancel')。一个取消按钮的文字。
cancelType: '', // String (默认: 'button-default')。取消按钮的类型。
okText: '', // String (默认: 'OK')。 OK 按钮的文字。
okType: '', // String (默认: 'button-positive')。 OK 按钮的类型。
prompt
- 输入提示弹出框，包含一个文本输入框、一个取消按钮和一个确认按钮
option 属性：
{
title: '', // String. 弹窗的标题。
subTitle: '', // String (可选)。弹窗的副标题。
template: '', // String (可选)。放在弹窗 body 内的 html 模板。
templateUrl: '', // String (可选)。放在弹窗 body 内的 html 模板的 URL。
inputType: // String (默认: 'text')。 input 的类型。
inputPlaceholder: // String (默认: '')。 input 的 placeholder。
cancelText: // String (默认: 'Cancel')。取消按钮的文字。
cancelType: // String (默认: 'button-default')。取消按钮的类型。
okText: // String (默认: 'OK')。 OK 按钮的文字。
okType: // String (默认: 'button-positive')。
demo
分支主题
标签页
用法
使用 ion-tabs 指令声明选项卡，使用 ion-tab 声明选项页：
<ion-tabs>
<ion-tab title="xxx">...</ion-tab>
<ion-tab title=" xxx ">...</ion-tab>
...
</ion-tabs>
每个ion-tab元素的title属性值将作为选项页的标题其 内容将填充选项卡书签栏之外的剩余区域
注意：
1. 不要把 ion-tabs 指令放在ion-content 之内
2. ion-tab 的内容应当放入 ion-view 指令内，否则 ionic 在计算布局时可能出错
demo
分支主题
uiRouter
用法
i基本步骤
配置状态
分支主题
触发状态
分支主题
工作原理
分支主题
demo
index.html
分支主题
tpl/home.html
分支主题
tpl/person.html
分支主题
0 条评论
下一页
为你推荐
查看更多
抱歉，暂无相关内容 
