2017-02-28 19:06:03 bwf_erg 阅读数 1301
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1539 人正在学习 去看看 张鹏

到目前为止,比较流行的混合app开发主要有以下三种:

1、WebApp:就是在浏览器中运行的web应用

2、NativeApp:用android和Object-C等原生语言开发的应用

3、HybridApp:就是外面是原生的壳,里面是webapp应用,兼具2者的优势

三种开发类型的原理和对比如下图:



  随着HTML5被过度热炒和实际开发中遇到的性能以及体验问题,Web App逐渐势弱。但是Native App开发难度大、成本高、周期长等问题突出,特别是App不断推陈出新,开发一个App的成本或许可以接受,但是维护一个Native App更新的成本则成了跨不过的悬崖。最终开发者和企业发现Hybrid App,这种既有跨平台开发周期短、成本低的基因,又能发挥Native App体验和性能的优势,Hybrid App混合式移动应用开发逐渐成为企业移动开发的首选。

2017-08-03 11:07:00 swarb 阅读数 105
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1539 人正在学习 去看看 张鹏

HTML5来了,7个混合式移动开发框架

2017-08-03 11:07 by swarb, ... 阅读, ... 评论, 收藏, 编辑

http://www.cocoachina.com/webapp/20141222/10718.html


在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了。如果你总听别人说HTML5的移动应用太慢,我只能告诉你应该有一些主见,首先HTML5会越来越好,移动端的硬件也会越来越强,怎么说呢,你仔细看一看你手机上的应用吧,很多应用已经悄悄的使用混合式开发了,如果像你说的它们很慢,你发现它们了吗?

目前已经有很多的框架可以帮助你开发跨平台的移动应用,在这篇文章中,我们只介绍最牛的7个。

IONIC

360桌面截图20141222093551.jpg

IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定,使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发,相信IONIC一定会取得不错的成就 。

IONIC的开发团队将尽快开发出一种通过IONIC creator提供开发者快速创建IONIC应用的方式。我们将很快就会看到一个支持拖拉功能的可视化开发工具,几分钟内开发一个app将不再只是吹xx。 

Mobile Angular UI

360桌面截图20141222093638.jpg

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。

Mobile Angular UI的关键字有:

  • Bootstrap 3

  • AngularJS

  • Bootstrap 3 Mobile组件,比如switches, overlays和sidebars,这些都是bootstrap中没有的。

  • AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate

响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。

详细了解可以看一看 the Mobile Angular UI demo page,上面有Mobile Angular UI的实践,如果你想了解的更深入一些,我建议你读一读 getting started with Mobile Angular UI

Intel XDK

360桌面截图20141222093959.jpg

Intel XDK 是Inter开发的一款跨平台开发工具,我们可以很容易的通过Intel XDK开发应用,你需要做的只是下载他们的应用开发工具 ,有Linux、Windows和Mac版,它还提供了很多个开发框架,比如Twitter bootstrap, jQuery Mobile 和 Topcoat.

Appcelerator Titanium

360桌面截图20141222094046.jpg

Appcelerator’s Titanium 不同于其它框架的是,它是一个开源的框架。

Titanium是混合式移动应用开发的一站式解决方案,你只需要下载 Titanium studio就可以解决所有的事情,Titanium SDK包含了很多手机平台的APIs和后端云服务。

Titanium使用 Alloy,Alloy是一个快速开发的手机应用MVC框架, 模块式开发可以大大减小开发时间,提高代码复用。

Titanium studio 还提供了一些code模板。你可以熟悉一下这些模板,相关的教程也很快会推出。

Sencha Touch

360桌面截图20141222094212.jpg

Sencha Touch 同样也是HTML5手机应用跨平台开发框架,运行iOS/Android/Blackberry。它已经诞生很多年了,现在已经成为很常用的混合式编程开发框架。

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。

下面是Sencha官方给出的几点特性

1.基于最新的WEB标准 – HTML5,CSS3,JavaScript。整个库在压缩和gzip后大约80KB,通过禁用一些组件还会使它更小。

2.支持世界上最好的设备。Beta版兼容Android和iOS,Android上的开发人员还可以使用一些专为Android定制的主题。

