微信小程序的制作（1）

做一个最基础入门的小程序：

项目结构：首页和加入的切换，这个再API上可以看到。

 

第一个页面：

 

第二个页面： 

第一个页面的css:

swiper{

width: 100%;

height: 340rpx;

}

swiper image{

display: block;

width: 100%;

height: 100%;

}

 

/* item-list*/

.item-list{

 

}

.pro-item{

overflow: hidden;

padding: 30rpx;

}

.pro-logo{

float: left;

width: 230rpx;

height: 230rpx;

}

.pro-body{

margin-left: 250rpx;

}

.pro-title{

color:#212121;

font-size: 34rpx;

line-height: 1;

}

.pro-desc{

font-size: 28rpx;

color: #9a9a0a;

line-height: 0.5;

}

.pro-foot{

overflow: hidden;

}

.btn-detail{

float: left;

width: 170rpx;

height: 52rpx;

}

.btn-ask{

float: left;

width: 224rpx;

height: 52rpx;

margin-left: 20rpx;

padding: 0；

line-heigh: 1;

}

.btn-ask image{

width: 100%;

height: 100%;

}

第1个页面js

第二个页面css:

/* pages/join.wxss */

page{

background: #f3f3f3;

}

.banner{

display: block;

width: 100%;

height: 340rpx;

}

.block{

background: #fff;

margin-top: 15rpx;

}

.block-title{

position: relative;

font-size: 34rpx;

line-height: 1.5;

color: #2e5e86;

padding: 10rpx 20rpx;

text-indent: 40rpx;

}

.block-title::after{

position: absolute;

left: 20rpx;

top: 10rpx;

content: "";

width: 12rpx;

height: 40rpx;

background: #2e5e86;

}

.block-desc{

display: block;

color: #666;

line-height: 1.6;

font-size: 30rpx;

padding: 0 30rpx 30rpx;

}

第二个页面js: