uni-app 小程序项目 一 起步 构建项目、tabBar、配置网络请求（使用npm包）、首页（轮播图、分页区域、楼层区）

1.0 uni-app 简介

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

详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/

1.1 开发工具（ HBuilderX ）

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

1. 模板丰富
2. 完善的智能提示
3. 一键运行

当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器！

1.2 下载 HBuilderX

1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html

2. 点击首页的 DOWNLOAD 按钮

3. 选择下载 正式版 -> App 开发版

1.3 安装 HBuilderX

1. 将下载的 zip包 进行解压缩

2. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）

3. 双击 HBuilderX.exe 即可启动 HBuilderX

1.4 安装 scss/sass 编译

为了方便编写样式（例如：<style lang=“scss”></style>），建议安装 scss/sass 编译 插件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

1. 进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装

1.5 快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

1.6 修改编辑器的基本设置

1. 操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置
2. 进入里面的 源码视图界面 可以参考一下配置（可以直接复制粘贴）

{
   
   
“editor.caretWidth” : 1,
“editor.colorScheme” : “Default”,
“editor.wordWrap” : true,
“explorer.autoReveal” : true,
“explorer.iconTheme” : “hx-file-icons-colorful”,
“workbench.colorCustomizations” : {
   
   
“[Default]” : {
   
   
“sideBar.background” : “#FDF0ED”, //加深项目管理器颜色
“editor.background” : “#FDF0ED”, //加深编辑区域背景颜色
“toolBar.background” : “#FDF0ED”,
“toolBar.hoverBackground” : “#fce5de”,
“toolBar.border” : “#fad3c7”,
“tab.activeBackground” : “#fad3c7”, //选中时的背景颜色
“tab.activeForeground” : “#242227”, //选中时的前景颜色
“tab.inactiveBackground” : “#FDF0ED”, //未选中时的背景颜色
“tab.inactiveForeground” : “#938D8B”, //未选中时的前景颜色
“tab.hoverBackground” : “#FCE7E2”,
“tab.unfocusedHoverBackground” : “#FDF0ED”, //未选中分栏里鼠标滑过未选中标签的背景颜色
“tab.unfocusedActiveForeground” : “#242227”, //未选中分栏里选中标签的前景颜色
“tab.unfocusedInActiveForeground” : “#FDF0ED”, //未选中分栏里选中标签的前景颜色
“editorSuggestWidget.selectedBackground” : “#fad3c7”, //助手弹窗选中条目时背景颜色
“editorSuggestWidget.background” : “#fce5de”, //助手弹窗背景颜色
“editorSuggestWidget.border” : “#fadad1”, //助手弹窗边框颜色
“input.background” : “#fad3c7”, //文本框背景颜色
“inputValidation.infoBackground” : “#FDF0ED”, //下拉框背景颜色
“inputList.hoverBackground” : “#fce5de”, //鼠标滑过item背景颜色
“inputList.border” : “#fce5de”, //下拉框边框颜色
“list.foreground” : “#938D8B”, //前景颜色
“list.highlightForeground” : “#E42E5B”, //高亮时前景颜色
“list.activeSelectionBackground” : “#fad3c7”, //选中条目背景颜色
“list.activeSelectionForeground” : “#E42E5B”, //选中条目前景颜色
“list.hoverBackground” : “#fce5de”, //鼠标滑过背景颜色
“outlineBackground” : “#FDF0ED”, //文档结构背景颜色
“scrollbarSlider.background” : “#fad3c7”, //滚动条背景颜色
“scrollbarSlider.hoverBackground” : “#E42E5B”, //鼠标滑过滚动条背景颜色
“extensionButton.prominentBackground” : “#FDF0ED”, //背景颜色
“extensionButton.prominentForeground” : “#E42E5B”, //前景颜色
“extensionButton.border” : “#fad3c7”, // 边框颜色
“extensionButton.prominentHoverBackground” : “#fad3c7”, //鼠标滑过时的背景颜色
“extensionButton.checkColor” : “#E42E5B”, //选中时的前景颜色
“settings.textInputBorder” : “#fadad1”, //文本框边框颜色
“inputOption.activeBorder” : “#E42E5B”, //文本框有焦点时边框颜色
“settings.dropdownBorder” : “#fadad1”, // combobox下拉列表边框颜色
“settings.dropdownListBorder” : “#fadad1”, //combobox item边框颜色
“imageview.background” : “#FDF0ED”, //浅色方格颜色
“imageview.foreground” : “#fadad1”, //深色方格颜色
“statusBar.background” : “#FDF0ED”, //状态栏背景颜色
“statusBar.foreground” : “#938D8B”, //状态栏前景颜色
“minimap.handle.background” : “#fadad1” //迷你地图滑块背景
}
}
}

1.7 新建 uni-app 项目

1. 文件 -> 新建 -> 项目

2. 填写项目的基本信息

1. uni-app(U)
2. 选择名字和地址
3. 选择模板 （uni-ui 项目，内置uni-u的项目模板）
4. 创建

3. 目录结构
一个 uni-app 项目，默认包含如下目录及文件：

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

1.8 把项目运行到微信开发者工具

1. 填写自己的微信小程序的 AppID：

1. 点击 manifest.json ，选择微信小程序配置 ， 填入 AppID

2. 在 HBuilderX 中，配置“微信开发者工具”的安装路径：

1. 点击工具–设置–运行配置–小程序运行配置–填入微信开发者工具路径

3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，：

1. 开启“微信开发者工具”的服务端口

4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具（选择第一个，也就是不是运行到页面的那个），将当前 u