小程序是什么?
微信小程序，是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开应用，在微信-发现-小程序可打开应用。
一.小程序的样式编写：
目录结构：
app.json
{
"pages": [
"pages/index/index",
"pages/message/message",
"pages/userCenter/userCenter",
"pages/contact/contact"
],
"window": {
"navigationBarBackgroundColor": "#13d1be",
"navigationBarTextStyle": "black",
"navigationBarTitleText":"本地宝",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"tabBar": {
"selectedColor":"rgb(238, 82, 61)",
"list": [{
"pagePath": "pages/index/index",
"text": "主页",
"iconPath": "tabs/home.png",
"selectedIconPath": "tabs/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "tabs/message.png",
"selectedIconPath": "tabs/message-active.png"
},
{
"pagePath": "pages/userCenter/userCenter",
"text": "我的",
"iconPath": "tabs/profile.png",
"selectedIconPath": "tabs/profile-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "tabs/contact.png",
"selectedIconPath": "tabs/contact-active.png"
}
]
}
}
公共样式：
/*公共的样式 */
/*伪元素边框-不占位置 */
.bd-r,.bd-t{
position: relative;
} .bd-r::after,.bd-t::before{
content: "";
position: absolute;
left:0;
top:0;
width: 100%;
height: 1rpx;
background-color: rgb(239, 239, 239);
} .bd-r::before{
right: 0;
left: auto;
width:1rpx;
height: 100%;
} .h100-block{
height: 10rpx;
background-color: #f0f0f0;
} /*利用flex伸缩盒属性，实现栅格化布局 */
.row{
display: flex;
} .row .col{
flex: 1;
}
主页页面编写：
index.wxml
<!--pages/index/index.wxml-->
<block>
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" indicator-color='#f99' indicator-active-color='#f11' circular='true'>
<swiper-item>
<image src="../../images/banner-01.png" width="375" height="150" />
</swiper-item>
<swiper-item>
<image src="../../images/banner-02.png" width="375" height="150" />
</swiper-item> <swiper-item>
<image src="../../images/banner-01.png" width="375" height="150" />
</swiper-item>
<swiper-item>
<image src="../../images/banner-02.png" width="375" height="150" />
</swiper-item>
</swiper>
</block> <block>
<view class='index-nav'>
<navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-01.png'></image>
<text>美食</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-02.png'></image>
<text class='xizu'>洗浴足疗</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-03.png'></image>
<text class='jiehuntxt'>结婚啦</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-04.png'></image>
<text class='ktvtxt'>KTV</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-05.png'></image>
<text class='findworktext'>找工作</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-06.png'></image>
<text class='fudao'>辅导班</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-07.png'></image>
<text class='qichetext'>汽车保养</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-08.png'></image>
<text>租房</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-09.png'></image>
<text>装修</text>
</view>
</navigator>
</view>
</block>
<view class='h100-block'></view> <view class='index-enter row'> <view class='col'>
<navigator>
<image src='../../images/link-01.png'></image>
</navigator>
</view> <view class='col'>
<navigator>
<image src='../../images/link-02.png'></image>
</navigator>
</view>
</view>
主页样式：index.wxss
/* pages/index/index.wxss */
swiper-item image{
width: 750rpx;
height: 340rpx;
}
.index-nav{
overflow: hidden;
}
.img{
text-align: center;
font-size: 14px;
float: left;
width:33.3%;
height: 198rpx; /* box-sizing: border-box;
border-left: 1rpx solid rgb(239, 239, 239);
border-bottom: 1rpx solid rgb(239, 239, 239); */
}
/*选择第三个元素的倍数，把修饰用的边框隐藏 */
/*nth-of-type：选中类型的的第几个
::before需要配合content:''使用 */
.img:nth-of-type(3n)::before{
background-color: transparent;
} .img image{
width: 90rpx;
height: 90rpx;
display: block;
margin: 40rpx auto 20rpx;
} .img text{
display: block;
} .xizu{
left: 21%!important;
}
.jiehuntxt{
left: 29%!important;
} .findworktext{
left: 29%!important;
}
.fudao{
left: 29%!important;
}
.qichetext{
left: 21%!important;
} .index-enter image{
width: 320rpx;
height: 175rpx;
} .index-enter{
text-align: center;
padding: 10rpx ;
}
