jQuery_04(动画和事件)

2022-03-22 00:00:49 阅读：243 来源： 互联网

标签：jQuery 动画 04 微信商城 tabBar images pages png

开篇
【系】微信小程序云开发实战坚果商城-开篇
基础篇
【系】微信小程序云开发实战坚果商城-弹性盒子
【系】微信小程序云开发实战坚果商城-ES6 简单入门
【系】微信小程序云开发实战坚果商城-官方案例先运行
前端篇
【系】微信小程序云开发实战坚果商城-商城项目搭建
【系】微信小程序云开发实战坚果商城-所有目录…
1 准备工作
已经申请小程序，获取小程序 AppID 在小程序管理后台中，设置的开发设置下可以获取微信小程序 AppID 。

2 新建项目

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

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

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

“window”: {
“backgroundColor”: “#F6F6F6”,
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#F6F6F6”,
“navigationBarTitleText”: “坚果商城”,
“navigationBarTextStyle”: “black”
}
1
2
3
4
5
6
7
自定义 tabBar ，坚果商城目前主要的有首页、分类、购物车、个人中心。在配置 tabBar 首先我们需要新建我们每一个要指向 tabBar 的页面。在 pages 写好页面路径列表，保存微信开发者工具自动帮我们生成

“pages”: [
“pages/index/index”,
“pages/category/category”,
“pages/cart/cart”,
“pages/my/my”
],
1
2
3
4
5
6
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”: “个人中心”
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
5 运行效果

部署不成功、图片无法显示、
————————————————
版权声明：本文为CSDN博主「山间木匠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/havendream/article/details/103022403

标签：jQuery,动画,04,微信,商城,tabBar,images,pages,png
来源： https://blog.csdn.net/m0_63772104/article/details/123649670

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery_04(动画和事件)