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

server/2025/2/5 4:36:55/

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") || '[]')

http://www.ppmy.cn/server/165065.html

相关文章

GESP2023年12月认证C++六级( 第三部分编程题(1)闯关游戏)

参考程序代码&#xff1a; #include <cstdio> #include <cstdlib> #include <cstring> #include <algorithm> #include <string> #include <map> #include <iostream> #include <cmath> using namespace std;const int N 10…

React+Cesium基础教程(003):加载3D建筑物和创建标签

文章目录 03-加载3D建筑物和标签方式一方式二完整代码03-加载3D建筑物和标签 方式一 添加来自 OpenStreetMap 的建筑物模型,让场景更加丰富和真实: viewer.scene.primitives.add(new Cesium.createOsmBuildings() );方式二 使用 Cesium ion 资源:

android java系统弹窗的基础模板

1、资源文件 app\src\main\res\layout下增加custom_pop_layout.xml 定义弹窗的控件资源。 <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/…

发布 VectorTraits v3.1(支持 .NET 9.0,支持 原生AOT)

文章目录 发布 VectorTraits v3.1&#xff08;支持 .NET 9.0&#xff0c;支持 原生AOT&#xff09;支持 .NET 9.0中断性变更 支持 原生AOT原生AOT的范例使用IlcInstructionSet参数 TraitsOutput类增加IsDynamicCodeCompiled/IsDynamicCodeSupported信息的输出为了支持原生AOT, …

详解Kafka并行计算架构

引言 在高流量的复杂场景下&#xff0c;Kafka 凭借卓越的性能表现脱颖而出&#xff0c;始终维持着极高的吞吐率和高效的消息消费能力&#xff0c;在众多消息队列产品中独树一帜。其稳定且强大的性能&#xff0c;不仅保障了海量数据的快速处理&#xff0c;还为各类业务的高效运行…

33.Word:国家中长期人才发展规划纲要【33】

目录 NO1.2样式​ NO3​ 图表 ​ NO4.5.6​ 开始→段落标记视图→导航窗格→检查有无遗漏 NO1.2样式 F12/另存为&#xff1a;Word.docx&#xff1a;考生文件夹样式的复制样式的修改 样式的应用&#xff08;没有相似/超级多的情况下&#xff09;——替换 [ ]通配符&#x…

Vuex状态管理

1、Vuex 是什么&#xff1f; Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 简单理解 Vuex可以帮我们管理全局的属性&#xff0c;并且是是响应式的&…

hexo部署到github page时,hexo d后page里面绑定的个人域名消失的问题

Hexo 部署博客到 GitHub page 后&#xff0c;可以在 setting 中的 page 中绑定自己的域名&#xff0c;但是我发现更新博客后绑定的域名消失&#xff0c;恢复原始的 githubio 的域名。 后面搜索发现需要在 repo 里面添加 CNAME 文件&#xff0c;内容为 page 里面绑定的域名&…