HTML5 Web基础及其开发 4

第9章手机端App开发响应式Web开发（HTML5+CSS3+Bootstrap）高等教育出版社重难点重点：（1）HBuilder开发移动APP的流程（2）HTML5+App的常用规范（3）MUI前端框架的应用难点：（1）移动应用页面的制作方法（2）移动应用页面实现方法的选择目录01主流APP开发模式03新建项目02飞速编码的极客工具04HTML5Plus规范06HelloH5+示例05HTML5+App07建立H5+项目08高性能前端框架——MUI09创建Hellomui项目10建立MUI项目01主流APP开发模式目前市面上主流的APP有三种：原生App、WebApp、混合App。1.原生App：原生应用（NativeApp），是针对不同手机系统单独开发的本地应用，下载原生应用的最常见方法是访问应用程序商店，如苹果的AppStore、安卓市场等。原生应用用户体验近乎完美，性能稳定，但是开发维护成本高，更新也较为缓慢。2.WebApp：又叫Web应用，是用HTML5开发的，简单的说就是一个触屏版的网站。Web应用完全用HTML、JavaScript和CSS等Web技术开发，通过移动设备的浏览器来访问。优点是开发成本低，适用范围广，方便、快捷地部署，无需用户安装，迭代更新容易。缺点是无法调用系统API来实现一些高级功能，也不适合高性能要求的场合。3.混合App：是半原生半Web的混合类APP，这种开发模式兼具原生App良好用户交互体验的优势和WebApp跨平台开发和低成本的优势，但是同时也具有用户体验不如原生app和开发维护成本较高的不足。02飞速编码的极客工具HBuilder（国产IDE）是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder是当前最快的HTML开发工具，有强大的代码助手，最全的语法库和浏览器兼容性。它不仅可以作为前端开发工具、PHP、JS等后端开发工具，还可以打包APP。使用HTML5开发,然后使用HBuilder提供的云打包或本地打包将可以把HTML5plusRuntime（简称5+Runtime）和开发者编写的HTML5页面打包为原生App的安装包,包括Android的apk和iOS的ipa。2.1工具介绍在HBuilder官网http://www.dcloud.io/，如图9-1所示，点击“HBuilderX极客开发工具”下载，可以下载最新版的HBuilder，如下图。文件下载完后得到是一个压缩包，HbuilderX不用安装，解压完成即可使用。打开解压后的文件夹，找到一个叫做“HbuilderX.exe”的可执行文件，就是HbuilderX的启动文件。2.2安装HBuilder03新建项目双击HbuilderX.exe文件，进入HbuilderX的开发界面，可以在主窗口区选择“新建项目”，也可在“文件”菜单中选择“新建”-“项目”选项，即可打开新建项目窗口。HbuilderX可新建多种类型项目，包括普通项目、uni-app项目、Wap2App项目和5+App项目，如下图所示。可安装内置浏览器，以实现边浏览效果边改代码的功能。安装步骤简单，在HbuilderX中选择“工具”菜单中的“插件安装”，打开如图所示的安装插件界面，选择“内置浏览器”单击“安装”按钮。04HTML5Plus规范我们通过HTML5开发移动App时，会发现HTML5很多能力不具备。为弥补这种不足，HTML5中国产业联盟组织推出了HTML5Plus规范(也称之为HTML5+规范)。HTML5+规范是一个开放规范，隶属于工信部，允许三方浏览器厂商或其他手机runtime制造商实现。4.1HTML5Plus规范介绍原生的api多达40万，HTML5+的封装并非把40万api都封装了一遍，而是分成了2个层面：HTML5+规范：常用的扩展能力，比如二维码、语音输入，都封装到了规范中，同时实现了Android和iOS的解析引擎，使得开发者的代码编写一次，可跨平台运行。Native.js是另一项创新技术。手机OS的原生API有四十多万，大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象，通过js可以直接调ios和android的原生API。4.1HTML5Plus规范介绍4.2常用模块介绍（1）Audio模块Audio模块用于提供音频的录制和播放功能，可调用系统的麦克风设备进行录音操作，也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象。该模块封装的常量、方法、对象见右表。常量ROUTE_SPEAKER:设备的扬声器音频输出线路ROUTE_EARPIECE:设备听筒音频输出线路方法getRecorder:获取当前设备的录音对象createPlayer:创建音频播放器对象对象AudioRecorder:录音对象AudioPlayer:音频播放对象AudioPlayerEvent:音频播放控件事件类型AudioPlayerStyles:音频播放对象的参数AudioRecorderStyles:音频录制的参数回调方法RecordSuccessCallback:录音操作成功回调PlaySuccessCallback:播放音频文件操作成功回调AudioErrorCallback:音频操作失败回调4.2常用模块介绍（2）Bluetooth模块Bluetooth模块用于管理蓝牙设备，搜索附近蓝牙设备、实现简单数据传输等。支持搜索发现所有蓝牙设备，但仅支持低功耗蓝牙ble传输协议，不支持蓝牙设备的配对连接传输大量数据。

