uniapp入门

一、在HbuilderX中新建uniapp项目

其目录结构如下：

二、配置底部tabBar

在pages.json中，添加“tabBar”属性

其中的页面和图标路径配置如下：

效果图如下：点击可切换

三、swiper轮播组件

比如实现这个效果，只需要引用swiper组件即可，如下

		<swiper class="swiper" circular indicator-dots>
			<swiper-item>
				<view class="swiper-item uni-bg-red"><image src="../../static/swiper/lunbo1-min.jpg"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green"><image src="../../static/swiper/lunbo2-min.jpg"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue"><image src="../../static/swiper/lunbo3-min.jpg"></image></view>
			</swiper-item>
		</swiper>

其样式如下
 

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