使用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,可以方便简单的编写,并且可跨平台。

http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/93,因为它确实很好用。具体多牛逼,小编也不在赘述了,自己点开链接查看。

那我们现在已经有了开发工具了,现在开始第一个简单的App吧。看图来开始创建第一个移动App,我们在下面选择包含MUI框架的项目。


创建第一个App

来看下MUI都提供了哪些东西?
首先看一下MUI提供的带返回箭头导航栏标题

<body>
    <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>
    </header>
</body>

代码写完之后来看下他的效果,通常我会在开发过程中把开发窗口改成边改边看模式,这样能很快看出来你编写代码之后的效果。


边改边看模式.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>
    </li>
</ul>

常用简单列表

<div class="mui-card">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </ul>
    </div>

常见新闻列表,图片居左带有标题和正文

<ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                ![](https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=01e887eccf177f3e0f34fb0d40cf3bb9/faedab64034f78f027168fa97f310a55b3191c4e.jpg)
                <div class="mui-media-body">
                    幸福
                    <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                </div>
            </a>
        </li>
    </ul>

语音输入框

<div class="mui-input-row">
        <label>账号</label>
        <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
    </div>

搜索框

<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="">
</div>

带清楚按钮的输入框

<div class="mui-input-row">
    <label>Input</label>
    <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>

选项卡

<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>
    <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>
            </ul>
        </div>
        <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>
            </ul>
        </div>
    </div>
</div>

可左右拖动选项卡

<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>
    <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>
            </ul>
        </div>
        <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>
            </ul>
        </div>
    </div>
</div>

最最经典的底部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>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-phone"></span>
        <span class="mui-tab-label">电话</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">邮件</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>

这里面有很多很多的官方提供的学习资料

http://dev.dcloud.net.cn/mui/ui/#accordion
好了今天就先学到这里面吧,大家可以根据官方提供的学习资料去一个个试验下。
下集预告网易新闻客户端界面搭建

网易新闻

未完待续。。。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 153,856评论 23 676
  • 朋友曾经抱着白头偕老的态度处了个男朋友。 可老着老着就走不到白头了。 在一起的时候也是用一个很抽象的理由来说服自己...
    小长腿儿阅读 627评论 0 0
  • 通知提前过去公司开会,本来是不想去的,心中有愤怒。但是去了后,发现其实自己这段时间确实存在着一些错误的观念和认知,...
    倾葶阅读 59评论 0 0
  • 我不喜欢这样的应酬式的娱乐方式,甚至厌恶。同样也清楚这样的生活不是我想要的 甚至男朋友 未来的丈夫如果是这样也是很...
    Meilan阅读 51评论 0 0
  • 今天我们大家继续讲解“越花越挣钱”模式的第二个部分。 昨天我们主要是从意通的一个平台、两个目标、三大趋势、四大财富...
    c7b6666e4189阅读 117评论 0 0