微信小程序开发

一、tabBar:

在app.json中配置

                                  

 

​//app.json文件
  "window": {
    "backgroundTextStyle": "dark",  //页面背景颜色   light和dark
    "navigationBarBackgroundColor": "#FC0119", //导航条背景颜色
    "navigationBarTitleText": "村民助手",
    "navigationBarTextStyle": "black",  //字体颜色  white和dark
    "navigationStyle": "default",
    "backgroundColor": "#C0C0C0",
    "onReachBottomDistance": 60
  },
"tabBar": {
    "color": "#929394",
    "selectedColor": "#5486CD",
    "list": [{
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "/images/wz30.png",
      "selectedIconPath": "/images/wz33.png"
    },
    {
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  },

二、搜索框：

1pt = 1px = 2rpx
id用#号打，class用.打，爹选儿子用大于，选孙子用空格。大view里面嵌套小view，大view里面打id，小view里面打class。

<view id="searchOuterView">
    <view id="searchInnerView">
        <image src="/images/demo01.png"></image>
        <text> 搜索</text>
    </view>
</view>

#searchOuterView {
    width: 750rpx;
    height: 88rpx;
    /* 内边距*/
    padding: 15rpx;
}

#searchInnerView {
    height: 58rpx;
    width: 720rpx;
    /* 内容居中 */
    text-align: center;
    border: 1rpx solid #ECECEE;
    /* 设置边框圆角 */
    border-radius: 8rpx;
    background: #EEEEEE;
    /*设置行高 */
    line-height: 52rpx;
    /* 设置边框包含在宽高之内 */
    box-sizing: border-box;
}

#searchInnerView>image {
    width: 36rpx;
    height: 36rpx;
    /* 设置垂直对齐方式 */
    vertical-align: middle;
}

#searchInnerView>text {
    font-size: 24rpx;
    color: #B2B2B2;
    /* 设置垂直对齐方式 */
    vertical-align: middle;
}

三、轮播图

                         

swiper组件是用来定义滑块视图容器; swiper-item就是每一个滑块;

我们需要展示三张图片,三张图片的轮播,那么也就是说需要三个swiper-item。

block是一个辅助性组件,它不会有任何展示效果; 
wx:for 用来定义for循环            wx:for="数组"
{{表达式}} wxml的插值表达式，从js的data里面引用值；
{{background}},从js的data中获取background对应的值；
在wxml页面中需要使用的数据，我们最好都定义在data中

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{activecolor}}" circular="{{circular}}">
    <block wx:for="{{imgUrls}}" wx:key="*this">
        <swiper-item>
            <image src="{{item }}"></image>
        </swiper-item>
    </block>
</swiper>

Page({
            data: {
                imgUrls: ['/images/demo02.jpg', '/images/demo03.jpg', '/images/demo04.jpg', '/images/demo05.jpg', '/images/demo06.jpg'],
                indicatorDots: true,
                vertical: false,
                autoplay: true,
                interval: 3500,
                duration: 500,
                activecolor: "red"
            },

swiper {
    height: 400rpx;
}

swiper image {
    width: 750rpx;
    height: 400rpx;
}

 四、导航菜单

案例1

<view id="navView">
    <view class="navItemView">
        <image src="/images/wz3.jpg"></image>
        <text>签到</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz4.jpg"></image>
        <text>请假</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz5.jpg"></image>
        <text>问卷</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz6.jpg"></image>
        <text>通知</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz7.jpg"></image>
        <text>离校报备</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz8.jpg"></image>
        <text>返校申请</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz9.jpg"></image>
        <text>健康打卡</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz10.jpg"></image>
        <text>我的课程</text>
    </view>
    <view class="navItemView">
        <image src="/images/wz11.png"></image>
        <text>毕业离校</text>
    </view>
</view>

/* 导航栏样式 */
#navView {
    /*应用flex布局*/
    display: flex;
    /* 设置换行显示 */
    flex-wrap: wrap;
    height: 790rpx;
    /* 多轴线的垂直排列方式 */
    align-content: space-around;
    /* 字体加粗 */
    font-weight: bold;
    background: #fff;
}

.navItemView {
    width: 150rpx;
    text-align: center;
    /* 设置左右外边距 */
    margin: 25rpx 50rpx;
}

.navItemView>image {
    width: 150rpx;
    height: 150rpx;
}

案例2：

图片文字对齐，水平垂直对齐。让容器的行高等于图片即可，最常用line-height、文字和图片设置vertical-align: middle；使用绝对定位，绝对定位是相对于父元素进行定位，前提父元素必须具有定位属性。

<!-- 在线客服 -->
<view id="onlineView">
    <image src="/images/wz6.jpg"></image>
    <text> 24小时温馨咨询</text>
    <!-- 右箭头实现 -->
    <view class="arrow"></view>
</view>

/* 在线客服样式 */
#onlineView {
    background: #fff;
    /* 设置上下外边距 */
    margin: 24rpx 0;
    /* 设置左右内边距 */
    padding: 0 30rpx;
    line-height: 83rpx;
    /* 定位属性：相对定位 */
    position: relative;
}
#onlineView>image {
    width: 60rpx;
    height: 60rpx;
    vertical-align: middle;
}
#onlineView>text {
    vertical-align: middle;
}
/* 右箭头的实现原理: 一个正方形,定义上/右边框,旋转45度 */
.arrow {
    width: 16rpx;
    height: 16rpx;
    border-top: 4rpx solid #999;
    border-right: 4rpx solid #999;
    /* 旋转45度 */
    transform: rotate(45deg);
    /* 调整位置:绝对定位 */
    position: absolute;
    right: 30rpx;
    top: 38rpx;
}