3.增强的触摸事件。在touchstart、touchend等标准事件基础上,增加了一组自定义事件数据集成,如tap、swipe、pinch、rotate等。

4.数据集成。提供了强大的数据包,通过Ajax、JSONp、YQL等方式绑定到组件模板,写入本地离线存储。

Kendo UI

360桌面截图20141222094258.jpg

Telerik’s Kendo UI 是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。

PhoneGap

360桌面截图20141222094329.jpg

PhoneGap 恐怕是最老的一个框架了,相信很多人都已经听说过甚至使用过它,但是PhoneGap是基于开源的 Cordova 商业版本。

第一段PhoneGap代码是在2008年8月的iPhoneDevCamp上写成的。创建它的一个主要动力是基于一个几乎每一个单独 的iPhone开发新手都要面对的简单事实:Objective-C是一个对Web开发人员来说非常陌生的环境,并且Web开发人员的数量远远多于 Objective-C开发人员的数量。

问题是,是否有人可以开发一个框架,让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识,而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢?

就在那一年,PhoneGap获了奖并开始支持Android平台,对人数不断增长的移动开发人员变得越来越有用,这些人员需要在更多的平台上获得代码支持。

大家可以到PhoneGap documentation官方文档开始对PhoneGap的学习。

结论

在这篇文章中,我们讨论了一些HTML5的移动开发框架,HTML5标准正式发布之后,很多开发者对HTML5又重燃了希望,相信这是个美好的时代,相信它会给我们带来更多的惊喜。

2019-02-28 09:43:29 a36267862 阅读数 23
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1539 人正在学习 去看看 张鹏

Webapp day01

回顾:

①jQuery:简化DOM操作,常用于DOM操作频繁,数据增删改查不是特别多的场景

②bootStrap:在网站或者网络应用程序开发的开源前端框架,在响应式的开发,偏向于pc端

③angularJS:实现SPA应用,数据操作非常频繁。

1采用了MVC的设计模式 2双向数据绑定 3依赖注入 4模块化设计

 

 

框架学习:

①明确框架定位:解决什么样的问题

②掌握框架的核心概念或者语法

③遇到问题怎么解决问题

--遇到问题 官网找手册,定位到用法或者demo案例

--去官方技术论坛,stackoverflow(问答), segmentfault(国内)、github

--联系官方人员

 

 

一、WebApp、NativeApp、HybridApp

1、WebApp

网页应用:体验就像传统的PC端的应用一样,本身定位就是一个应用

 

2、NativeApp

原生应用:借助SDK(software development kit)提供的原生组件或者服务,进行编码而生成的应用。

①Android

②iOS

 

3、HybridApp 混合编程

采用前端技术+原生开发。

phoneGap 支持7个平台,是目前唯一做到一次部署,全平台通用的移动开发框架,能够让开发者采用web前端技术调用API接口,实现hybridApp。

 

 

二、Eclipse工具的使用以及Android工程的创建、运行

 

iOS开发环境--》MacOSX

 

android开发环境.

①java(安装jdk-》java development kit)

②配置环境变量(计算机-》属性--》高级系统设置-》环境变量-》新建、编辑)

③eclipse开发工具

④配置SDK

 

关于Eclipse的使用:

①如果没有显示工具条,点击window->show toolbar

②android sdk manager-->更新SDK

③android virtual device manager->

new->指定设备名称,选中设备,指定SD卡大小

使用:直接打开eclipse,选中android virtual device manager按钮,在设备列表中选中对应的设备,点击start,然后点击launch去启动模拟器。

④如果视图乱了或者出不来了,window->Reset perspective

 

 

创建一个Android项目:

File-》new-》AndroidApplicationProject-》设置应用的名称/包的名称,配置icon,一路next最后finish

 

layout中的xml文件都是用来显示的ui效果。

java代码

 

android项目文件的介绍:

①src--》source 源文件(java)

②gen--》android编译项目的时候,自动生成的文件,不需要理会

③android4.2.2 android private libraries 都是android本身sdk相关的文件

④assets 资源文件夹 存储是不希望被流处理的文件,比如混合编程的时候,前端代码就可以放在这个目录中

⑤bin-》binary 存储的是可以安装的apk包

