使用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提供的带返回箭头导航栏标题


    
        
        标题

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

边改边看模式.gif

边改边看模式的坏处就是开发窗口太小了有木有？看不全代码，我们还可以使用模拟器调试代码，我这里下载了一个Xcode，所以我一般用模拟器调试的时候会用到iOS的模拟器。

模拟器调试.gif

OK大家学会了创建工程和调试之后呢，我们就开始正式先来学习一下最接近原生体验的移动App的UI框架（MUI）
下面开始介绍我们项目中常用组件：折叠面板


    
        Item 1

常用简单列表

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


        
            
                ![](https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=01e887eccf177f3e0f34fb0d40cf3bb9/faedab64034f78f027168fa97f310a55b3191c4e.jpg)
                
                    幸福
                    能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？

语音输入框


        账号

搜索框

带清楚按钮的输入框


    Input

选项卡

可左右拖动选项卡

最最经典的底部TabBar切换
他这里面的图案都是MUI里面自带的，但是我们也可以自定制，下篇文章里面会介绍

Tab切换.gif

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

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

网易新闻

未完待续。。。

使用HTML5开发App（一）

什么是流应用？

你可能感兴趣的:(使用HTML5开发App（一）)