webAppAll
2017-02-22 18:10:13 0 举报AI智能生成
webAppAll是一个全面且强大的网络应用平台，旨在满足用户在生活、工作和娱乐等方面的需求。通过这个平台，用户可以方便地访问各种在线服务，如购物、社交、新闻、教育等。webAppAll采用了先进的技术和设计理念，为用户提供了简洁易用的界面和流畅的操作体验。同时，webAppAll还具备高度的可定制性，用户可以根据自己的喜好和需求进行个性化设置。此外，webAppAll还注重数据安全和隐私保护，确保用户的信息安全不受侵犯。总之，webAppAll是一个集多功能于一身的网络应用平台，为用户提供了便捷、高效、安全的在线生活体验。
作者其他创作
大纲/内容
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
分支主题
分支主题
分支主题
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);
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 条评论
下一页
为你推荐
查看更多
抱歉，暂无相关内容 