⑥libs-》libraries 库 需要用到第三方公司所提供的jar包,

可以直接放到libs中,添加到build的路径中

⑦res-》resource 资源 存储是1 图片 2 xml 3 menu

⑧androidManifest.xml 权限的配置、版本号的设置、支持sdk的版本。。。都在这里进行设置。

 

 

ActivityManager: Warning: Activity not started, its current task has been brought to the front

代码没问题,问题出在你没有对代码做修改,又重复编译运行。

 

 

三、hybridApp 混合编程

 

步骤分析:

①编写前端代码,测试在pc端是否能够达到效果 index.html

②将前端代码拷贝到android工程中的assets目录

③借助原生组件WebView,将前端代码显示在android的视图中

 

WebView组件:网络视图组件,可以加载前端代码

//实例化WebView的一个对象

WebView wv = new WebView(getApplicationContext());

 

//使用wv来加载页面

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

 

//将wv作为activity的内容视图

setContentView(wv);

 

 

 

练习:新建一个android工程,来实现一个混合编程应用:

要求:一个html页面,页面有1个p,1个button,点击按钮,将p隐藏掉。

 

如果要想混合编程app能够执行js,必须添加设置:

wv.getSettings().setJavaScriptEnabled(true);

 

设置能够查看console.log所输入的日志:

        wv.setWebChromeClient(

         new WebChromeClient(){

         @Override

         @Deprecated

         public void onConsoleMessage(String message,

         int lineNumber, String sourceID) {

         // TODO Auto-generated method stub

         Log.e("test",

         "行号为:"+lineNumber+

         " 输入内容为:"+message);

         super.onConsoleMessage(message, lineNumber, sourceID);

         }

        });

 

 

实现混合编程的两种方式:

1、直接将前端代码 放到assets目录中

2、将前端代码都部署在服务器端,拿到url,载入并显示

基本步骤:

①在pc端完成代码的编辑,能够正常访问和浏览

②将代码部署在服务器端(apache和mySql)

③拿到Url:得到当前机器的ip地址:windows+R-->cmd-->ipconfig-》找到IPv4的地址就可以了。

172.163.100.78 将之前访问工程的localhost改成ip地址。

http://localhost/chaptor4/angularJS/kaifanla/kaifanla.html

==》

http://172.163.100.78/chaptor4/angularJS/kaifanla/kaifanla.html

④配置webView,载入指定的url

⑤添加网络权限,运行看效果。

4.2.2 ``

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Webapp day02

http://androiddevtools.cn/ 更新SDK

 

 

一、PhoneGap

why? 昨天所写混合编程应用程序和webApp功能都差不多,在android系统中运行,借助工具来实现和nativeApp差不多的功能,比如说调用底层的硬件--phoneGap

 

what?

开源的移动设备应用程序框架,目标是使用前端开发技术来实现跨平台应用程序,能够实现原生应用程序可以实现的功能:调用智能手机的核心本地功能,传感器、摄像头、震动。。

 

开发框架分为3层:

应用层 :开发者写js、html、css

中间层 :phoneGap/cordova封装好的js的api

底层: 各个操作系统的硬件的调用

 

发展历史:

09年,iOSDevCamp中,提出了使用前端技术来开发iOS应用程序

10年,支持7个平台

11年,被Adobe收购,phoneGap保留了商标,将核心的跨平台代码贡献给了Adobe,Adobe将代码开源,叫做cordova

 

 

特点:

①兼容性

write once ,run everywhere

②标准化

采用w3c标准

③大众化

不需要手机编程基础,只要会html/css/js,就能做混合编程应用程序开发,而且还能够通过js调用设备底层硬件

 

 

 

build.phonegap.com //云端打包

phonegap.com

cordova.apache.org

phonegap-plugins.com

 

二、搭建phoneGap的开发环境

方式1:通过命令行的方式

需要安装nodeJS,通过npm安装cordova,使用cordova所提供的命令去创建、编译运行工程等功能。

参考cordova官网:http://cordova.apache.org/

 

方式2:通过图形化的方式

1、pc端

http://phonegap.com/getstarted/

 

2、移动端

https://github.com/phonegap/phonegap-app-developer/blob/master/resources/release/android/PhoneGap-1.7.6-release.apk

 

