2021-09-15

通过微信开发程序进行小程序开发，从学习写底部导航开始。
{
“pages”: [
“pages/car/car”,
“pages/home/home”,
“pages/shangpin/shangpin”,
“pages/wode/wode”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “Weixin”,
“navigationBarTextStyle”: “black”
},
“tabBar”: {
“list”: [
{
“pagePath”: “pages/home/home”,
“text”: “首页”,
“iconPath”: “img/home (3).png”,
“selectedIconPath”: “img/home (2).png”
},{
“pagePath”: “pages/car/car”,
“text”: “购物”,
“iconPath”: “img/购物车空.png”,
“selectedIconPath”: “img/购物车空 (1).png”
},{
“pagePath”: “pages/shangpin/shangpin”,
“text”: “商品”,
“iconPath”: “img/商品.png”,
“selectedIconPath”: “img/商品 (1).png”
},{
“pagePath”: “pages/wode/wode”,
“text”: “我的”,
“iconPath”: “img/我 的.png”,
“selectedIconPath”: “img/我 的 (1).png”
}
]

},
“style”: “v2”,
“sitemapLocation”: “sitemap.json”
}
学习了轮播图的组件swiper














还写了导航栏部分与商品栏部分并且学习了页面布局的代码displa：flex;flexcontext:flex-strat;flex-wrap;wrap;



风景



风景



风景



风景



风景



风景



风景



风景





夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分

520元
1024元


京东自营
12万＋评价




夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分

520元
1024元


京东自营
12万＋评价




夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分

520元
1024元


京东自营
12万＋评价




夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分夜景美丽 不及你万分

520元
1024元


京东自营
12万＋评价


上面是首页部分下面是首页部分的样式
.dingbu{
color: black;
background-color: bisque;
width: 750rpx;
height: 60rpx;
margin: 0 auto;
text-align: center;
line-height: 60rpx;
font-size: 30rpx;
position: fixed;
z-index: 2;
}
.search{
width: 750rpx;
height: 60rpx;
position: fixed;
top: 60rpx;
z-index: 2;
background-color: gray;
opacity: 0.4;
}
swiper{
height: 520rpx;
}
swiper>swiper-item>image{
width: 750rpx;
height: 520rpx;
}
.navbar{
width: 750rpx;
height: 420rpx;
background-color: gray;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.navbtn{
background-color: lightcyan;
height: 200rpx;
width: 179rpx;
margin: 5rpx 5rpx;
border-radius: 5% 5%;
}
.navbar>.navbtn>image{
width: 179rpx;
height: 180rpx;
border-radius: 5% 5%;
}
.title{
width: 179rpx;
height: 20rpx;
margin-top: -8rpx;
font-size: 20rpx;
line-height: 20rpx;
text-align: center;
border-radius: 10% 10%;
}
.goodsbox{
width: 750rpx;
height: 950rpx;
background-color: lightgreen;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.goods{
width: 366rpx;
height: 475rpx;
background-color: white;
margin: 5rpx 5rpx;
}
.goods>image{
width: 366rpx;
height: 320rpx;
}
.imgtitle{
font-size: 18rpx;
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.wordone{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.word{
color: red;
font-size: 32rpx;
font-weight: 900;
}
.wordnei{
margin-left: 20rpx;
font-size: 24rpx;
line-height: 50rpx;
text-decoration: line-through;
color: gray;
}
.jingdong{
width: 366rpx;
height: 30rpx;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.jingdongone{
font-size: 26rpx;
width: 150rpx;
height: 35rpx;
margin-left: 5rpx;
background-color: red;
text-align: center;
line-height: 35rpx;
border-radius: 10% 10%;
color: white;
}
.pingjia{
font-size: 26rpx;
color: gray;
line-height: 26rpx;
margin-left: 5rpx;
}

后面还学习了搜索栏




下面是样式
.search{
width: 735rpx;
height: 60rpx;
border: 5rpx solid black;
border-radius: 6% 6%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 1rpx 5rpx;
}
.searchimg{
height: 60rpx;
width: 60rpx;
margin-right: 0rpx;
}
.searchinput{
width: 670rpx;
height: 60rpx;
}
还写了对话框scroll-view组件



你好



盈盈月光，我掬一杯最清的；落落余辉，我拥一缕最暖的；灼灼红叶，我拾一片最热的；萋萋芳草，我摘一束最灿的；漫漫人生，我要采撷世间最重的——毅力。


你好



盈盈月光，我掬一杯最清的；落落余辉，我拥一缕最暖的；灼灼红叶，我拾一片最热的；萋萋芳草，我摘一束最灿的；漫漫人生，我要采撷世间最重的——毅力。



.context{
width: 750rpx;
height: 1060rpx;
background-color: gray;
}
.left{
width: 750rpx;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
margin: 20rpx 0rpx;
}
.tuoxiang{
width: 60rpx;
height: 60rpx;
border-radius: 50% 50%;
}
.text{
background-color:lightskyblue;
border-radius: 5% 5%;
font-size: 30rpx;
line-height: 60rpx;
padding: 5rpx;
min-width: 200rpx;
max-width: 600rpx;
}
.right{
width: 750rpx;
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
margin: 20rpx 0rpx;

}

感悟：通过今天的学习使我学到了更加新颖的内容，提高了我对静态网页的书写能力，还学会了新的细节内容，学会了使用轮播图组件swiper,还学会了写对话框，并在之前学习网页的知识基础上更加熟悉的运用代码书写。学会了新的页面布局，还书写了搜索栏。