您现在的位置是:首页 > 文章列表 > Uniapp > uni-app介绍

uni-app介绍

linds 2020-08-10 10:47 272人围观
简介 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,解决了多个平台,分别需要些多套代码,开发效率低,...

1. 什么是uni-app

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,解决了多个平台,分别需要些多套代码,开发效率低,开发成本高的问题。

uni-app一套代码,可以编到七个平台,平台如下:android, ios, H5, 微信小程序,支付宝小程序,百度小程序,头条小程序。

uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。

 

2. 如何快速上手uni-app

2.1 快速上手uni-app的方式有两种。

第一,可以通过HBuilderX可视化界面。

第二,可以通过vue-cli命令行两种方式快速创建项目。

 

3. 通过HBuilderX可视化界面创建项目

通过HBuilderX可视化的方式上手是比较简单的,HBuilderX基本上内置了所有的开发环境,开箱即用。开发步骤如下:

首选,需要下载HBuilderX工具,下载地址为:http://www.dcloud.io/hbuilderx.html

 

需要注意的是:HBuilder是通用的前端开发工具,有标准版和APP开发版两个版本,如果下载的是APP版本,那么基本上开箱即用,不用做额外的配置,如果是下载的uni-app版本,那么在运行的时候,按照提示,安装uni-app插件即可。

 

然后,依次选择工具栏中的: 文件 =》 新建 =》 项目 =》 选择uni-app, 然后输入项目的名称,选择项目的模板,即可创建项目,这里我们选择官方示例 Hello uni-app,操作如图所示:

 

最后可以运行项目,依次选择工具栏: 运行 =》 运行到浏览器 =》 选择浏览器 =》 即可在浏览器中看到运行的结果:

  

  

 

至此,我们的第一个uni-app项目运行起来了,我们就可按照文档和vue的基本语法进行开发了,项目运行在其他平台上是基本一样的步骤,大同小异。

 

4. 通过vue-cli命令行创建项目

我们可以使用vue官方脚手架vue-cli创建项目,注意版本必须是3.x以上,

 

 

首先,全局安装vue-cli

npm install -g @vue/cli

 

其次,使用命令行创建项目

vue create -p dcloudio/uni-preset-vue 项目名

 

然后,选择项目的模板,如同上面选择的方式一样

 

 

 

最后,运行项目

npm run dev: %PLATFORM%

 

其中: %PLATFORM% 取值的对应关系如下:

h5:   H5平台

mp-alipay:  支付宝小程序

mp-baidu: 百度小程序

mp-weixin: 微信小程序

mp-toutiao 头条小程序

其他: dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录,打开各平   台开发工具选择对应平台目录即可进行预览(h5 平台不会在此目录,存在于缓存中);

运行结果如下:和使用HBuilder创建的项目效果是一样的。

以上,就是uni-app快速入门开发的内容,其实想要使用uni-app开发,只要有vue基础,能非常快速的上手,依靠uni-app,开发出跨平台的代码。如果想了解更多内容,请持续关注后续文章。


阅读排行

  • Vue 的最佳使用方法

    Vue框架,是我国内最受欢迎的前端框架之一,也许你的项目正在使用,也许你还在了解正准备上手...

  • FastClick是什么?一文搞懂原理解析​

    FastClick是什么?一文搞懂原理解析​ 为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正...

  • 提升CSS技能的20个小技巧

    提升CSS技能的20个小技巧 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样...

  • uni-app介绍

    uni-app介绍 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Andr...

  • 一文彻底弄懂Event Loop!

    一文彻底弄懂Event Loop! 我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来看,才...

  • 生活中常用正则表达式

    生活中常用正则表达式 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是...

  • vue组件通信你了解多少

    本文会介绍常见的通信方式,并分析每种方式的使用场景和注意点。

  • 10 种跨域解决方案

    10 种跨域解决方案 说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了...

本栏推荐

  • uni-app介绍

    uni-app介绍 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS...

官方微信