webAppAll

2017-02-22 18:00:54   0  举报





仅支持查看

AI智能生成

webAppAll是一个综合性的Web应用程序，旨在为用户提供一站式的解决方案。它集成了多种功能和服务，包括在线购物、社交媒体、新闻资讯、娱乐内容等，满足用户在各个方面的需求。通过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

分支主题

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

分支主题

窗口

用法

需要注入$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