微信小程序云开发实战坚果商城-ES6简单入门

[复制链接]
查看1061 | 回复0 | 2022-12-1 17:01:22 | 显示全部楼层 |阅读模式
小程序商城开发9nj华网,如何搭建微信小程序商城admin09-12 12:55103次浏览第 2-1 课:商城项目搭建 目录 开篇   【系】微信小程序云开发实战坚果商城-开篇 基础篇   【系】微信小程序云开发实战坚果商城-弹性盒子【系】微信小程序云开发实战坚果商城-ES6 简单入门【系】微信小程序云开发实战坚果商城-官方案例先运行 前端篇   【系】微信小程序云开发实战坚果商城-商城项目搭建【系】微信小程序云开发实战坚果商城-所有目录…  1 准备工作

已经申请小程序,获取小程序 AppID 在小程序管理后台中, 设置的开发设置 下可以获取微信小程序 AppID 。

2 新建项目

这里我们已经不需要官方的模板,将其官方给的图片和模板删除。

项目重命名,文件夹和 project.config.json 对应即可

3 app.json 配置文件修改

修改 app.json 全局的默认窗口配置

"window": {    "backgroundColor": "#F6F6F6",    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#F6F6F6",    "navigationBarTitleText": "坚果商城",    "navigationBarTextStyle": "black"  }

自定义 tabBar ,坚果商城目前主要的有首页、分类、购物车、个人中心。在配置 tabBar 首先我们需要新建我们每一个要指向 tabBar 的页面。在 pages 写好页面路径列表 ,保存微信开发者工具自动帮我们生成

"pages": [    "pages/index/index",    "pages/category/category",    "pages/cart/cart",    "pages/my/my"  ],

tabBar 所需要的图片存放 pages/images/tabBar 文件中。

"window": {   ....},"tabBar": {    "color": "#7F8389",    "selectedColor": "#FF6200",    "backgroundColor": "#fff",    "borderStyle": "black",    "list": [{"pagePath": "pages/index/index","iconPath": "images/tabBar/home.png","selectedIconPath": "images/tabBar/home@select.png","text": "首页"},{"pagePath": "pages/category/category","iconPath": "images/tabBar/category.png","selectedIconPath": "images/tabBar/category@select.png","text": "分类"},{"pagePath": "pages/cart/cart","iconPath": "images/tabBar/cart.png","selectedIconPath": "images/tabBar/cart@select.png","text": "购物车"},{"pagePath": "pages/my/my","iconPath": "images/tabBar/my.png","selectedIconPath": "images/tabBar/my@select.png","text": "个人中心"}    ]  } 4 全局样式修改

app.wxss 全局样式

/**app.wxss**/page{  width:100%;  padding: 0;  margin: 0;  height: 100%;  font-family:  "PingFang SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;  background-color: #f2f2f2;}.container {  display: flex;  flex-direction: column;  align-items: center;  box-sizing: border-box;}  5 运行效果

部署不成功、图片无法显示、数据库无法获取,快速部署坚果商城,欢迎微信搜索「山间木匠」,后台回复关键字「坚果商城」获取最新PDF

源码地址

在搭建项目前,根据自己需要下载本系列文章的源代码

本项目源码地址:

基于微信开发,企业微信开发环境微信怎么写日志和编辑日志
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则