涵盖的功能: |
安装开发工具HBuilder:HBuilderX-高效极客技巧 |
创建项目步骤: 1.右键-项目: 2.选择vue2和默认模板: 3.完整的项目目录: |
微信开发者工具调试: 1.安装微信开发者工具 2.打开设置---安全设置---打开服务端口 3.在XBuilder中运行即可: 效果图展示: |
定义公共样式【common & static】: 引入公共样式: |
app.vue 引入样式: |
编写底部菜单栏: 1.在static 下创建tarbar文件夹,将图片拷贝进去 2.直接创建页面index,my,shopcart,list 页面,会自动填充到page.json中 3.pages.json编写底部菜单栏: |
编写swiper: 1.编写公共组件[mode的作用是使图片填充完整100%]: 2.引入组件[第3行和8行和15行]: |
编写中间内容公共图片组件: 编写中间内容文字组件[猜你喜欢]: index引入商品列表组件: 商品列表组件编写: 商品单个组件编写: |
编写户外运动组件: 1.编写头部组件: 2.编写九宫格: 3.编写热卖页面组件: 4.效果图展示: |
推荐店铺: 1.注意这个是带滚动条的,第7行 2. 去掉滚动条的样式:【17-23行】 第10行: |
顶部菜单栏和顶栏跟随: 1.顶部菜单栏: 2. 3.方法实现: |
主页处理: 1. 2.第95行-100行 |
nodeJs搭建后端: 0.进入cmd: 1.执行命令:npm install express-generator -g 2.进入E:\work\gitee\uni-app-mall-1\uni-app-mall-1目录下 3.执行命令:express --view=ejs server[会出现一个server的文件夹,这个就是nodeJs的生成的后端] 4.进入后端目录:cd server 5.下载依赖项执行命令: npm install 6.启动后端:npm start[默认端口:3000] 7.浏览器访问效果【搭建成功】: 8.编写第一个接口: 重新启动:npm start 浏览器访问效果: |
编写首页后端接口: 1.router文件夹下的index.js 2.重启项目npm start 3.浏览器访问: 4.前端页面访问后端代码编写【index页面】: |
首页请求数据: 1.uni异步请求数据: 2.循环展示: 3.轮播图处理: |
异步请求封装: 1.工具类: 2.改写异步请求 |
编写搜索页面: 1.新建页面search: 2. |
uniapp从零到一的学习商城实战
于 2023-09-04 11:24:42 首次发布