HTML5 App商业开发实战教程章节设计第七章App开发文档格式.docx

HTML5 App商业开发实战教程章节设计第七章App开发文档格式.docx

《HTML5 App商业开发实战教程章节设计第七章App开发文档格式.docx》由会员分享，可在线阅读，更多相关《HTML5 App商业开发实战教程章节设计第七章App开发文档格式.docx（20页珍藏版）》请在冰点文库上搜索。

（1）掌握通过调用Cordova插件，实现拍照、摄像、录音、播放音乐、摇一摇和获取地理位置信息等功能

（2）准备个性化的应用图标、启动页、引导页

（3）打调试包调试程序

（4）使用个性化的应用图标、启动页、引导页打个性化的发布包

（5）如果有Mac系统，可以申请苹果免费帐号的开发证书。

如果有苹果证书和Mac版本的WeX5，可以打苹果包

（6）掌握用Chrome浏览器调试安卓手机App

（7）掌握用Mac系统的Safari浏览器调试苹果手机App

（8）将自己开发的App部署到CloudX5

教学内容

（1）介绍H5App调用手机硬件的方法；

（2）介绍App安装包的组成，以及打调试包和发布包的方法；

（3）介绍真机调试和云部署的方法。

重点：

（1）掌握Cordova插件的使用方法

（2）掌握打调试包的方法

（3）掌握打发布包的方法

（4）掌握部署到CloudX5的方法

难点：

（1）真机调试

课后作业

（1）7.1.3同步训练：

使用Cordova插件实现拍照、录像等功能；

（2）7.3.3同步训练：

将前面开发出来的仿微店App打成Android包或iOS包；

（3）7.5.3同步训练：

将前面开发出来的仿微店App部署到CloudX5。

教学过程设计

节7-1：

App调用设备硬件（学时数：

7）

主要步骤

教学方法

教学手段

师生活动

问题引入

H5App是如何调用设备原生API的？

教师讲授

引导文法

多媒体

学生：

思考

教师：

演示

知识讲解

知识点1：

Cordova插件是设备相关API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等

知识点2：

使用Cordova插件的方法是：

引用插件、调用插件中的方法、打包时包含插件

知识点3：

作为混合应用才能调用Cordova插件，作为网页应用不能调用Cordova插件

启发讲解

讨论归纳

课件演示

思考、记录笔记

启发

示范操作

操作1：

演示使用Camera插件实现拍照功能

操作2：

演示使用MediaCapture插件实现录像功能

操作3：

演示使用DeviceMotion插件获取加速度信息

操作4：

演示使用Media插件实现录音以及播放音乐等功能

操作5：

演示使用Geolocation插件获取地理位置信息等功能

问题引导

操作演示

分析归纳

系统演示

观摩思考

归纳总结

实战训练

完成7.1.3同步训练

动手实践

做中学

同步训练

实践操作

巡视检查

评估

讨论

（1）讨论为什么混合应用才能使用Cordova插件

（2）展示学生的讨论结果

（3）考核学生结果

教师启发

分数激励

结果演示

课堂

总结

（1）Cordova插件是用来访问手机硬件设备的，调用插件提供的JS方法即可调用到手机操作系统的API，从而实现访问手机硬件设备

（2）实现不同的功能使用不同的Cordova插件，除了WeX5提供的Cordova插件，还可以在网上下载其他Cordova插件，也可以自定义Cordova插件

（3）App中一定要包含相关Cordova插件，Cordova插件的JS方法才能正常调用

教师讲解

整理笔记

引导创新

听讲

布置作业、提出要求

节7-2：

App组成（学时数：

3）

混合应用由哪几部分构成？

多媒体

App包括图片（应用图标、启动页、引导页）和证书（安卓证书、苹果证书），还包括WebView的访问地址和调用设备硬件的Cordova插件

手机上的每个应用都有自己的图标，这就是应用图标

启动页是App启动过程中的过渡页面。

给用户展现一个漂亮的界面，可以提升App用户体验

知识点4：

第一次运行App时，在进入首页之前可以显示引导页，用来引导用户学习App用法、了解App作用

知识点5：

Android系统要求，应用程序必须经过数字证书签名，才能安装。

WeX5的打包工具就可以生成一个有数字签名的安卓证书

知识点6：

只有iOS开发者才能开发iOSApp。

首先申请苹果开发者帐号，成为iOS开发者。

然后生成开发证书用于开发调试App，生成发布证书用于发布App

知识点7：

HybridApp融合WebApp的原理就是嵌入一个WebView组件，可以在这个组件中载入页面，就相当于一个内嵌的浏览器，将应用的首页地址，设置为WebView的访问地址，就可以在HybridApp中访问整个WebApp了

知识点8：

在HybridApp中通过Cordova插件调用设备硬件，因此App中必须包括使用到的Cordova插件

演示准备96px×

96px的PNG-32位图片作为应用图标

演示准备720px×

1280px的PNG-32位图片作为竖屏欢迎页图片

演示准备1280px×

