2021版小程序开发5——小程序项目开发实践(1)
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语法进行编写了；
HBuilderX个性化配置
工具->预设快捷键方案切换->VSCode；
工具->设置->打包Settings.json按需配置；
2 项目初始化
新建 项目 uni-app
- 指定项目名、存放路径，推荐使用uni-ui项目模版；
- uni-ui：https://uniapp.dcloud.net.cn/component/#uniui
项目目录结构：
components
comp-a.vue
pages
index
index.vue
list
list.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中注册
- 勾选 创建同名目录
- 输入页面名称 创建即可，页面内容如下
新建四个页面
- 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 -ynpm 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赋值给res
if (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">xxxview>
<view :class="['classP', index === action_index ? 'classS' : '']">xxxview>
.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") || '[]')