1.2 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：
模板丰富 完善的智能提示 一键运行
当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！
#1.2.1 下载 HBuilderX
访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html 点击首页的 DOWNLOAD 按钮 选择下载 正式版 -> App 开发版
#1.2.2 安装 HBuilderX
将下载的 zip包 进行解压缩 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符） 双击 HBuilderX.exe 即可启动 HBuilderX
#1.2.3 安装 scss/sass 编译
为了方便编写样式（例如：），建议安装 scss/sass 编译 插件。插件下载地址：
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：
1.2 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：
模板丰富 完善的智能提示 一键运行
当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！
#1.2.1 下载 HBuilderX
访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html 点击首页的 DOWNLOAD 按钮 选择下载 正式版 -> App 开发版
#1.2.2 安装 HBuilderX
将下载的 zip包 进行解压缩 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符） 双击 HBuilderX.exe 即可启动 HBuilderX
#1.2.3 安装 scss/sass 编译
为了方便编写样式（例如：），建议安装 scss/sass 编译 插件。插件下载地址：
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：
1.2.4 快捷键方案切换
操作步骤：工具 -> 预设快捷键方案切换 -> VS Code
#1.2.5 修改编辑器的基本设置
操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置
源码视图下可用的参考配置：
{
"editor.colorScheme": "Default",
"editor.fontSize": 12,
"editor.fontFamily": "Consolas",
"editor.fontFmyCHS": "微软雅黑 Light",
"editor.insertSpaces": true,
"editor.lineHeight": "1.5",
"editor.minimap.enabled": false,
"editor.mouseWheelZoom": true,
"editor.onlyHighlightWord": false,
"editor.tabSize": 2,
"editor.wordWrap": true,
"explorer.iconTheme": "vs-seti",
"editor.codeassist.px2rem.enabel": false,
"editor.codeassist.px2upx.enabel": false
}
Tips：可以使用 Ctrl + 鼠标滚轮 缩放编辑器
1.3 新建 uni-app 项目
文件 -> 新建 -> 项目 填写项目基本信息 项目创建成功
#1.4 目录结构
一个 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.5 把项目运行到微信开发者工具
填写自己的微信小程序的 AppID： 在 HBuilderX 中，配置“微信开发者工具”的安装路径： 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口： 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试： 初次运行成功之后的项目效果：
取消控制台警告信息：
1.6 使用 Git 管理项目
#1.6.1 本地管理
在项目根目录中新建 .gitignore 忽略文件，并配置如下：
# 忽略 node_modules 目录
/node_modules
/unpackage/dist
注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪
此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位
打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：
git init
将所有文件都加入到暂存区：
git add .
本地提交更新：
git commit -m "init project"
#1.6.2 把项目托管到码云
注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ） 生成并配置 SSH 公钥 创建空白的码云仓库 把本地项目上传到码云对应的空白仓库中
-----------------------------------------------------------------------------------------------------------------------------
tabBar：（小程序02）
1.
tabBar
的
6
个组成部分
①
backgroundColor
：
tabBar
的背景色
②
selectedIconPath
：选中时的图片路径
③
borderStyle
：
tabBar
上边框的颜色
④
iconPath
：未选中时的图片路径
⑤
selectedColor
：
tab
上的文字选中时的颜色
⑥
color
：
tab
上文字的默认（未选中）颜色
具体示意图如下
:
实操步骤：
1.新建页面
2.配置tabBar
①和"globalStyle"平级，新增 tabBar 节点
②
tabBar
节点中，新增
list
数组，这个数组中存放的，是每个
tab
项的配置对象
③ 在
list
数组中，新增每一个
tab
项的配置对象。对象中包含的属性如下：
pagePath
指定当前
tab
对应的页面路径【必填】
text
指定当前
tab
上按钮的文字【必填】
iconPath
指定当前
tab
未选中时候的图片路径【可选】
selectedIconPath
指定当前
tab
被选中后高亮的图片路径【可选】
"tabBar": {
"backgroundColor":"#C0C0C0",
"selectedColor": "#C00000",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/tab_icons/home.png",
"selectedIconPath": "static/tab_icons/home-active.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/tab_icons/cate.png",
"selectedIconPath": "static/tab_icons/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/tab_icons/cart.png",
"selectedIconPath": "static/tab_icons/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png"
}
]
}
2.3 删除默认的 index 首页
在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉 同时，把 page.json 中记录的 index 首页 路径删除掉 为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件夹 同时，把 components 目录下的 uni-link 组件文件夹 删除掉
#2.4 修改导航条的样式效果==》
3.2. window---（小程序02）---未复习！！！
打开 pages.json 这个全局的配置文件 修改 globalStyle 节点如下：
{
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "黑马优购",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
}
2.5 分支的提交与合并
1将本地的 tabbar 分支进行本地的 commit 提交：
git add .
git commit -m "完成了 tabBar 的开发"
2将本地的 tabbar 分支推送到远程仓库进行保存：
git push -u origin tabbar
3将本地的 tabbar 分支合并到本地的 master 分支：
git checkout master
git merge tabbar
4删除本地的 tabbar 分支：
git branch -d tabbar
3. 首页
#3.0 创建 home 分支
运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：
3.1 配置网络请求
.网络数据请求（小程序02）
复习：
注意事项：
① 域名只支持
https
协议
② 域名不能使用
IP
地址或
localhost
③ 域名必须经过
ICP
备案
④ 服务器域名一个月内最多可申请
5
次修改
调用微信小程序提供的 wx.request() 方法，可以发起 GET,POST 数据请求，
-------------------------------------------------------------------------
由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。
请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
官方文档：https://www.npmjs.com/package/@escook/request-miniprogram
最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}
3.2 轮播图区域
#3.2.1 请求轮播图的数据
实现步骤：
在 data 中定义轮播图的数组 在 onLoad 生命周期函数中调用获取轮播图数据的方法 在 methods 中定义获取轮播图数据的方法
示例代码：
export default {
data() {
return {
// 1. 轮播图的数据列表，默认为空数组
swiperList: [],
}
},
onLoad() {
// 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
this.getSwiperList()
},
methods: {
// 3. 获取轮播图数据的方法
async getSwiperList() {
// 3.1 发起请求
const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
// 3.2 请求失败
if (res.meta.status !== 200) {
return uni.showToast({
title: '数据请求失败！',
duration: 1500,
icon: 'none',
})
}
// 3.3 请求成功，为 data 中的数据赋值
this.swiperList = res.message
},
},
}
3.2.2 渲染轮播图的 UI 结构
知识点：轮播图组件的使用（小程序01）
4.2.4.
swiper
组件的使用
swiper
组件主要是用来实现轮播图效果
,
swiper
组件相当于一个大盒子
,
swiper
-
item
指的是轮播图
的每一项
代码如下
:
渲染 UI 结构：
2.样式：
美化 UI 结构：
3.2.3 配置小程序分包
3. 分包（小程序05）
复习：
1.
什么是分包
分包指的是把一个
完整的小程序项目
，按照需求
划分为不同的子包
，在构建时打包成不同的分包，用户
在使用时按需进行加载。
2.
分包的好处
对小程序进行分包的好处主要有以下两点：
可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦协作
3.
分包前 项目的构成
分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次
启动的下载时间。
4.
分包后 项目的构成
分包后，小程序项目由
1
个主包
+
多个分包
组成：
主包
：一般只包含项目的
启动页面
或
TabBar
页面
、以及所有分包都需要用到的一些
公共资源
分包
：只包含和当前分包有关的页面和
私有资源
5.
分包的加载规则
① 在小程序启动时，默认会下载
主包并启动主包内页面
tabBar
页面需要放到主包中
② 当用户进入分包内某个页面时，
客户端会把对应分包下载下来
，下载完成后再进行展示
非
tabBar
页面可以按照功能的不同，划分为不同的分包之后，进行按需下载
6.
分包的体积限制
目前，小程序分包的大小有以下两个限制：
整个小程序所有分包大小不超过
16M
（主包
+
所有分包）
单个分包
/
主包大小不能超过
2M
3.2.
使用分包
1.
配置方法
在
app.json
配置文件中
,
新增
subpackages
的节点
,
将希望放到分包的页面
,
写入
subpackages
数组的
元素中
.
2.
打包原则
① 小程序会按
subpackages
的配置进行分包，
subpackages
之外的目录将被打包到主包中
② 主包也可以有自己的
pages
（即最外层的
pages
字段）
③
tabBar
页面必须在主包内
④ 分包之间不能互相嵌套
3.
引用原则
① 主包无法引用分包内的私有资源
② 分包之间不能相互引用私有资源
③ 分包可以引用主包内的公共资源
3.3.
独立分包
1.
什么是独立分包
独立分包
本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而
单独运行
。
独立分包和普通分包的区别
最主要的区别：
是否依赖于主包才能运行
普通分包必须依赖于主包才能运行
独立分包可以在不下载主包的情况下，
独立运行
3.
独立分包的应用场景
开发者可以按需，将某些
具有一定功能独立性的页面配置到独立分包中
。原因如下：
当小程序从普通的分包页面启动时，需要首先下载主包
而独立分包
不依赖主包
即可运行，可以
很大程度上提升分包页面的启动速度
注意
：
一个小程序中可以有多个独立分包
。
4.
独立分包的配置方法
和普通分包对比
,
独立分包就是在
subpackages
数组的某个元素中
,
配置
independent
为
true
即可
5.
引用原则
独立分包和普通分包以及主包之间，是
相互隔绝
的，不能相互引用彼此的资源！例如：
① 主包无法引用独立分包内的私有资源
② 独立分包之间，不能相互引用私有资源
③ 独立分包和普通分包之间，不能相互引用私有资源
④ 特别注意：
独立分包中不能引用主包内的公共资源
3.4.
分包预下载
1.
什么是分包预下载
分包预下载指的是：在进入小程序的某个页面时，
由框架自动预下载可能需要的分包
，从而
提升
进入后
续分包页面时的启动速度。
2.
配置分包的预下载
预下载分包的行为，会在进入指定的页面时触发。在
app.json
中，使用
preloadRule
节点定义分包
的预下载规则，示例代码如下：
3.
分包预下载的限制
同一个分包中的页面享有共同的
预下载大小限额
2M
，例如：
在
subpkg 目录上鼠标右键，点击
新建页面 选项，并填写页面的相关信息：
3.2.4 点击轮播图跳转到商品详情页面
知识点：声明式导航（小程序03）
小程序中实现页面导航的两种方式
① 声明式导航
在页面上声明一个 导航组件
通过点击 组件实现页面跳转
② 编程式导航
调用小程序的导航
API
，实现页面的跳转
1.1.
声明式导航
1.
导航到
tabBar
页面
tabBar
页面指的是被配置为
tabBar
的页面。
在使用 组件跳转到指定的
tabBar
页面时，需要指定
url
属性和
open
-
type
属性，其中：
url
表示要跳转的页面的地址，必须以
/
开头
open
-
type
表示跳转的方式，必须为
switchTab
示例代码如下：
导航到非
tabBar
页面
非
tabBar
页面指的是没有被配置为
tabBar
的页面。
在使用 组件跳转到普通的非
tabBar
页面时，则需要指定
url
属性和
open
-
type
属性，其中：
url
表示要跳转的页面的地址，必须以
/
开头
open
-
type
表示跳转的方式，必须为
navigate
为了方便
,
非
tabBar
页码的跳转时
open
-
type
也可以省略
示例代码如下：
3.
后退导航
如果要后退到上一页面或多级页面，则需要指定
open
-
type
属性和
delta
属性，其中：
open
-
type
的值必须是
navigateBack
，表示要进行后退导航
delta
的值必须是数字，表示要后退的层级
示例代码如下：
注意：
为了简便，如果只是后退到上一页面，则可以省略
delta
属性，因为其默认值就是
1
tabBar
页面是不能实现后退的效果的
.
因为
,
当我们跳转到
tabBar
页面，会关闭其他所有非
tabBar
页面
,
所以当处于
tabBar
页面时
,
无页面可退
1.3.
导航传参
1.
声明式导航传参
navigator
组件的
url
属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
参数与路径之间使用
?
分隔
参数键与参数值用
=
相连
不同参数用
&
分隔
代码示例如下：
在
onLoad
中接收导航参数
通过
声明式导航传参
或
编程式导航传参
所携带的参数，可以直接在
onLoad
事件中直接获取到，示例代
码如下：
将
--------------------------------------------------------------------------------下午：
渲染楼层的第一张图片（使用接口）对应的属性来进行渲染，样式的修改
2.左图片1层级
3.v-if和v-form不要同时使用！！！
发表评论