网站备案进度,外链网站 英文,seo百度排名优化,营销策略是什么意思2021版小程序开发5——小程序项目开发实践(1) 学习笔记 2025 使用uni-app开发一个电商项目#xff1b;
Hbuidler
首选uni-app官方推荐工具#xff1a;https://www.dcloud.io/hbuilderx.htmlhttps://dev.dcloud.net.cn/pages/app/list
微信小程序
管理后台#xff1a;htt…2021版小程序开发5——小程序项目开发实践(1) 学习笔记 2025 使用uni-app开发一个电商项目
Hbuidler
首选uni-app官方推荐工具https://www.dcloud.io/hbuilderx.htmlhttps://dev.dcloud.net.cn/pages/app/list
微信小程序
管理后台https://mp.weixin.qq.com/?tokenlangzh_CN小程序IDEhttps://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 langscss/style
HBuilderX个性化配置
工具-预设快捷键方案切换-VSCode
工具-设置-打包Settings.json按需配置
2 项目初始化
新建 项目 uni-app
指定项目名、存放路径推荐使用uni-ui项目模版uni-uihttps://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中注册勾选 创建同名目录输入页面名称 创建即可页面内容如下
templateview/view
/templatescriptexport default {data() {return {};}}
/scriptstyle langscss/style新建四个页面
homecatecartmy 在小程序开发者工具中配置某一个页面的编译模式仍然是可用的 配置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赋值给resif (res.meta.status ! 200){return uni.showToast({title:Error,duration: 1500,icon: none})}this.datalist res.datas
}轮播图
键入uswiper就可以填入预设的代码段
circular衔接滚动
swiper :indicator-dotstrue :autoplaytrue :interval3000 :duration1000 :circulartrueswiper-item v-for(item, index) in datalist :keyindexview classswiper-itemimage :srcitem.image_src/image/view/swiper-item
/swiperstyle langscss
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 :keyindexnavigator classswiper-item :url/subpkg/goods_detail/goods_detail?goods_id item.idimage :srcitem.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 :keyindex clicknavClickHandler(item)/viewnavClickHandler(item){if (item.name cate){uni.switchTab({url:/pages/cate/cate})}
}图片动态绑定样式和显示模式设置
imag :src :style{width: img_width rpx} modewidthFix宽度固定 高度自适应/imaggit基本操作
# 创建分支
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-ytrue :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 classclassP classSxxx/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) || [])
