2021版小程序开发5——小程序项目开发实践(1)

学习笔记 2025

使用uni-app开发一个电商项目；

Hbuidler

• 首选uni-app官方推荐工具：
• https://www.dcloud.io/hbuilderx.html
• https://dev.dcloud.net.cn/pages/app/list

微信小程序

• 管理后台：https://mp.weixin.qq.com/?token=&lang=zh_CN
• 小程序IDE：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

uni组件库：

• https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html

字体图标

• https://www.iconfont.cn/

z-paging 插件用法：

• https://z-paging.zxlee.cn/

1 开发环境

uni-app

• https://uniapp.dcloud.net.cn/
• 使用vue语法开发所有前端应用的框架；
• 跨平台，只需编写一套代码，可以开发app、h5、各类小程序；

HBuilderX

IDE推荐使用HBuilderX（下载安装app开发板）

• 提供了丰富的模版
• 完善的智能提示
• 一键运行

在HBuilderX中安装Sass编译的插件

scss/sass编译插件

• 登录dcloud插件市场（https://ext.dcloud.net.cn/），下载相应的编译插件compile-node-sass；
• 使用HBuilderX导入安装即可；
• 这样后续项目中的css样式，就都可以使用sass语法进行编写了；

<style lang="scss"></style>

HBuilderX个性化配置

工具->预设快捷键方案切换->VSCode；

工具->设置->打包Settings.json按需配置；

2 项目初始化

新建 项目 uni-app

• 指定项目名、存放路径，推荐使用uni-ui项目模版；
• uni-ui：https://uniapp.dcloud.net.cn/component/#uniui

项目目录结构：

componentscomp-a.vue
pagesindexindex.vuelistlist.vue
static  // 静态资源存放位置（视频 图片等）
main.js  // vue初始化入口文件
App.vue  // 应用全局配置
manifest.json   // 应用信息配置
pages.json   // 配置小程序页面路径、窗口样式 tabbar navigationBar等页面类信息

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

• 在manifest.json 微信小程序配置中填写微信小程序的AppID；
• 工具->设置->打包Settings.json，在运行配置中的小程序运行配置，配置微信开发者工具的路径；
• 在微信开发者工具中，设置->安全设置，开启服务端口；
• HBuilderX中，运行->运行到小程序模拟器->微信开发者工具（编译后自动运行）；

在manifest.json（源码视图下）中的mp-weixin对应的就是微信小程序中的配置对象，其setting节点可以配置以前我们在小程序的project.config.json中setting节点的配置项；

Git管理项目：

• 新建.gitignore，配置：/node_modules和/unpackage/dist
  • 如果要跟踪一个空目录，可以在该目录下新建一个.gitkeep的文件进行占位；
• 相关git操作，如git init等；
  • 本地git
  • 配置远程ssh公钥
  • 远程创建仓库，本地推送至远程仓库

3 项目开发

创建页面

新建页面：

• 使用 scss页面
• 勾选 在pages.json中注册
• 勾选 创建同名目录
• 输入页面名称 创建即可，页面内容如下

<template><view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss"></style>

新建四个页面

• home
• cate
• cart
• my

在小程序开发者工具中，配置某一个页面的编译模式，仍然是可用的；

配置tabBar效果

将图标等静态资源放到static目录（根据功能划分子目录）；

在pages.json配置文件，新增tabBar配置节点：

{"tabBar": {"selectedColor": "#C00000","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "static/tab_icons/home.png","selectedIconPath": "static/tab_icons/home-active.png"},// cate  cart  my 等tabBar页面配置// 删除默认的index页面及配置]}
} 

修改导航条样式

在pages.json配置文件的globalStyle节点进行配置：

"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "Title", // 每个page的style节点同名属性会覆盖该值；"navigationBarBackgroundColor": "#C00000","backgroundColor": "#FFFFFF"
}

网络请求配置