720px的PNG-32位图片作为横屏欢迎页图片

演示将UI2\portal\sample目录下的intro.html、intro.js和intro文件夹拷贝到仿微店目录wd中。

仿照intro\image文件夹下的01.png、02.png、03.png三张图片准备仿微店App的引导页图片

准备96px×

准备720px×

准备1280px×

将UI2\portal\sample目录下的intro.html、intro.js和intro文件夹拷贝到仿微店目录wd中。

真实系统环境

（1）讨论混合应用是怎么打开网页应用的？

（1）不同的设备因分辨率不同，需要不同尺寸的应用图标图片和欢迎页图片。

WeX5的打包工具可以将一张高分辨率的图片按照安卓和苹果系统的要求生成多种规格的图片，供多种设备使用。

（2）生成的安卓平台的图片在Native\wd\build\src\rms\android\res目录下，生成的苹果平台的图片在Native\acc

\build\src\platforms\ios\acc\Resources目录下

（3）WebView的访问地址必须设置为网页应用的首页地址

节7-3：

App安装包（学时数：

2）

一切都准备好了，现在打包生成App吧

WeX5的打包工具，可以将开发好的WebApp加上Cordova插件，生成HybridApp

可以生成两种安装包，用于安卓系统的APK和用于iOS系统的IPA

在WeX5Windows版中可生成AndroidAPK包，在WeX5Mac版中可生成AndroidAPK和iOSIPA

打包时用模式3生成的App用于开发调试，称为调试包。

使用模式1生成的App用于发布，称为发布包

演示使用创建本地App和生成本地App包向导，生成调试包，安装到手机上

演示修改页面并保存。

观察手机自动刷新页面，显示修改后的页面

演示使用创建本地App和生成本地App包向导，生成发布包

观察手机中的页面资源不会更新

完成7.3.3同步训练

（1）讨论调试包和发布包的区别

（1）WeX5的打包工具打包分为两步：

创建本地App和生成本地App包

（2）应用模式有四种，模式1和模式2用于打发布包，模式3用于打调试包。

模式4用于打包非WeX5开发的H5App

（3）打调试包时，选中“模式3”，在“UIServer服务地址”中选择Tomcat运行的服务器地址；

在“Web路径”中选择“/x5/UI2”。

在“首页”中选择应用的首页。

选中UI资源目录，不选中“本地应用包含UI资源”，选中“重新编译使用到的UI资源”

（4）打发布包时，选择“模式1”，仿微店App是一个无Web服务端的本地应用。

“Web服务地址”和“Web路径”这两项不填。

“首页”选择应用的首页。

选中UI资源目录，选中“本地应用包含UI资源”，选中“重新编译使用到的UI资源”

完成7.3.3同步训练中的拓展训练

节7-4：

App调试（学时数：

1）

App在浏览器中运行时没有问题，在手机上运行时报错，怎么办？

能调试吗？

页面开发一般使用浏览器调试，如果浏览器访问页面正常，而App访问报错时就要进行App调试

调试包可以调试，发布包不能调试

安卓应用使用Chrome浏览器调试

苹果应用使用Mac系统的Safari浏览器调试

演示设置手机允许调试

演示使用USB线将手机连接到计算机

演示在手机上打开应用

演示运行WeX5目录下的“启动Chrome浏览器”

演示单击“Android真机调试”书签，观察页面中列出的手机，以及应用地址

操作6：

演示单击inspect打开监控页面，和调试普通Web页面一样调试App中的页面

打调试包，安装到手机上，练习真机调试

（1）讨论真机调试的作用和使用场景

（1）App调试是使用PC浏览器监控手机App的运行过程，借助PC浏览器相应工具能力完成对真机前端UI页面的调试

（2）Cordova插件出现问题不能使用该方法调试，必须使用原生环境进行调试

节7-5：

云部署（学时数：

发布包已经生成好了，如何发布到互联网上？

WeX5提供一键部署到云服务器CloudX5，实现在云服务器上部署整个应用，部署后即可通过互联网访问该应用

使用CloudX5需要先注册，成为CloudX5云用户

在CloudX5上部署App的三个步骤：

准备部署环境、准备部署资源、一键部署

演示在WeX5开发工具中注册CloudX5用户

演示在WeX5开发工具中登录CloudX5

演示新建CloudX5项目

演示用CloudX5项目的网址作为“Web服务地址”重新生成App

演示一键部署

完成7.5.3同步训练

（1）讨论CloudX5的作用

（1）部署资源包括数据库脚本、后端服务、UI资源和App安装包。

仿微店App没有是无Web服务端的本地App，因此不需要部署数据库脚本和后端服务

（2）在CloudX5上的每个应用都有独立的域名，项目名称用作域名，因此不能和已有的项目名称重复

（3）在CloudX5部署后，生成下载App的二维码便于发布应用

（4）后续可以继续维护和扩展在CloudX5上发布的应用，只需要准备部署资源和一键部署两个步骤

完成7.5.3同步训练中的拓展训练