2022年《微信小程序从基础到uni-app项目实战》

清疚 2024-04-01 19:18 92阅读 0赞

## 教程推荐：[黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程\_企业级商城实战(含uni-app项目多端部署)\_][uni-app] ##

## 一、起步 ##

### 1 uni-app 简介 ###

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、

H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

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

### 2 、开发工具 ###

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处： 模板丰富 完善的智能提示 一键运行

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

#### 2.1 下载 HBuilderX ####

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

2. 点击首页的 DOWNLOAD 按钮

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

#### 2.2 安装 HBuilderX ####

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

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

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

#### 2.3 安装 scss/sass 编译 ####

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

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

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

![9e0f2519acfecb13fb311a606e15bdf1.png][]

#### 2.4 快捷键方案切换 ####

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

![3e223590ecd3475ea31da33d6457e486.png][]

### 2.5 修改编辑器的基本设置 ###

### 操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置![53efdb5bfcc04b2a8a069835a3eea307.png][] ###

源码视图下可用的参考配置：

\{ "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 + 鼠标滚轮 缩放编辑器

####  ####

### 3 新建 uni-app 项目 ###

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

![38871bcd83bb459c8489eedba3a45a6f.png][]

#### 2. 填写项目基本信息 ####

![a9196d2576224892ad3cdcff5cdf5bb8.png][]

#### 3. 项目创建成功 ####

![6b531d5d9dc34b1a9f701ebf29c05d3b.png][]

### 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 等页面类信息

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

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

![de7545ca57b1108fd6d902115aa03142.png][]

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

![8684e6f7aa00431db0a387d60a1eb233.png][]

#### 3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：![bd7ba42b8b19466d884fcf8fffc1467f.png][] ####

4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具 ，将当前 uniapp 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：![473d2f675e3c418ea59c4b6bd274ce6f.png][]

#### 5. 初次运行成功之后的项目效果： ####

![fdff84da4ed891676c85a5cf5f4f351a.png][]

### 6 使用 Git 管理项目 ###

#### 6.1 本地管理 ####

1. 在项目根目录中新建 .gitignore 忽略文件，并配置如下：

注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不 会被 Git 追踪 此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建 一个叫做 .gitkeep 的文件进行占位

2. 打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：

\# 忽略 node\_modules 目录

/node\_modules /unpackage/dist

git init

3. 将所有文件都加入到暂存区：

4. 本地提交更新：

6.2 把项目托管到码云

1. 注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ）

2. 生成并配置 SSH 公钥

3. 创建空白的码云仓库

4. 把本地项目上传到码云对应的空白仓库中

## 二、. tabBar ##

#### 2.0 创建 tabBar 分支 ####

运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

#### 2.1 创建 tabBar 页面 ####

在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在

HBuilderX 中，可以通过如下的两个步骤，快速新建页面：

1. 在 pages 目录上鼠标右键，选择新建页面

2. 在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下：

![17b59f3729254753bcd7081c8470e60b.png][]

#### 2.2 配置 tabBar 效果 ####

git add .

git commit -m "init project"

git checkout -b tabbar

1. 将 资料 目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹

2. 修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

#### 2.3 删除默认的 index 首页 ####

1. 在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉

2. 同时，把 page.json 中记录的 index 首页 路径删除掉

3. 为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件 夹

4. 同时，把 components 目录下的 uni-link 组件文件夹 删除掉

#### 2.4 修改导航条的样式效果 ####

1. 打开 pages.json 这个全局的配置文件

2. 修改 globalStyle 节点如下：

\{ "tabBar": \{ "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.5 分支的提交与合并 ####

1. 将本地的 tabbar 分支进行本地的 commit 提交：

2. 将本地的 tabbar 分支推送到远程仓库进行保存：

3. 将本地的 tabbar 分支合并到本地的 master 分支：

4. 删除本地的 tabbar 分支：

## 三. 首页 ##

### **3.0 创建 home 分支** ###

运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：

####  ####

### 3.1 配置网络请求 ###

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支 持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第 三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用 官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

\{ "globalStyle": \{ "navigationBarTextStyle": "white", "navigationBarTitleText": "黑马优购", "navigationBarBackgroundColor": "\#C00000", "backgroundColor": "\#FFFFFF"

\} \}

git add .

git commit -m "完成了 tabBar 的开发"

git push -u origin tabbar

git checkout master

git merge tabbar

git branch -d tabbar

git checkout -b home

import \{ $http \} from '@escook/request-miniprogram'

uni.$http = $http

// 配置请求根路径

####  ####

#### 3.2 轮播图区域 ####

**3.2.1 请求轮播图的数据**

实现步骤：

1. 在 data 中定义轮播图的数组

2. 在 onLoad 生命周期函数中调用获取轮播图数据的方法

3. 在 methods 中定义获取轮播图数据的方法 示例代码：

**3.2.2 渲染轮播图的 UI 结构**

$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情

$http.beforeRequest = function (options) \{ uni.showLoading(\{ title: '数据加载中...', \}) \}

// 请求完成之后做一些事情

$http.afterRequest = function () \{ uni.hideLoading() \}

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

\}, \}, \}