小程序中不支持axios，而wx.request()功能简单，不支持拦截器等全局定制，uni-app中使用@escook/request-miniprogram三方包发起网络请求；

• npm init -y
• npm install @escook/request-miniprogram

文档：https://www.npmjs.com/package/@excook/request-miniprogram

在main.js中进行配置：

import { $http } from '@escook/request-miniprogram'// uni 类似 wx 同为全局对象，也可以在uni上挂载一些全局的自定义方法
uni.$http = $http
$http.baseUrl = "https://www.test.com"
// ...
// 拦截器
$http.beforeRequest = function(options){uni.showLoading({title:"Loading..."})
}
$http.afterRequest = function(){uni.hideLoading()
}

一般在页面的onLoad中发送网络请求；另外这是vue语法，因此方法需要定义到methods中；

// 使用示例
async getDatas(){const {data: res} = await uni.$http.get("/suburl")// 结构返回信息的data赋值给resif (res.meta.status !== 200){return uni.showToast({title:"Error",duration: 1500,icon: 'none'})}this.datalist = res.datas
}

轮播图

键入uswiper，就可以填入预设的代码段；

• circular：衔接滚动

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><swiper-item v-for="(item, index) in datalist" :key="index"><view class="swiper-item"><image :src="item.image_src"></image></view></swiper-item>
</swiper><style lang="scss">
swiper {height: 330rpx;<!-- 同时为两个选择器对应的视图添加样式 -->.swiper-item, image {width: 100%;heitht: 100%;}
}
</style>

《2021版小程序开发1——起步》-8 轮播图组件

为了使轮播图点击可以跳转到相应页面，可使用navigator组件替换掉包括image的view组件；url指定目标页面的路径，同时传递了一个id参数；

<swiper-item v-for="(item, index) in datalist" :key="index"><navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.id"><image :src="item.image_src"></image></navigator>
</swiper-item>

《2021版小程序开发3——视图与逻辑》-1 页面导航

如果通过点击事件触发导航，可以使用uni.navigateTo方法：

gotoDetail(id){uni.navigateTo({url: '/subpkg/detail/detail?id=' + id})
}

uni-app如何配置小程序分包

• 在项目根目录，创建分包根目录subpkg
• 在pages.json中，和pages节点平级生命subPackages节点，以定义分包相关结构；

"subPackages": [{"root": "subpkg","pages": []}
]

• 分包页面，在subpkg目录右击新建页面（注意在选项页面，还要选择小程序所属分包，如subpkg）；

选择分包的页面创建，会自动修改json配置；

《2021版小程序开发4——基础加强》-7 分包

Flex布局

《弹性布局-更优秀的Flex》https://blog.csdn.net/baby_hua/article/details/105952517

四个分类导航按钮，就可以通过Flex布局方便的实现样式；

抛掉iOS布局的经验，深入理解流式布局；

点击分类导航到分类tab页面

<view v-for="(item, index) in navList" :key="index" @click="navClickHandler(item)"></view>

navClickHandler(item){if (item.name == "cate"){uni.switchTab({url:"/pages/cate/cate"})}
}

图片动态绑定样式和显示模式设置

<imag :src="" :style="{width: img_width + 'rpx'}" mode="widthFix">宽度固定 高度自适应</imag>

git基本操作

# 创建分支
git chechout -b branch_a# 提交本地修改
git add .  
git commit -m 'tag info'# 将分支推送到远程
git push -u origin branch_a# 本地分支合并
git chechout master
git merge home# 删除分支
git branch -d branch_a

滑动区域-滚动视图

scroll-view组件

• 指定滑动方向，如 scroll-y；
• 如果是纵向可滑动，还需要指定一个固定的高度(对于确定的宽度或高度，可以直接使用px单位，而无需使用rpx)；

该组件还支持一个属性scroll-top，用于设置滚动条到顶部的距离；值的话可以0和1切换，以响应变化；

<scroll-view scroll-y="true" :style="{height: scroll_height + 'px'}"></scroll-view>