将apk的安装包安装到模拟器中,有两种方式:

方式1:通过adb(Android Debug Bridge),借助命令行去安装

 

步骤1:找到adb

步骤2:windows+R ->cmd ->显示可以输入命令的窗口

步骤3:统一将apk包放到c盘根目录下

步骤4:通过adb去安装apk包    路径+adb.exe install 路径+**.apk

 

 

方式2:将apk放在apache对应的htdocs目录中,然后在模拟器访问对应的目录,点击下载,去安装

 

安装移动端的应用程序注意:

①如果提示waiting for device,建议将模拟器和eclipse关掉再打开

②如果提示 INSTAILL_FAILED_ALREADY_EXISTS,说明安装包已经安装过了,不要去重复安装!

 

 

三、phonegap事件列表

①运行状态 pause/resume

②网络状态 online/offline

③电池状态 battery

④按钮: button

 

document.addEventListener('事件名称',事件对应的处理函数,false)

 

四、phoneGap核心API

 

1、设备

device.platform/version/uuid/name/phonegap..

 

注意事项:核心API在使用的过程中,都是在deviceReady之后调用,否则有可能调用不成功。

 

插件工作原理(以device为例):

在插件中的www目录device.js,执行exec方法读取到设备的信息;

在执行exec方法时,根据当前的平台,找到对应的cordova.js;

在cordova.js文件中,通过nativeApiProvider找到真正要去执行的原生代码,将结果再一步步通过回调返回。

 

 

2、提醒通知

notification来实现听觉、视觉、触觉的通知

navigator.notification.alert/confirm/beep(3)/vibrate(2000)

 

3、加速度传感器

accelerometer获取沿着xyz三个轴加速度信息

navigator.accelerometer.getCurrentAcceleration()

navigator.accelerometer.watchAcceleration()

navigator.accelerometer.clearWatch()

 

4、capture 采集音频、视频、照片

navigator.device.capture.captureAudio/Image/Video()

 

 

5、file文件操作

功能1:文件系统创建文件并写入内容

功能2:从文件系统读取文件中的内容

 

功能1:写文件

①得到文件系统 FileSystem

requestFileSystem,在成功的回调里得到fileSystem

 

②得到fileEntry

getFile 在成功的回调中得到fileEntry

 

③fileWriter

createWriter在成功的回调中得到fileWriter

fileWriter.write() 写内容

 

 

 

功能2:读文件

①fileSystem

②fileEntry

③fileReader

file对象:fileEntry.file()

fileReader.readAsText(file);

 

文件操作对象:

fileSystem 文件系统

fileEntry 文件操作入口对象

fileWriter 文件写对象  fileWriter.write('asdfadsf');

fileReader 文件读对象 fileReader.readAsText(file);

file 文件对象 包含了文件属性信息 名称/路径/大小。。 fileEntry.file()

 

 

6、摄像头

navigator.camera.getPicture(成功的回调,失败的回调,option对象)

option对象:{quality:50,sourceType:Camera.PictureSourceType.PHOTOLIBRARY}

如果sourceType为从相册中选取照片,在成功的回调中 存储的是图片的路径

 

练习:通过camera所提供的getPicture方法,从相册中选取一张图片,设置为对应的头像。

页面:button、image

实现:点击button调用getPicture方法,在成功的回调中得到url,找到image标签,设置它的src为刚得到的url

注意:没有照片,通过apache,在模拟器中通过输入pc端的ip地址,访问开饭项目中img目录中图片,长按图片,save保存。

 

 

 

 

每日一练:

加速度传感器:通过摇一摇,改变元素的背景色。

 

分析:

1、要实现对加速度传感器数据的监听

2、判断传感器数据在xyz值的变化,如果这个值的变化超过了20,

就认为是摇一摇的动作--》 改变背景色

3、创建一个定时器,判断当前和上次数据的变化的差值,1s

 

build.phonegap.com 云端打包

 

 

 

 

 

 

 

 

 

Webapp day03  ionic

混合编程: 前端代码结合原生组件去编码生成的应用程序。

 

①WebView 缺点:无法像原生应用程序调用底层的信息

