uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

  今天有空就来介绍一下uni-app这个能够跨平台开发,并且一套代码可以适配多端的开发方案。uni-app是dcloud公司推出的,旨在解决现在前端开发的诸多矛盾。比如多端泛滥、其他跨平台体验不佳以及推出力度不够,社区不健全等。

  现在的前端工程师,已经今非昔比,会一些css和js已经很难满足现在的市场需求了。数据库、操作系统、微信小程序、app开发以及数据结构和算法都已然成了前端的标配技术,相信身为前端工程师的你已经深有体会。我写这篇博客的初衷就是基于前不久公司接的新项目,公司的需求很简单,就是用当前仅有的人手短时间来编写出同时满足android和微信小程序的代码。时间紧任务重。在经过了一段时间的技术选型之后,定格到了uni-app这个框架,

  如果你也遇到了像我一样的需求或者愿意接受一些新的东西可以进一步了解uni-app,接下来我来简要说说uni-app的特点。

1.uni-app的语言特点

  uni-app语言结合了vue和微信小程序的语言特点,首先它是使用了vue的框架,在template中更像是微信小程序的语言,如果已经掌握了这两个前端通用技术栈,那么可以很平滑的学习uni-app来开发。

2.uni-app文件内架构变化

  先来一张图来看看uni-app文件内架构变化

  因为需要多端支持,所以浏览器专用的window、document、navigator、location对象,只有在h5中才有效,app和小程序都不支持。uni-app的生命周期既包含了vue的生命周期也包含小程序的生命周期。

3.跨端兼容与条件编译

  由于每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。在C语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。

  示例,如下代码仅在 5+App 下出现:

  示例,如下代码不会在 H5 平台上出现:

4.支持uni-app的编辑器

  HbuilderX几近完美的支持uni-app框架,如果你想使用此框架,那么不妨下载一个HbuilderX

5.uni-app的社区

  最后说到uni-app的社区,由于uni-app还比较新,社区还不是特别大,但是社区和插件市场还是比较踊跃的,相信这么好的东西在不久之后用的人会更多!

原创博客:转载请注明vue加载优化策略

uni-app — 一套前端开发跨平台应用的终极解决方案的更多相关文章

  1. 在做APP前端开发时应注意的一些问题

    在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...

  2. APP前端开发时应注意的一些问题

    在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...

  3. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  4. 基于Vue.js的uni-app前端框架结合.net core开发跨平台project

    一.由来 最近由于业务需要要开发一套公益的APP项目,因此结合所给出的需求最终采用uni-app这种跨平台前端框架以及.netcore快速搭建我们的项目,并且能做到一套代码跨多个平台. 当然在前期技术 ...

  5. Sublime用户如何快速高效开发跨平台App

    2015年9月15日,APICloud举办了一周年开源分享会,发布开源插件支持Sublime用户开发跨平台App,APICloud 开源技术负责人周兴海分享了Sublime关于插件方面相关的内容. S ...

  6. 前端开发福音!阿里Weex跨平台移动开发工具开源-b

    阿里巴巴今天在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请.Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS.安卓.YunOS及 ...

  7. 带你从零学ReactNative开发跨平台App开发(一)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  8. 优秀前端开发教程:超炫的 Mobile App 3D 演示

    今天,我们想与您分享一个实验性的3D效果.它涉及到一个3D移动设备和一些移动应用程序截图.点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图.你可能之前没见过这种应用程序演 ...

  9. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

随机推荐

  1. Confluence 6 通过 SSL 或 HTTPS 运行

    Atlassian 应用可以通过 HTTPS 进行访问,但是 Atlassian 并不提供有关访问的支持服务,同时 Atlassian 不能保证能够提供所有的支持. 如果你的 assistance 在 ...

  2. python 之面向对象的三大特性

    面向对象的三大特性 继承 继承和组合 继承进阶 封装 封装(有待完善) 多态 多态

  3. bzoj 2669 题解(状压dp+搜索+容斥原理)

    这题太难了...看了30篇题解才整明白到底咋回事... 核心思想:状压dp+搜索+容斥 首先我们分析一下,对于一个4*7的棋盘,低点的个数至多只有8个(可以数一数) 这样的话,我们可以进行一个状压,把 ...

  4. Linux之man命令详解及中文汉化

    使用方法 Linux man中的man就是manual的缩写,用来查看系统中自带的各种参考手册 使用方法: man command 示例: [root@VM_0_13_centos ~]# man l ...

  5. 论文阅读笔记八:SegNet: A Deep Convolutional Encoder-Decoder Architecture for Image Segmentation (IEEE2017)

    原文链接:https://arxiv.org/pdf/1511.00561.pdf github(tensorflow):https://github.com/aizawan/segnet 基于Seg ...

  6. @ResponseBody 和 @RequestBody 的作用

    先提一嘴 @RequestMapping(“url”),这里的 url写的是请求路径的一部分,一般作用在 Controller的方法上,作为请求的映射地址. 代码: @RequestMapping(v ...

  7. idea svn配置报错:Can't use Subversion command line client:svn

    1. 在Intellij IDEA里checkout东西时出先这个错误提示:Can't use Subversion command line client:svnSubversion command ...

  8. 五.hadoop 从mysql中读取数据写到hdfs

    目录: 目录见文章1 本文是基于windows下来操作,linux下,mysql-connector-java-5.1.46.jar包的放置有讲究. mr程序 import java.io.DataI ...

  9. Python生成PASCAL VOC格式的xml标注文件

    Python生成PASCAL VOC格式的xml标注文件 PASCAL VOC数据集的标注文件是xml格式的.对于py-faster-rcnn,通常以下示例的字段是合适的: <annotatio ...

  10. vi不保存退出

    To quit the vi editor without saving any changes you've made If you are currently in insert or appen ...