微信小程序黑马优购讲解
2021/5/17 20:56:01
本文主要是介绍微信小程序黑马优购讲解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序黑马优购讲解
- 1.准备工作
- 1.首先拿到项目后做好项目搭建
- 2.搭建基础页面
- 分类页面
- 列表页内容
1.准备工作
1.首先拿到项目后做好项目搭建
(1)搭建之前首先要分析整个项目的剧本组成是否有源码或者是效果图(黑马优购有源码和效果图 和请求的接口文档)
(2)在源码或者效果图上分析页面的组成以及效果的展示页面跳转等
(3)在以上准备工作完成之后就要利用微信开发者工具进行开发
2.搭建基础页面
1.首先打开项目文件找到app.json中创建该项目需要的文件
2.在app.json中配置底部导航实现底部基本页面的跳转
3.底部tabbar配好路由可以跳不同的页面
接着就可以写首页的布局以及功能的实现
在请求数据时用的是封装的request请求
在根目录下创建http文件里面包含fetch.js http.js 和api.js在这个文件中来封装请求的接口
api.js
fetch.js
http.js
采用封装的方法可以处理项目在开发过程中出现一致的功能或者效果是可以用这种方式来提高开发效率
接着就可以通过项目的api文档来获取到接口请求过来的数据
首页的轮播图,nav导航,以及下面的楼层都是根据接口地址来获取所需要的所有数据最后渲染到页面上,可以采用组件化开发思想利用组件在首页注册引入。
分类页面
1.商品的分类页面是在首页给中间导航绑定点击事件然后在首页的js文件下写跳转的路由 这里用的是微信小程序文档的方法进行页面跳转
2.在分类页面,根据api接口文档在封装好的http文件中请求分类页面需要的的数据分类页面顶部的搜索按钮可以根据封装的直接引入,下面分类数据请求接口左侧的侧导航与右边的商品相当于竖向的tab切换
可以根据左侧对应的下标来找到对用的商品
列表页内容
1.通过在商品页面右侧的商品设置点击事件根据绑定的自定义是属性这样可以根据唯一的商品goods_id找到对应的商品列表数据
代码如下:
通过点击事件跳转到商品列表页(这里注意跳转路由需要传参就是商品的当前id)
这样可以实现到列表页一个跳转,在列表页根据传的参数id可以获取当前点击的对应的数据
然后遍历数据渲染到列表页
这篇关于微信小程序黑马优购讲解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程:从零开始的全攻略
- 2024-11-19微信小程序全栈学习:从零开始的完整指南