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、通用技术栈，学习/开发成本低，

1.项目搭建步骤：

下载HBuilderX，

官网下载地址：HBuilderX-高效极客技巧 (dcloud.io)

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

下载安装微信开发者工具

下载地址：微信开放文档 (qq.com)选择合适的版本下载，安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态。

打开HBuilderX工具

选择【工具】-->【设置】-->【运行设置】，找到微信开发者工具的路径，并在微信开发者工具路径输入框中填入微信开发者工具的安装路径。可在桌面快捷方式中鼠标右击选择-->【属性】-->【打开文件所在地址】然后进行复制。

2. 项目创建步骤

打开HBuilderX

点击工具栏里的文件 -> 新建 -> 项目 

选择 ：uni-app最后：

项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器

 即可在浏览器中体验uni-app的H5版。

3.全局配置： 

pages.json

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

配置项列表：

属性	类型	必填	描述	平台兼容
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则	2.5.5+
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
subPackages	Object Array	否	分包加载配置	H5 不支持
preloadRule	Object	否	分包预下载规则	微信小程序
workers	String	否	Worker 代码放置的目录	微信小程序
leftWindow	Object	否	大屏左侧窗口	H5
topWindow	Object	否	大屏顶部窗口	H5
rightWindow	Object	否	大屏右侧窗口	H5
uniIdRouter	Object	否	自动跳转相关配置，新增于HBuilderX 3.5.0
entryPagePath	String	否	默认启动首页，新增于HBuilderX 3.7.0	微信小程序、支付宝小程序

更多详细参考此链接：pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

manifest.json 

        manifest.json是文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

配置项列表：

属性	类型	默认值	描述
name	String	无	应用名称
appid	String	新建 uni-app 项目时，DCloud 云端分配。	应用标识
description	String	无	应用描述
versionName	String	无	版本名称，例如：1.0.0。详见下方Tips说明
versionCode	Number	无	版本号，例如：36

更多详细参考此链接：manifest.json 应用配置 | uni-app官网 (dcloud.net.cn)