1. 渲染 UI 结构

2. 美化 UI 结构：

**3.2.3 配置小程序分包**

分包可以减少小程序首次启动时的加载时间

为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表 页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：

1. 在项目根目录中，创建分包的根目录，命名为 subpkg

2. 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相 关的结构：

swiper \{ height: 330rpx; .swiper-item, image \{ width: 100%; height: 100%; \} \} </style> \{ "pages": \[ \{ "path": "pages/home/home", "style": \{\} \}, \{ "path": "pages/cate/cate", "style": \{\} \}, \{ "path": "pages/cart/cart", "style": \{\} \},

3. 在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：

![7649a73be14a42a181e8d63f9a56f68b.png][]

**3.2.4 点击轮播图跳转到商品详情页面**

将 -item>-item> 节点内的 view 组件，改造为 navigator 导航组件，并动态 绑定 url 属性 的值。

1. 改造之前的 UI 结构：

2. 改造之后的 UI 结构：

\{ "path": "pages/my/my", "style": \{\} \} \], "subPackages": \[ \{ "root": "subpkg", "pages": \[\] \} \] \}

v-for="(item, i) in swiperList" :key="i">

class="swiper-item">

:src="item.image\_src">

**3.2.5 封装 uni.$showMsg() 方法**

当数据请求失败之后，经常需要调用 uni.showToast(\{ /\* 配置对象 \*/ \}) 方法来提示用户。此 时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的 改造步骤如下：

1. 在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

2. 今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：

3.3 分类导航区域

3.3.1 获取分类导航的数据

实现思路：

1. 定义 data 数据

2. 在 onLoad 中调用获取数据的方法

3. 在 methods 中定义获取数据的方法 示例代码如下：

v-for="(item, i) in swiperList" :key="i">

class="swiper-item" :url="'/subpkg/goods\_detail/goods\_detail? goods\_id=' + item.goods\_id">

:src="item.image\_src">

// 封装的展示消息提示的方法

uni.$showMsg = function (title = '数据加载失败！', duration = 1500) \{ uni.showToast(\{ title, duration, icon: 'none', \}) \}

