一、uni-app 是什么？
二、为什么选择 uni-app ？
三、功能框架
四、准备工作
五、搭建框架
- 1.创建项目
- 2.运行项目
- - （1）运行到浏览器
  - （2）内置浏览器运行
  - （3）运行到手机或模拟器
  - （4）运行到小程序模拟器
  - （5）运行到终端
- 3.发布项目
- - （1）打包为原生App
  - （2）发行为微信小程序
  - （3）发行为 H5

一、uni-app 是什么？

uni-app 由 DCloud 公司开发，是一个使用 Vue.js 开发所有前端应用的框架，开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。

二、为什么选择 uni-app ？

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。以下截图来源于 uni-app 官网：

三、功能框架

四、准备工作

uni-app支持通过可视化界面、vue-cli 命令行 (opens new window) 两种方式快速创建项目。

可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。

本文使用可视化界面的方式搭建框架。开始之前，需先下载 HBuilderX ，官方下载地址：https://www.dcloud.io/hbuilderx.html

推荐下载 App 开发版，可开箱即用；如下载标准版，在运行或发行 uni-app 时，会提示安装uni-app插件，插件下载完成后方可使用。

五、搭建框架

1.创建项目

点击“文件” -> “新建” -> “项目”：

输入项目名称，选择 “uni-ui项目” 模板，点击【创建】：

2.运行项目

uni-app 支持多种运行项目的方式，包括运行到浏览器、内置浏览器运行、运行到手机或模拟器、运行到小程序模拟器、运行到终端等。

（1）运行到浏览器

运行效果如下：

（2）内置浏览器运行

运行效果如下：

（3）运行到手机或模拟器

该方式需要安装微信开发者工具：

在手机上的运行效果如下：

（4）运行到小程序模拟器

运行效果如下：

运行时可能会报如下错误：

 [微信小程序开发者工具] ? Enable IDE Service (y/N)

解决方法：
进入微信开发者工具，点击 “设置” 按钮，在弹出的窗口选择 “安全” 选项，打开 “服务端口”：

（5）运行到终端

运行到终端需要在项目下生成 package.json 文件，在项目根目录下执行以下命令生成 package.json 文件：

npm init -y

生成 package.json 文件后，再次打开运行到终端：

3.发布项目

（1）打包为原生App

出现以下界面，输入相关信息，点击【打包】：

（2）发行为微信小程序

输入微信小程序AppId，点击【发行】：

（3）发行为 H5

输入网站标题、网站域名，点击【发行】：

【uni-app系列】uni-app之快速搭建框架相关推荐

Hexo+GitHub静态博客系列1——三步快速搭建
前言 Hexo+GitHub静态博客搭建姿势千千万,各种教程也写烂那么此搭建姿势就非主流些,侧重图形化操作,减少代码配置,适合新手快速搭建说来本人也是臭毛病,wordpress.emlog等博客系 ...
xilinx axi dma linux 快速搭建框架
kernel axi dma 驱动也是更具数据手册来的, 先把业务简单跑起来,然后在做到内核里,熟悉 dma engine 框架 xilinx 驱动的整个驱动框架,都是基于 platform bu ...
安卓实战之如何快速搭建app架构
前言最近公司的另一个项目又要立项了,作为公司的唯一安卓工程师任务来了(新来的移动端的老大说项目还是主要你负责,我就负责帮你们安排下进度),听了这话我是伤心的在这公司不管是几个还是1个安卓开发都是我来 ...
利用Android Studio快速搭建App
大家好,我是烤鸭: 给大家分享一个简单的用Android Studio快速搭建app 工具: Android Studio 64位专业版插件: Datepicker Timepicker okht ...
android快速搭建界面,怎么样能快速搭建一个Android APP的界面和框架?
繁花如伊自己从零开始快速搭建Android app架构简单的看下这三个架构模式:MVC:Model-View-Controller,经典模式,很容易理解,主要缺点有两个:View对Model的依赖, ...
短租APP开发定制快速搭建
短租APP开发,短租APP开发定制,短租APP开发快速搭建.近些年线下推广租赁领域深受用户和金融市场关心,尽管大家生活水平提升当然有工作能力选购自已喜欢产品,但有时节约资产也会给日常生活产生一定便捷, ...
智能温度计APP一键开发（快速搭建）
智能温度计APP开发,智能温度计APP一键开发,智能温度计APP快速搭建开发.智能温度计APP是一款相互配合智感体温计开发设计的幼儿健康助手手机软件,可精确的每时每刻的检测小孩的体温,完成对宝宝急速温 ...
如何快速搭建App系统-工具广告变现篇
如何快速搭建App系统-工具广告变现篇工具App简述说明最简工具App的组成欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与 ...
uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...

【uni-app系列】uni-app之快速搭建框架

目录