如果要连接非ble蓝牙设备，可以使用Native.js调用。该模块封装的方法、对象见右表。方法closeBluetoothAdapter:关闭蓝牙模块getBluetoothAdapterState:获取本机蓝牙适配器状态getBluetoothDevices:获取已搜索到的蓝牙设备getConnectedBluetoothDevices:根据uuid获取处于已连接的设备onBluetoothAdapterStateChange:监听蓝牙适配器状态变化事件onBluetoothDeviceFound:监听搜索到新设备的事件openBluetoothAdapter:初始化蓝牙模块startBluetoothDevicesDiscovery:开始搜索附近的蓝牙设备stopBluetoothDevicesDiscovery:停止搜寻附近的蓝牙外围设备closeBLEConnection:断开与低功耗蓝牙设备的连接createBLEConnection:连接低功耗蓝牙设备setBLEMTU:设置蓝牙最大传输单元getBLEDeviceCharacteristics:获取蓝牙设备指定服务中所有特征值(characteristic)getBLEDeviceRSSI:获取蓝牙设备的信号强度getBLEDeviceServices:获取蓝牙设备的所有服务(service)notifyBLECharacteristicValueChange:启用低功耗蓝牙设备特征值变化时的notify功能，订阅特征值onBLECharacteristicValueChange:监听低功耗蓝牙设备的特征值变化事件onBLEConnectionStateChange:监听低功耗蓝牙设备连接状态变化事件readBLECharacteristicValue:读取低功耗蓝牙设备指定特征值的二进制数据值writeBLECharacteristicValue:向低功耗蓝牙设备指定特征值写入二进制数据对象BluetoothDeviceInfo:蓝牙设备信息BluetoothService:蓝牙设备服务信息Bluetoothcharacteristic:蓝牙设备特征值BluetoothcharacteristicProperties:蓝牙设备特征值支持的操作类型回调方法BluetoothSuccessCallback:成功回调函数BluetoothFailCallback:失败回调函数BluetoothCompleteCallback:操作完成回调函数BluetoothAdapterStateChangeCallback:蓝牙适配器状态变化事件回调函数BluetoothDeviceFoundCallback:蓝牙适配器搜索到新设备事件回调函数BluetoothDeviceRSSICallback:获取蓝牙设备信号强度成功回调函数BLEConnectionStateChangeCallback:低功耗蓝牙设备连接状态变化事件回调函数BLECharacteristicValueChangeCallback:低功耗蓝牙设备的特征值变化事件回调函数4.2常用模块介绍（3）Camera模块Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。该模块封装的方法、对象见右表。方法getCamera:获取摄像头管理对象对象Camera:摄像头对象CameraOptions:JSON对象，调用摄像头的参数CameraCropStyles:裁剪图片设置项PopPosition:JSON对象，弹出拍照或摄像界面指示位置回调方法CameraSuccessCallback:调用摄像头操作成功回调CameraErrorCallback:摄像头操作失败回调4.2常用模块介绍(4)Geolocation模块Geolocation模块管理设备位置信息，用于获取地理位置信息，如经度、纬度等。通过plus.geolocation可获取设备位置管理对象。虽然W3C已经提供标准API获取位置信息，但在某些平台存在差异或未实现，为了保持各平台的统一性，定义此规范接口获取位置信息。该模块封装的方法、对象见右表。方法getCurrentPosition:获取当前设备位置信息watchPosition:监听设备位置变化信息clearWatch:关闭监听设备位置信息对象Position:JSON对象，设备位置信息数据Address:JSON对象，地址信息Coordinates:JSON对象，地理坐标信息PositionOptions:JSON对象，监听设备位置信息参数GeolocationError:JSON对象，定位错误信息回调方法GeolocationSuccessCallback:获取设备位置信息成功的回调函数GeolocationErrorCallback:获取设备位置信息失败的回调函数4.2常用模块介绍（5）Barcode模块Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。该模块封装的常量、方法、对象见右表。常量QR:QR二维码，数值为0EAN13:EAN条形码标准版，数值为1EAN8:ENA条形码简版，数值为2AZTEC:Aztec二维码，数值为3DATAMATRIX:DataMatrix二维码，数值为4UPCA:UPC条形码标准版，数值为5UPCE:UPC条形码缩短版，数值为6CODABAR:Codabar条形码，数值为7CODE39:Code39条形码，数值为8CODE93:Code93条形码，数值为9CODE128:Code128条形码，数值为10ITF:ITF条形码，数值为11PDF417:PDF417二维条码，数值为13方法scan:扫码识别图片中的条码create:创建扫码识别控件对象getBarcodeById:查找扫码识别控件对象对象Barcode:扫码识别控件对象BarcodeStyles:Barcode扫码控件样式BarcodeOptions:条码识别控件扫描参数回调方法BarcodeSuccessCallback:扫码识别成功回调函数BarcodeErrorCallback:扫码识别错误回调函数05HTML5+AppHTML5+App是一种基于JS、HTML、CSS编写的运行于手机端的App，简称为5+App。这种App通过扩展的JSAPI，可以调用手机的原生能力，从而达到与原生App同样的优秀的性能和功能。在5+App里，同时包含了HTML5Plus规范和Native.js的实现，开发者可以在5+App里自由使用相关技术。1.mobileweb项目：是一个普通的web项目，b/s方式，不可脱线运行，在这个模式下，开发者用不到HTML5Plus，使用标准的HTML5语法，运行在浏览器里。这不算5+App。2.HTML5+App：在HBuilderX里新建项目时选择5+App项目(在HBuilder选择“移动App”)，在App项目下编写的HTML、js等文件，是会被打包到原生的安装包（Android是apk包、iOS是ipa包）里的。此时本地的js和服务器通过ajax交互，由服务器按接口方式给出数据（一般是json），然后客户端的js文件解析json，并根据本地的业务逻辑来渲染页面和执行功能。所以在App项目中不能放置运行在服务器端的php等文件。3.使用wap2app打包mobileweb项目为app：wap2app不同于普通的web打包技术，wap2app可真正做达到原生应用的功能和性能体验。wap2app属于5+app，它底层也是强大的HTML5Plus规范和Native.js在支撑。wap2app项目下的所有文件，也都是打包在本机运行的。06HelloH5+示例HelloH5+是一款针对HTML5+开发者推出的开发标准参考软件。HelloH5+APP拥有丰富的功能及服务。HelloH5+APP让广大开发者们有了一个强大的编辑工具，这款工具可以方便你可以随时查阅各种参考标准，可以帮助用户更好的设计开发。快速体验一下HTML5+App，可以通过以下两种方式：下载HelloH5+：ios手机在Appstore搜索HelloH5+，Android手机扫描二维码创建HelloH5+项目07