async getSwiperList() \{ const \{ data: res \} = await uni.$http.get('/api/public/v1/home/swiperdata') if (res.meta.status !== 200) return uni.$showMsg() this.swiperList = res.message

export default \{ data() \{ return \{ // 1. 分类导航的数据列表

navList: \[\], \} \}, onLoad() \{ // 2. 在 onLoad 中调用获取数据的方法

this.getNavList() \}, methods: \{ // 3. 在 methods 中定义获取数据的方法

**3.3.2 渲染分类导航的 UI 结构**

1. 定义如下的 UI 结构：

2. 通过如下的样式美化页面结构：

3.3.2 点击第一项，切换到分类页面

1. 为 nav-item 绑定点击事件处理函数：

2. 定义 navClickHandler 事件处理函数：

**3.4 楼层区域**

async getNavList() \{ const \{ data: res \} = await uni.$http.get('/api/public/v1/home/catitems') if (res.meta.status !== 200) return uni.$showMsg() this.navList = res.message

\}, \}, \}

class="nav-list">

class="nav-item" v-for="(item, i) in navList" :key="i">

:src="item.image\_src" class="nav-img">

.nav-list \{ display: flex; justify-content: space-around; margin: 15px 0; .nav-img \{ width: 128rpx; height: 140rpx; \} \}

<view class="nav-item" v-for="(item, i) in navList" :key="i"

@click="navClickHandler(item)">

</view>

// nav-item 项被点击时候的事件处理函数

navClickHandler(item) \{ // 判断点击的是哪个 nav

if (item.name === '分类') \{ uni.switchTab(\{ url: '/pages/cate/cate'

\}) \} \}

**4.1 获取楼层数据**

实现思路：

1. 定义 data 数据

2. 在 onLoad 中调用获取数据的方法

3. 在 methods 中定义获取数据的方法 示例代码如下：

**3.4.2 渲染楼层的标题**

1. 定义如下的 UI 结构：

2. 美化楼层标题的样式：

**3.4.3 渲染楼层里的图片**

1. 定义楼层图片区域的 UI 结构：

export default \{ data() \{ return \{ // 1. 楼层的数据列表

floorList: \[\], \} \}, onLoad() \{ // 2. 在 onLoad 中调用获取楼层数据的方法

this.getFloorList() \}, methods: \{ // 3. 定义获取楼层列表数据的方法

async getFloorList() \{ const \{ data: res \} = await uni.$http.get('/api/public/v1/home/floordata') if (res.meta.status !== 200) return uni.$showMsg() this.floorList = res.message

\}, \}, \}

class="floor-list">

class="floor-item" v-for="(item, i) in floorList" :key="i">

:src="item.floor\_title.image\_src" class="floor-title">

.floor-title \{ height: 60rpx; width: 100%; display: flex; \}

2. 美化楼层图片区域的样式：

3.4.4 点击楼层图片跳转到商品列表页

1. 在 subpkg 分包中，新建 goods\_list 页面

![b8322f6a4caa40bd8a07b3f024d94886.png][]

2. 楼层数据请求成功之后，通过双层 forEach 循环，处理 URL 地址：

class="floor-img-box">

class="left-img-box">

:src="item.product\_list\[0\].image\_src" :style="\{width: item.product\_list\[0\].image\_width + 'rpx'\}" mode="widthFix">

class="right-img-box">

class="right-img-item" v-for="(item2, i2) in item.product\_list"

:key="i2" v-if="i2 !== 0">

:src="item2.image\_src" mode="widthFix" :style="\{width: item2.image\_width + 'rpx'\}">

.right-img-box \{ display: flex; flex-wrap: wrap; justify-content: space-around; \}

.floor-img-box \{ display: flex; padding-left: 10rpx; \}

3. 把图片外层的 view 组件，改造为 navigator 组件，并动态绑定 url 属性 的值：

3.5 分支的合并与提交

1. 将本地的 home 分支进行本地的 commit 提交：

2. 将本地的 home 分支推送到远程仓库进行保存：

3. 将本地的 home 分支合并到本地的 master 分支：

4. 删除本地的 home 分支：

// 获取楼层列表数据

async getFloorList() \{ const \{ data: res \} = await uni.$http.get('/api/public/v1/home/floordata') if (res.meta.status !== 200) return uni.$showMsg() // 通过双层 forEach 循环，处理 URL 地址

res.message.forEach(floor => \{ floor.product\_list.forEach(prod => \{ prod.url = '/subpkg/goods\_list/goods\_list?' +

prod.navigator\_url.split('?')\[1\] \}) \}) this.floorList = res.message

class="floor-img-box">

class="left-img-box" :url="item.product\_list\[0\].url">

:src="item.product\_list\[0\].image\_src" :style="\{width: item.product\_list\[0\].image\_width + 'rpx'\}" mode="widthFix">

class="right-img-box">

class="right-img-item" v-for="(item2, i2) in item.product\_list"

:key="i2" v-if="i2 !== 0" :url="item2.url">

:src="item2.image\_src" mode="widthFix" :style="\{width: item2.image\_width + 'rpx'\}">

git add .

git commit -m "完成了 home 首页的开发"

git push -u origin home

git checkout master

git merge home

git branch -d home

[uni-app]: https://www.bilibili.com/video/BV1834y1676P/?vd_source=41c3fb2563aafeb9df08eb0da84bd9e9
[9e0f2519acfecb13fb311a606e15bdf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/57677c26506e4629a898c9139209373d.png
[3e223590ecd3475ea31da33d6457e486.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e77522f2ac8d435087c571b762651384.png
[53efdb5bfcc04b2a8a069835a3eea307.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8eb47e573608494bae86514dac1db213.png
[38871bcd83bb459c8489eedba3a45a6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cf1f4dc7dc984c3ab7b061fe7d236bbe.png
[a9196d2576224892ad3cdcff5cdf5bb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/45b519161c904e44944b89dc88a523e2.png
[6b531d5d9dc34b1a9f701ebf29c05d3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/89295c81320b4250ba00d62b4dccc54d.png
[de7545ca57b1108fd6d902115aa03142.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b967f77eaf3740229c2aa978b27454c6.png
[8684e6f7aa00431db0a387d60a1eb233.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4a9623deb09d4b93a4bb478d36e34e32.png
[bd7ba42b8b19466d884fcf8fffc1467f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/88b453d0729841e3875aeb5197387b8f.png
[473d2f675e3c418ea59c4b6bd274ce6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/759f54fa53d14f66b0021d802a43ef9a.png
[fdff84da4ed891676c85a5cf5f4f351a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2074ca0d30fd4dff96ce00fb9bcbca9a.png
[17b59f3729254753bcd7081c8470e60b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/89cfd8bb9e2d4ee098ceffc7c3c3d473.png
[7649a73be14a42a181e8d63f9a56f68b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/79be1f621438470bac59077014502744.png
[b8322f6a4caa40bd8a07b3f024d94886.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6a037c0bcfd74abe8b01da0244490ab4.png