②phoneGap 是一个通过各种插件提供了js的API的平台,支持调用底层信息

③无论是WebView还是phoneGap实现的移动端的应用,都是实现一些功能,但是UI并没有移动端的处理

 

 

一、Ionic介绍

 

what?

一个强大的H5应用程序开发框架,使用前端技术,构建接近原生体验的移动应用程序。

 

基于ng和cordova,自己也有一套ui组件。

 

why?

移动应用程序开发,为了更好的类似原生应用的体验,不仅要能够调用底层的硬件,还要在ui上符合移动应用程序的效果。

ionic、jQueryMobile

 

特征:

①完美融合ng

 

②专注开发原生应用程序能够实现的功能,结合cordova来实现

③ui符合移动端的效果

④提高了强大的命令行操作

⑤性能优越,运行速度快

 

 

ionicframework.com

http://ionicons.com/

 

how??

①命令行

http://ionicframework.com/getting-started/

②压缩包

 

 

二、使用Ionic

 

将压缩包中的文件引入到工程中,创建html文件,通过link直接引入css文件,script引入ionic.bundle.js,创建并调用模块,通过指令编写应用程序。

 

 

Ionic 颜色:

light\stabel\positive\calm\balanced\energized\assertive\royal\dark

 

ion-gear-a

ion-ios-flower

ion-no-smoking

ion-person

 

 

1、button

button/button-stable/button-positive../button-outline/button-clear/button-large/button-small/icon-left/icon-right/ion-**/button-block/button-bar

 

2、list

 

list/item/item-icon-left/item-icon-right/badge/badge-assertive/list-inset(列表具有嵌入效果)/item-thumbnail-left/item-thumbnail-right/item-avator

 

 

3、card

card/item/item-divider

 

 

4、form

并不是直接调用form标签,而是通过list组织表单内容

list/item/item-input/item-stacked-label/item-floating-label/input-label

 

 

form radio:

<ion-list>

<ion-radio> 男</ion-radio>

<ion-radio>女</ion-radio>

</ion-list>

 

5、tabs标签页

tabs/tab-item/tabs-icon-only/left/top

 

 

6、grid

row/col/col-10/20/25../col-offset-10/20..

col-center/top/bottom

 

 

 

每日一练:

通过grid的row和col来实现一个类似相册的展示效果

 

分析:

①控制器中模拟一些数据:对象数组,对象包含图片路径、名称、价格

②通过row和col去展示数据

遍历数组,通过ngRepeat,遍历的是行,行要显示4列

 

③判断每4条数据去显示成一行

ng-if=$index%4 == 0

 

0/4/8...

0.1.2.3

 

 

 

 

 

Webapp day04

webView phoneGap Ionic

 

webView是一个Android原生的组件(uiWebView -》iOS),混合编程的基本工作原理。

phoneGap是一个平台,webView是无法直接去调用底层的硬件接口,phoneGap是提供一些以plugin为基本单位的JSAPI,调用加速度传感器、设备信息、核心API。。

 

Ionic中基于js的扩展(指令和服务)来实现各种效果。

 

1、ion-header-bar ion-footer-bar ion-content

 

align-title='left/ritght/center'

 

 

2、ion-refresher 下拉刷新

ion-refresher作为ion-content的第一个元素

 

<ion-refresher pulling-text='下拉刷新' on-refresh='refresh()'>

</ion-refresher>

 

结束刷新动作:

$scope.$broadcast('scroll.refreshComplete');

 

3、ion-infinite-scroll 上拉加载更多

ion-infinite-scroll作为ion-content的最后一个元素

 

<ion-infinite-scroll on-infinite='loadMore()' immediate-check='false'>

</ion-infinite-scroll>

 

结束加载更多的动作

$scope.$broadcast('scroll.infiniteScrollComplete');

 

 

练习:实现一个普通的html,基于ionic的下拉刷新组件、上拉加载更多组件 实现上下拉刷新、加载更多的功能。

 

初始化一个数据,放置点整形数据,下拉push 上拉push数据。

 

 

4、$ionicScrollDelegate 处理和滚动的方法

方法:

scrollTop\scrollBottom\scrollTo\getScrollPosition()

 

 

5、ionTabs

