| 1.创建项目：
初始化项目[清空index文件下的index.wxml 和index.wxss和index.js]：
删掉日志相关[app.json [日志配置，和pages下log文件夹]： |
| 微信开放文档：视图容器 | 微信开放文档 安装easy sass:
2.找到easy-sass插件进行拷贝【就是第一个】到微信开发者工具扩展包下【】：
3.启用easy-sass:
|
| 项目开始： 1.全局样式处理
2.全局js配置[window]：
3.创建页面：
4.创建底部栏：
5.创建头部搜索组件并且app.json引入组件：
6.首页引入搜索组件：
编写组件内容代码：
注释：flex一行显式，space-between分为左右，center内容居中
|
| 创建轮播图[是否衔接，自动轮播，3秒一次，圆型]：
编写轮播图样式：
编写顶部菜单栏： 要求： 1.点击某个菜单应该有相应的跳转页面 2.顶部菜单栏应该是可配置的(图片和文字)，即从数据库中获取数据，进行循环展示 3.可以左右拖动的[scroll-x]
4.定义顶部菜单栏一行展示，字体居中
5.编写axios请求后端工具类：
6.定义后端接口：
7.获取数据库数据【引入api,定义变量，获取相应数据】：
8.开发环境配置域名检查：
|
| 中间公司介绍内容编写： 1.编写wxml页面
2.定义背景图片：
3.定义公共部分文字颜色，居中，大小：
|
| 编写index的新闻资讯： 1.编写新闻资讯页面和样式
2.编写新闻紫云公共组件xzs-news-item 3.在components创建xzs-news-item文件夹和xzs-news-item组件 4.引入组件[39行]：
5.编写xzs-news-item组件内容编码：
样式：
3.读取news内容：
4.循环展示news组件:
|
| 引入icon图标库[vedio 49]：5.9.第三方UI组件库vant weapp和TDesign_哔哩哔哩_bilibili 0.图标库地址：Vant Weapp - 轻量、可靠的小程序 UI 组件库 1.在终端输入命令：npm i @vant/weapp -S --production
2.删掉app.json中的"style":"v2"
3.修改project.config.json文件【第18-22行】：
4.引入组件[第43行]：
5.点击工具-构建npm：
6.重新编译项目 7.关闭微信开发者工具，重新打开微信开发者工具【防止缓存，防止小图标引入不显式，页面显式问题】 7.效果图[注意看每行会多小图标哦]：
|
| 资讯逻辑编写： 1.页面编写【第六行新闻资讯组件，创建新闻资讯组件，通过父传子接收参数配置js:第6-14行】：
描述：
2.引入axions异步请求工具：
3.获取数据新闻资讯列表数据：
4.注意上拉和下拉的数据刷新：onPullDownRefresh & onReachBottom
5.页面循环展示数据：
效果展示：
|
| 详情代码编写： 1.注意第一行使用的是微信跳转标签navigator：
2.app.json创建详情页面[第6行]
3.编写详情页面：
4.js引入API和接收id
编写分享【配合页面第18行】：
效果展示：
|
| 编写分类代码： 1.编写分类页面[其中底部菜单栏第7-12行配合app.json中的第49-50行]：
2.编写js[异步请求]：
异步请求实现获取顶部菜单栏：
获取每一个tab下的商品数据集合：
导航栏切换实现：
|
10-13
3万+
3万+
05-06
04-24
166
166
04-25
1203
1203
04-11
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
