uni-app

uni-app简介

uni-app概述：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

uni-app特点：

1、跨更多平台

2、一套代码，多平台运行

3、运行体验好，性能高

4、开发生态、周边生态丰富（组件丰富）

5、通用技术栈，学习/开发成本低，

uni-app环境搭建

环境搭建步骤：

一、下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧

选择对应的版本下载即可：

​

二、下载安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示：

​

三、打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。

​

微信开发者工具安装路径可通过此方式快速查找：

​

通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

​

       第二步：选择

uni-app

类型，输入工程名，选择模板，点击创建，即可成功创建

​

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

​

uni-app项目的打包发布

uni-app项目开发的最后一步就是对项目进行打包发布。打包发布主要分为几种类型：

1、打包为原生App（云端）

​

2、打包为原生App（离线）

​

3、发布为h5，操作流程如下：

​

4、发布为微信小程序

​

点击【发行】按钮之后，会自动启动微信开发者工具，点击【上传】按钮

​

​

出现此截图说明打包上传成功：

​

此时登录微信公众平台官网。

​

等待审核通过之后，点击【提交发布】即可发布成功。

PS:如果在提交审核的过程中，弹出弹窗提示需要设置主营类目的话，根据指引前往设置即可。

参考网址：设置

注意：

1、主营类目有且只有一个，选择即生效，不可删除；

2、主营类目每年有 5 次修改机会，修改即生效，请谨慎修改；

3、完成主营类目设置后才可提交代码审核；

4、主营类目选择错误可能影响代码审核结果，请正确选择。

介绍项目目录文件
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录