如果想让滚动视图纵向充满全屏，需要使用uni提供的获取系统信息的同步接口：uni.getSystemInfoSync()

• screenHeight：屏幕高度；
• windowHeight：可用窗口高度（一般是减去navigationBar和tabBar高度后的值）；

onLoad() {const systemInfo = uni.getSystemInfoSync()this.scroll_height = systemInfo.windowHeight
}

多类名样式SCSS

<view class="classP classS">xxx</view><!-- 动态绑定多类名设置 -->
<view :class="['classP', index === action_index ? 'classS' : '']">xxx</view>

.classP{line-height: 30px;font-size: 12px;font-weight: bold;text-align: center;padding: 15px 0;color: #EEEEEE,/* 既包含classP 又包含classS 则额外添加如下样式 */&.classS {backgroundColor: #EEEEEE;position: relative;/* 通过尾元素添加额外样式: 靠左 居中的 小红条 */&::before {content: ' ';display: block;width: 3px;height: 30px;backgroundColor: #C00000;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}}
}

自定义组件

在components目录上，右击新建组件，使用scss并创建同名目录，点击创建即可；

创建后的组件，可以直接使用标签形式进行使用；

自定义组件绑定click事件（和其他事件），需要在组件中使用this.$emit("click")进行触发；

组件属性：

props: {bgColor: {type: String,default: "#ffffff"},radius: {type: Number,default: 18}
}

组件吸顶效果

position: sticky;是 CSS 中的一个定位属性，它可以让元素在滚动时“粘”在页面的某个位置，直到达到指定的阈值。这个属性结合了 position: relative; 和 position: fixed; 的特点，常用于实现滚动时固定在页面某个区域的元素，比如导航栏、表头或侧边栏。

/* 组件包裹容器 */
.op-box {position: sticky;/* 元素距离视口顶部的距离，当滚动超过这个距离时，元素会粘在顶部;或其他方向的值，如 bottom, left, right; */top: 0;/* 提高层级 防止覆盖 */ z-index: 999;
}

默认行为：

• 元素在页面中正常渲染，表现为 position: relative; 的效果。
• 元素会跟随页面滚动。

触发粘性行为：

• 当页面滚动到指定的阈值（通过 top, bottom, left, 或 right 设置），元素会“粘”在容器的边界上，表现为 position: fixed; 的效果。
• 当滚动回到阈值范围内，元素会恢复为 position: relative; 的行为。

uni-app中uni组件的修改

uni的组件会存档到一个单独的目录中uni_modules；

可以到组件的源代码中，对样式进行修改；

搜索框自动获取焦点

这里使用的是 uni-search-bar，可以修改其源码属性值：

show: true,
showSync: true,

需要真机预览；

搜索文本框的防抖处理

// data中定义
{
keyword: '',
timer: null,
},
// input事件：每输入一个字符都会回调 并返回当前值
input(e){// 清除延时器clearTimeout(this.timer)// 500ms内没有新回调 才为keyword赋值this.timer = setTimeout(()=>{this.keyword = e.value// 随即可以发送网络请求}, 500)
}

文本单行省略显示处理

.line-1{/* 文字不换行 */white-space: nowrap;/* 溢出隐藏 */overflow: hidden;/* 文本溢出 使用...代替 */text-overflow: ellipsis;margin-right: 3px;
}

uni组件库提供的组件 标签名即类名

.uni-tag{margin: 5px;
}

数组解构初始化一个新数组

computed: {datalistShow() {return [...this.datalist].reverse()}
}

利用Set对象去重数组

const set = new Set(this.datalist)
set.delete(this.kw) // 删除是为了调关键词顺序
set.add(this.kw)
this.datalist = Array.from(set)

检索历史记录数据存本地Storage

// 存
uni.setStorageSync("keywords", JSON.stringfy(this.datalist))// 取
this.datalist = JSON.parse(uni.getStorageSync("keywords") || '[]')