<ion-tabs class='tabs-positive tabs-icon-left/right/only'></ion-tabs>

 

<ion-tab title='123'  ng-click='func1()' icon-on/off=''>

 

 

6、侧边栏菜单(面板、抽屉)

 

<ion-side-menus>

<ion-side-menu-content></ion-side-menu-content>

<ion-side-menu side='left/right' width=''></ion-side-menu>

</ion-side-menus>

 

方式1:扩展属性

menu-toggle='left/right'

menu-close

 

方式2:js的方式

$ionicSideMenuDelegate:

toggleLeft(true/false)

toggleRight(true/false)

isOpenLeft/right()

 

 

7、$ionicModal 自定义弹窗

 

$ionicModal.fromTemplate/fromTemplateUrl('url',{scope:$scope}).then(function(modall){})

 

ionicModal是一个实例,在这个实例:show()/hide()/remove()..

 

 

8、$ionicActionSheet 操作表

 

$ionicActionSheet.show({

buttons:

buttonClicked:

titleText:

destructiveText:

destructiveButtonClicked

cancelText:

cance:function

})

 

9、$ionicPopup

alert/prompt/confirm

 

10、$ionicLoading

用一个覆盖层表示当前处于活动状态,来阻止用户的交互动作

$ionicLoading.show()/hide()

 

 

 

11、UI-Router

 

UI-Router不是ng的官方的东西,确实在企业中用的比较多一个实现SPA的路由管理框架,是一个以状态为基本单位的状态机。

 

ngRoute:是ng官方提供的路由管理模块

①引入对应的文件,创建模块时,指定依赖于ngRoute模块

②指定容器 ngView

③创建代码片段

④路由词典

app.config(function($routeProvider){

$routeProvider.when().otherwise()

})

⑤直接修改地址栏、js($location.path('/路由'))、a href='#/路由'

⑥传参:明确发送和接收、配置接收方的路由、$routeParams

 

uiRouter:以状态为基本单位

①引入ionic-bundle.js、指定依赖于ionic模块

②指定容器

ui-view

③创建代码片段

④设置状态

app.config(function($stateProvider,$urlRouterProvider){

$stateProvider.state('',{})

$urlRouterProvider.otherwise('myPerson')

})

⑤直接修改地址栏、超链接(href='#/url')、js($state.go('状态名称'))、扩展属性ui-sref='home'

 

 

 

练习:uiRouter

login/register/main

 

login:

按钮(没有账号 )==》注册 $state

按钮(登录)==》主页面 ui-sref

 

register:

按钮(注册完成,去登陆)==》login

 

main:

超链接(退出登录) ==> login

 

 

 

 

 

 

Webapp day05

一、uiRouter的基本使用步骤

 

uiRouter:以状态为基本单位

①引入ionic-bundle.js、指定依赖于ionic模块

②指定容器

ui-view

③创建代码片段

④设置状态

app.config(function($stateProvider,$urlRouterProvider){

$stateProvider.state('',{})

$urlRouterProvider.otherwise('myPerson')

})

⑤直接修改地址栏、超链接(href='#/url')、js($state.go('状态名称'))、扩展属性ui-sref='home'

⑥参数传递

 

二、发送参数的基本步骤

uiRouter

明确发送和接收,置接收方的状态($stateParams),发送参数

 

demo:

从登陆页跳转到主页面并传递一个参数:id 3

①明确发送方和接收方

发送:登录页面

接收方:主页面

②配置接收方的状态

main--> url:'/myMain/:id'

$stateParams.id

③发送参数

button ui-sref="main({id:2})">登录去主页面-uiSref</button>

<a href="#/myMain/4">跳转到主页面-href</a>

<button ng-click="jump('main',{id:3})">登录到mainjs</button>

 

$scope.jump = function (state,arg) {

          $state.go(state,arg);

        }

 

三、uiRouter中嵌套路由

 

嵌套路由:在指定的容器中,插入的代码片段(还可以指定uiView)

 

步骤:

①首先需要指定盛放代码片段的容器,如果加载到容器的代码片段A,需要加载其他的代码片段B、C到A中,就是一个嵌套

 

②对于B、C设置状态的时候,如果A状态为stateA,指定为stateA.stateB,stateA.stateC

