01-⼩程序商城商城框架的制作(⼩程序商城开发、⼩程序毕业设计、
⼩程序源代码)(黄。。。
⼩程序商城商城框架的制作
讲解商城⼩程序⾸页模块的制作,包含商城框架的制作、顶部普通⼴告图⽚、顶部轮播⼴告、快捷菜单、最新通知、最新产品、精品推荐等元素的制作,最后介绍销售排⾏的制作。本章主要应⽤了CSS和Flex Box的知识、⼩程序前端开发的基础知识。
商城框架
本节开始制作整个⼩程序商城的框架,主要是底部5个菜单的设置,⼩程序中app.json的设置参见2.2.1节“全局配置”。
准备:5个菜单的默认图⽚和选中菜单的显⽰图⽚,合计10个图⽚,位于⽂件夹images⾥⾯。底部菜单的设置参见2.2.1节“全局配置中的tabBar”。
app.json的设置代码⽰例如下:
{
"pages":[<!—⼩程序⾥⾯的页⾯-->
"pages/index/index"
],
"window":{<!—⼩程序的窗体设置-->
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#999999",
"navigationBarTitleText":"⼩程序购物商城",
"navigationBarTextStyle":"black"
},
"tabBar":{<!—-底部菜单-->
"list":[
{
"pagePath":"pages/index/index",<!—页⾯链接的路径-->
"text":"⾸页",<!—菜单⽂字-->
"iconPath":"images/shou-off.png",<!—菜单图⽚-->
"selectedIconPath":"images/shou-on.png"<!—菜单选中时候显⽰的图⽚-->
},
{
"pagePath":"pages/fenlei/index",
"text":"分类",
"iconPath":"images/fen-off.png",
"selectedIconPath":"images/fen-on.png"
},
{
"pagePath":"pages/tmp/gouwuche/01-jianjie",
"text":"购物车",
"iconPath":"images/che-off.png",
"selectedIconPath":"images/che-on.png"
},
{
"pagePath":"pages/huiyuan/index",
"text":"我的",
"iconPath":"images/hui-off.png",
"selectedIconPath":"images/hui-on.png"
},
{
"pagePath":"pages/tmp/index",
"text":"知识点",
"iconPath":"images/anli-off.png",
"selectedIconPath":"images/anli-on.png"
}
]
}
selectediconpath什么意思}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论