正在播放：我的第一个APP
下载学院APP缓存视频离线看
购买本课程后即可享受以下服务:
24小时讲师答疑
所有课时永久观看
购买课程返学分
购买本课程后，就可以记笔记了~~
开始记笔记……
记录时间点
我的笔记同学的笔记
购买本课程后，就可以提问题了~~
向老师提问……
记录时间点
我的问题同学的问题使用HTML5开发App（一） - 简书
使用HTML5开发App（一）
什么是流应用？
小伙伴们是不是很期待用HTML5来开发App呢，在开发之前我们首先要了解一下什么是流应用？
流应用 :基于HTML5+的跨平台技术，让应用边用变下，类似流媒体，实现5秒内启动应用,它结合了原生App和Web App的优势，又优化了各自的缺点。是移动互联网的终极应用形态轻应用，说白一点他其实就是一个App+轻量级+5秒启动+跨平台+DCloud，是不是很流弊？既然说到流应用了，那小编就在这给大家?嗦?嗦我为什么会选择用它来做开发：
1：差量更新+及时更新，保证应用版本始终是最新的（热更新）
2：多端发布，生成流应用的同时生成iOS、Android原生版，浏览器版、微信App和百度直达号。降低开发成本，提升开发效率
3：提高激活用户数，提高用户转化率（原生App版本迭***发者需要重新打包上传，用户需要下载更新，导致用户流失）
我就问你流不流弊？
App的开发我们要用HTML5开发一个App需要准备哪些呢，首先开发工具当然我这里推荐的是Dcloud公司出的HBuilder,里面提供了前端框架（MUI）它是目前最高性能和最接近原生体验的手机端框架。常用的API（HTML5+）包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。
那我们现在已经有了开发工具了，现在开始第一个简单的App吧。看图来开始创建第一个移动App，我们在下面选择包含MUI框架的项目。
创建第一个App
来看下MUI都提供了哪些东西？首先看一下MUI提供的带返回箭头导航栏标题
&header class="mui-bar mui-bar-nav"&
&a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"&&/a&
&h1 class="mui-title"&标题&/h1&
代码写完之后来看下他的效果，通常我会在开发过程中把开发窗口改成边改边看模式，这样能很快看出来你编写代码之后的效果。
边改边看模式.gif
边改边看模式的坏处就是开发窗口太小了有木有？看不全代码，我们还可以使用模拟器调试代码，我这里下载了一个Xcode，所以我一般用模拟器调试的时候会用到iOS的模拟器。
模拟器调试.gif
OK大家学会了创建工程和调试之后呢，我们就开始正式先来学习一下最接近原生体验的移动App的UI框架（MUI）下面开始介绍我们项目中常用组件：折叠面板
&ul class="mui-table-view"&
&li class="mui-table-view-cell mui-collapse"&
&a class="mui-navigate-right" href="#"&Item 1&/a&
&div class="mui-collapse-content"&
&!-- 第1个面板中的内容 --&
常用简单列表
&div class="mui-card"&
&ul class="mui-table-view"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
常见新闻列表，图片居左带有标题和正文
&ul class="mui-table-view"&
&li class="mui-table-view-cell mui-media"&
&a href="javascript:;"&
&div class="mui-media-body"&
&p class="mui-ellipsis"&能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？&/p&
语音输入框
&div class="mui-input-row"&
&label&账号&/label&
&input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入"&
&div class="mui-input-row mui-search"&
&input type="search" class="mui-input-clear" placeholder=""&
带清楚按钮的输入框
&div class="mui-input-row"&
&label&Input&/label&
&input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框"&
&div class="mui-slider"&
&div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"&
&a class="mui-control-item" href="#item1"&选项卡1&/a&
&a class="mui-control-item" href="#item2"&选项卡2&/a&
&div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"&&/div&
&div class="mui-slider-group"&
&div id="item1" class="mui-slider-item mui-control-content mui-active"&
&ul class="mui-table-view"&
&li class="mui-table-view-cell"&第1个选项卡子项&/li&
&li class="mui-table-view-cell"&第1个选项卡子项&/li&
&div id="item2mobile" class="mui-slider-item mui-control-content"&
&ul class="mui-table-view"&
&li class="mui-table-view-cell"&第2个选项卡子项&/li&
&li class="mui-table-view-cell"&第2个选项卡子项&/li&
可左右拖动选项卡
&div class="mui-slider"&
&div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"&
&a class="mui-control-item" href="#item1"&选项卡1&/a&
&a class="mui-control-item" href="#item2"&选项卡2&/a&
&div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"&&/div&
&div class="mui-slider-group"&
&div id="item1" class="mui-slider-item mui-control-content mui-active"&
&ul class="mui-table-view"&
&li class="mui-table-view-cell"&第1个选项卡子项&/li&
&li class="mui-table-view-cell"&第1个选项卡子项&/li&
&div id="item2mobile" class="mui-slider-item mui-control-content"&
&ul class="mui-table-view"&
&li class="mui-table-view-cell"&第2个选项卡子项&/li&
&li class="mui-table-view-cell"&第2个选项卡子项&/li&
最最经典的底部TabBar切换他这里面的图案都是MUI里面自带的，但是我们也可以自定制，下篇文章里面会介绍
Tab切换.gif
&nav class="mui-bar mui-bar-tab"&
&a class="mui-tab-item mui-active"&
&span class="mui-icon mui-icon-home"&&/span&
&span class="mui-tab-label"&首页&/span&
&a class="mui-tab-item"&
&span class="mui-icon mui-icon-phone"&&/span&
&span class="mui-tab-label"&***&/span&
&a class="mui-tab-item"&
&span class="mui-icon mui-icon-email"&&/span&
&span class="mui-tab-label"&邮件&/span&
&a class="mui-tab-item"&
&span class="mui-icon mui-icon-gear"&&/span&
&span class="mui-tab-label"&设置&/span&
这里面有很多很多的官方提供的学习资料
好了今天就先学到这里面吧，大家可以根据官方提供的学习资料去一个个试验下。下集预告网易新闻客户端界面搭建
未完待续。。。Web程序员开发App系列
　　看了前面几篇文章后我们终于要开始敲代码了，由于所有前端代码都是Html静态问题，所以你用什么开发工具都可以，后台我采用MVC开发，因为Html静态文件需要打包，里面不能和其他项目文件混在一起，不然打出来的App会很庞大，浪费手机空间和下载消耗，所以我讲把mui和后台分两个项目，这里我偷个懒，直接用我个人网站的代码作为后台，我后台代码暂时不开源，我现在写的App前端代码讲开源给大家下载
源码和App下载
　　第一次使用Github，折腾半天才把代码上传到服务器上，呵呵，提供源码给大家下载，功能我会在以后继续增加
源码下载：&
App下载：&
　　由于我需要TFS上传代码，我这里用Visual Studio来管理App的代码，首先建立一个空网站(PS：一定要是完全空空的一个文件夹，什么项目文件都不要有)
打开HBuilder，选择文件，打开目录...选择我们刚才创建的网站，填写项目名称：MyApp
在刚才打开的项目上右键，选择 转换成移动App
转换成功后会有句提示，这个是我上面说的不要和其他文件混在一起是一个意思
然后打开目录，你会发现里面多了一个&manifest.json 的文件，这个就是App的配置文件
打开我们之前创建的MUI的实例，如果没有可以创建一个（文件-新建-移动App，选择Hello MUI），找到里面的 js 文件夹，将里面 mui.开头的文件复制我们自己项目中
目录名称自己随便定义
同样，样式也要拷贝一份
其他javascript文件我还使用了jquery 和&angularJs，由于mui载的js筛选器和jquery很类似又有点不一样，但是没找到相应的文档，所以在使用的时候不方便，所以我js筛选器以jquery为主，刚学angularJs，页面的MVVM就使用这个了，文件名尽量都是使用小写
查看留言页面
　　这里我将使用MUI作为整体样式，具体样式和用法请查看&&，如果想查看代码，可以直接查看我们创建的hello mui的例子里，直接运行起来就可以找里面找到我们想要的样式了
首先创建一个Index.html文件在跟目录(注意：这里的I大写开通，manifest.json文件配置的页面入口是小写的，所以要调整为大写开头)，这就是我们的首页了，由于我对angularJs了解不是太多，所以需要借助jquery辅助，O(&_&)O~
mui.power.js 文件为我们所有页面通用方法，由于全部是html静态页面，所以没有类似模板的东西，所以页面很多地方都要重复写代码，如果有谁知道可以复用的方法可以推荐下
&!DOCTYPE html&
&html ng-app="myApp"&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&title&我的首页&/title&
&script src="scripts/mui/mui.js"&&/script&
&link href="content/mui.min.css" rel="stylesheet" /&
&script src="scripts/jquery.min.js"&&/script&
&script src="scripts/angular/angular.min.js"&&/script&
&script src="scripts/angular/angular-sanitize.min.js"&&/script&
&script src="scripts/mui.power.js"&&/script&
&body ng-controller="MyController"&
&header class="mui-bar mui-bar-nav"&
&h1 class="mui-title"&5imvc首页&/h1&
&div class="mui-content"&
在HBuilder创建一个自己的创建模板，下次就按照上面的代码创建页面了，点击 文件-新建-html文件，点击自定义模板
把index.html文件复制进去，改名为：我的模板页面，重新打开创建页面，我们就可以看到模板页面的选项了
点击 运行-手机运行，可以看到我们刚刚写的代码在手机上的效果了，如果想知道如何连接手机，请查看&
接下来我们就开始写数据列表，由于mui内部的下拉刷新控件使用不方便，我这里使用了一个 下拉刷新的插件，叫&dropload，用法大家可以去网上找
增加留言页面
　　实现了查询功能，我们就需要来增加留言了，在跟目录增加文件夹，/html/note,在里面增加一个Add.html页面，选用我们之前的模板
在列表页面增加打开页面方法，mui.openWindow 的更多参数请查看&
$(window).off('index_reload').on('index_reload') 的意义在于在当前页面注册一个方法，后面页面调用，例如提交完留言后，返回页面并刷新数据
Index.html代码
$scope.addNote = function () {
mui.openWindow({
id:'addNote',
url:'html/note/Add.html',
$(window).off('index_reload').on('index_reload', function () {
initPage();
&Add.html代码，在提交完成后，使用mui.fire 方法调用主页面里的方法
　　　　　　　　　　　　plus.nativeUI.showWaiting()
$.post(mui.powerData.rootUrl + "Home/NoteAdd", { NContent: $scope.note, Type: 'App' }, function (data) {
plus.nativeUI.closeWaiting();
if (data === "成功") {
mui.fire(view.opener(), 'index_reload', {});
mui.back();
mui.alert(data, 'O(&_&)O~');
&好了，我们第一个App留言板就完成啦，功能不多，只有一个留言功能
阅读(...) 评论()