(

 

$stateProvider

      .state('mail',{

        url:'/myMail',

        templateUrl:'tpl/mail.html'

      })

      .state('mail.inbox',{

        url:'/myInBox',

        templateUrl:'tpl/inbox.html'

      })

      .state('mail.outbox',{

        url:'/myOutBox',

        templateUrl:'tpl/outbox.html'

      })

 

)

 

③触发状态

指定状态

 <ion-list>

      <ion-item ui-sref="mail.inbox">收件箱</ion-item>

      <ion-item ui-sref="mail.outbox">发件箱</ion-item>

    </ion-list>

 

 

 

 

 

 

 

 

Webapp day06

 

目的:实现移动端的app(开饭啦)

 

技术构成: ionic(‘ui库->内容’  +  ‘ng->数据’ +‘uiRouter->处理路由’)

 

 

1、项目的搭建(2:10 - 2:30)

①、创建项目,添加css、js、img、tpl文件夹,添加必须引用的css、js文件,添加自定义的css、js文件以及img图片,并创建完整的引导页面kaifanla.html;

②、编写kaifanla.html文件:

  定义模块ng-app=”kaifanla”

  引入ionic.css以及自定义的css文件

  定义用于替换模板的视图

  引入ionic_bundle.js文件,并引入自定义的js文件。

③、添加模板文件:添加 start/main/detail/order/myorder页面,每个页面中删掉原有内容,添加一个文字;

④、编写 kaifanla.js 文件

  定义各自的控制器

  定义路由:为所有模板定义路由,默认跳转到start

⑥、测试:跳转是否正常,是否有错误

 

 

2、所有静态页面的编写---》运行通畅,数据静态死数据

 

①start.html (2:50 - 3:05)

 

js的方式去跳转:$state.go()

 

 

②main.html 模拟数据  (3:20 - 3:45)

 

可以通过ng-include包含页头和页尾

 

class='has-header has-footer'

 

 

 

③detail.html 详情页( 4:05 - 4:30)

card

 

④order.html 表单提交页(4:43 - 5:03)

 

 

⑤myOrder.html 个人中心页

(4:15-4:30)

通过grid 模拟 table 展示数据

 

 

每日一练:

去实现所有的静态页面。

 

 

 

 

 

3、调用php页面,联调

 

条件:

①工程在c:\xampp\htdocs

②xampp的apache和mySql跑起来

③测试-》 localhost: /  (不要直接在webStorm中打开)

 

 

①main.html (9:20 - 9:50)

 

ng-model-->

初始化模型数据:$scope.inputTxt = {kw:''};

$watch : $scope.$watch('inputTxt.kw',function(){})

方向2的数据绑定: ng-model='inputTxt.kw'

 

 

(10:20  - 10:50)

尝试: 在main页面通过ion-infinite-scroll 上拉加载更多

②detail.html

发送: main->a

接受: detail

1、配置detail状态中的url  /detail/:id

2、$stateParams

 

提交订单  id--》 order.html

 

③order.html

 

接收参数:id

 

序列化:

var str = $httpParamSerializerJQLike($scope.order)

 

 

④myOrder.html (2:05 - 2:25)

根据手机号 去查找所有的订单

 

 

注册邀请:http://t.cn/RqG1Nja

 

①上传代码包

②初始化数据库

 

 

二、打包成可以安装在手机移动端的应用程序(hybridApp)

 

1、eclipse + SDK的webView

(3:35 - 4:05)

混合编程:

①打开eclipse,将模拟器跑起来

②新建一个Android应用,通过 ③通过webView组件实现app

wv.loadUrl('http://172.163.0.1/ionic_kaifanla/kaifanla.html');

 

之前在pc的访问方式:

http://localhost/chaptor4/webApp/kfl_ionic_backup/kaifanla.html#/myStart

 

模拟中去访问:

将localhost真实的ip地址

http://172.163.100.78/chaptor4/webApp/kfl_ionic_backup/kaifanla.html#/myStart

 

 

url(代码部署在服务器端 对应的地址) + webView

 

 

 

 

三、使用phoneGap实现hybridApp

 

phoneGap实现调用核心API:camera

