【愚公系列】2022年10月 微信小程序-优购电商项目-项目框架搭建
2023-06-13 09:15:02 时间
文章目录
前言
一、项⽬搭建
1.新建⼩程序项⽬
填入自己的appid
2. 搭建⽬录结构
⽬录名 | 作⽤ |
---|---|
styles | 存放公共样式 |
components | 存放组件 |
lib | 存放第三⽅库 |
utils | ⾃⼰的帮助库 |
request | ⾃⼰的接⼝帮助库 |
3. 搭建⽬录结构
⻚⾯名称 | 名称 |
---|---|
⾸⻚ | index |
分类⻚⾯ | category |
商品列表⻚⾯ | goods_list |
商品详情⻚⾯ | goods_detail |
购物⻋⻚⾯ | cart |
收藏⻚⾯ | collect |
订单⻚⾯ | order |
搜索⻚⾯ | search |
个⼈中⼼⻚⾯ | user |
意⻅反馈⻚⾯ | feedback |
登录⻚⾯ | login |
授权⻚⾯ | auth |
结算⻚⾯ | pay |
{
"pages": [
"pages/index/index",
"pages/category/index",
"pages/goods_list/index",
"pages/goods_detail/index",
"pages/cart/index",
"pages/collect/index",
"pages/order/index",
"pages/search/index",
"pages/user/index",
"pages/feedback/index",
"pages/login/index",
"pages/auth/index",
"pages/pay/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#eb4450",
"navigationBarTitleText": "黑马优购",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
}
,
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
}
,
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
4. 字体图标
- 打开阿⾥巴巴字体图标 ⽹站
- 选择的图标
- 添加⾄项⽬
- 下载到本地
- 将样式⽂件 由 css 修改为 wxss
- ⼩程序中引⼊
5. 其他
小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
mdn文档:https://developer.mozilla.org/zh-CN/
相关文章
- ctk框架搭建(一) ctk框架插件加载与项目结构
- 购物车项目+EL表达式+JSTL+数据库
- 【愚公系列】2022年11月 微信小程序-本地生活项目-商家列表
- 【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面的标题及价格功能实现
- idea web项目部署到tomcat_系统部署步骤
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯
- 【愚公系列】2022年11月 微信小程序-优购电商项目-意见反馈页面
- Maven项目报错:The type javax.validation.Payload cannot be resolved. It is indirectly referenced from req
- Spring AOP在项目中的典型应用场景
- 微信小程序开发工具导入开发项目教程-阿白必备
- 6.4k stars的项目在浏览器上运行Windows11
- SQL2000安装后,SQL Server组无项目解决方法
- Idea导入maven项目没有识别详解程序员
- 微信小程序开发—项目工程目录介绍—1详解手机开发
- Apache的开源项目Commons Email发送邮件详解编程语言
- Linux下构建Web项目:从零开始(linuxweb项目)
- Linux重启,助力项目再次成功开展(linux 重启项目)
- 快速搭建 NET 项目,用 MySQL 配置环境(.net 配置mysql)
- web项目快速部署之Redis配置指南(web项目redis配置)