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 导入一个 Confluence 站点

    有下面 2 种类方法可以导入一个站点 - 通过上传一个文件或者从你 Confluence 服务器上读取一个目录.上传文件仅仅是针对一个小站点的情况.为了取得最好的导入结果,我们推荐你从服务器上的目录上 ...

  2. Spark Streaming通过JDBC操作数据库

    本文记录了学习使用Spark Streaming通过JDBC操作数据库的过程,源数据从Kafka中读取. Kafka从0.10版本提供了一种新的消费者API,和0.8不同,因此Spark Stream ...

  3. 小学生都看得懂的C语言入门(3): 数组与函数

    #include <stdio.h> int main() { int x; ; ; scanf("%d",&x){ sum+=x; cnt++; scanf( ...

  4. 20165314 2016-2017-2 《Java程序设计》第9周学习总结

    20165314 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 URl类 UDP数据报 广播数据报 套接字 套接字连接机制 代码托管

  5. 微信开发者工具_小程序js文件后面的M代表什么

    Git 版本管理为了方便开发者更简单快捷地进行代码版本管理,简化一些常用的 Git 操作,以及降低代码版本管理使用的学习成本,开发者工具集成了 Git 版本管理面板.A: 增加的文件.C: 文件的一个 ...

  6. 爬虫基础以及 re,BeatifulSoup,requests模块使用

    爬虫基础以及BeatifulSoup模块使用 爬虫的定义:向网站发起请求,获取资源后分析并提取有用数据的程序 爬虫的流程 发送请求 ---> request 获取响应内容 ---> res ...

  7. [转] Form 表单数据处理 简单教程 formidable 使用心得

    入门,高手见笑 表单数据一种是get方式, 另一种是post 方式 1.get方式 对于get方式,node处理起来非常简单 如以下代码: var urlParsed = url.parse(requ ...

  8. Java基础知识➣序列化与反序列化(四)

    概述 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型. 将序列化对象写入文件之后,可以从文件 ...

  9. noip宝藏

    题解: 我觉得状压比搜索不知道简单到哪里去了.. 为了练习搜索...想了一下这题的搜索.. 然后会发现想想就很容易想到dp.. 最后的搜索大概是这样的 我们会发现有一类搜索都是这样 你会重复(可能是指 ...

  10. alpha冲刺1/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:来自双十一的爱 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 Alpha版本的任务细分安排 leangoo ...