功能:在移动端的项目中,配置tabs的设置,在对应的设置页面:读取本地相册的图片,设置头像

 

步骤1:(16:37 - 16:42)

phonegap的模板项目:template.zip,将代码解压缩到htdocs中,将移动端开饭啦项目的代码拷贝到tmplate解压缩后的www中

 

步骤2:环境

pc+移动端app

pc:首先通过减号,将之前的项目删除掉,通过加号,打开一个已经存在项目:在htdocs的解压缩后的项目

 

通过webStorm打开刚才解压缩的phoneGap的项目

 

 

步骤3:修改访问php文件的方式(17:07-17:15)

 

将template文件夹中的www目录中index.html改成index01.html,将自己的kaifanla.html改成index.html

访问php的时候,直接作为普通文件返回php本身的内容?

解决方案:通过80端口去访问。

var path = 'http://172.163.100.78/chaptor4/webApp/template/template/www/';

 

get('data/dish_getbypage.php')

==>get(path+'data/dish_getbypage.php')

 

 

步骤4:调用phoneGap所提供的核心API

 

如果要调用核心API,必须引入cordova.js(本地是没有的,只需要通过script引入就好)<script src="cordova.js"></script>

 

步骤5:实现调用相册选择图片

 

①设置tab --》settings.html(button/img)

 

②创建控制器:settingCtrl

在控制器中定义一个方法:调用本地的相册选取照片,设置为img要显示的内容

 

③配置状态: setting

 

 

 

 

 

2018-08-03 11:53:45 ahstudy 阅读数 4445
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1539 人正在学习 去看看 张鹏

    目前市面上主流的APP开发模式有三种:一种是Andriod和IOS的原生APP开发;一种是WebApp HTML5开发,最后一种是Hybrid App混合式开发。

1、Navtive APP开发(原生APP开发)

NativeApp是基于智能手机操作系统(现在主流的是ios和Android)用原生程序编写运营的App。NativeApp运行时是基于本地操作系统的,所以它的兼容能力和访问能力更好,拥有最佳的用户体验、最好的交互界面,但也是开发难度最大,开发成本和维护成本最高的App。

2、WebApp开发

Web App就是针对iOS/Android优化后的web站点,用户不需要下载安装即可访问。一般的web站点测重使用网页技术在移动端做展示,包括文字,视频,图片等,而Web App更侧重“功能”,是基于网页技术开发实现特定功能的应用,必须依赖手机浏览器运行。

WebApp开发成本低,维护更新简单,支持云修复,用户不用下载更新,但是App的用户体验不足,页面跳转迟钝甚至卡壳,页面交互动态效果不灵活,而且可能上不了AppStore,如果企业的核心功能不多,App需求侧重于信息查询,浏览等基础功能,可以选择Web App。

3、Hybrid APP开发(混合APP开发)

混合APP开发是指介于web-app、native-app这两者之间的app。

这种半原生半web的混合类App,同时采用网页语言和程序语言进行开发,通过不同的应用商店进行打包分发,用户需要下载安装使用。Hybrid App兼具Native App良好的用户交互体验和web App跨平台开发的优势,因在开发过程中使用网页语言,所以开发成本和难度大大降低。Native App是现在的主流应用,大型的App如淘宝/掌上百度/微信都是走的Hybrid App路线。

 

2018-06-26 13:04:22 taambernk520 阅读数 270
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1539 人正在学习 去看看 张鹏

  • 混合App

HybridApp是指介于WebAppNativeApp这两者之间的app,它虽然看上去是一个NativeApp,但只有一个UI WebView,里面访问的是一个WebApp,Hybrid App兼具了Native App的所有优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。

混合式app开发只需要要求开发者会使用css和js前端代码就可以实现手机app应用的开发,而不需要再去学习安卓或苹果开发,降低了app开发的门槛。混合式开发做出的手机应用无论在性能还是易用性方面都很接近原生app应用。

常见混合式开发框架:

ApiCloud

weex

        参见该文章

  • WebApp

移动Web App都是都是需要用到网络的,它们利用设备上的浏览器来运行,而且它们不需要在设备上下载后安装。


参见该文章




混合式框架-AgileLite

阅读数 1471

没有更多推荐了,返回首页