建立H5+项目HelloH5+项目只是一个H5+的示例项目，通常我们还是新建一个H5+项目，来完成实际工作。在index.html中输入代码<h1>HelloWorld!</h1>，即可在内置浏览器中看到显示效果。在内置浏览器可以看到大致的页面，但是在真机运行效果更佳。将iOS或Android设备连接到电脑，这时HBuilderX会自动检测连接到电脑上的设备，通过菜单栏中的“运行”->“运行到手机或模拟器”，选择要运行的设备启动真机运行即可。注意真机要处于“开发者模式”。项目完成后，需要正式打包为原生的apk或ipa安装包。HBuilderX提供的打包有云打包和本地打包两种。08

高性能前端框架——MUIMUI是Dcloud官方推出的一个基于html5+标准的框架，同时拥有h5组件和原生组件，大大提高了开发效率，是最接近原生APP体验的高性能开源前端UI框架。MUI重要特征是轻量，该框架追求性能体验，不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K。MUI重要目标是追求原生UI感觉，鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，所以MUI特别强调原生感。MUI追求流畅体验，提供在APP中常见的的下拉刷新，侧滑导航，滑动触发操作菜单设计，满足流畅体验。MUI是真正彻底的跨平台开发，使用mui框架，可以简单方便的开发出高性能的App。开发者使用mui开发一次，可以同时发布为HTML5+的iOS、AndroidApp，也可同时发布到手机浏览器里。09

创建Hellomui项目Hellomui是一个手机端演示样例，可以直接的查看mui的各种控件和示例在手机端的运行效果。想要快速体验一下MUI，可以通过以下两种方式查看Hellomui项目：下载HellomuiApp在MUI官网/mui/点击下载

已打包好的Hellomui手机APP，直接在手机上体验MUI的控件UI及能力展示。创建Hellomui项目在HbuilderX，选择新建“5+App”项目，并选择“Hellomui”模板，创建项目；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上或模拟器上体验MUI的各项能力。10

建立MUI项目在HBuilderX中新建项目时，选择“mui项目”模板。在index.html中输入代码<H1class="mui-title">HELLOWORLD!</H1>，即可在内置浏览器中看到显示效果。10.1新建MUI项目10.2登录界面设计登录界面是常见的APP登录界面形式，我们在mui项目中，可以快捷的实现。10.2登录界面设计（1）首先，在项目管理器中，右键单击项目，选择“新建”菜单中的“html文件”，如图9-21所示，打开“新建html文件”界面，选择“包含mui的html文件”模板，如图9-22所示，这样可以帮助我们自动导入所需要的各种默认配置。10.2登录界面设计（2）在<body>中输入“m”选择mHead，生成头部导航栏。<headerclass="mui-barmui-bar-nav"> <h1class="mui-title">登录</h1></header>（3）在导航栏下面