初识uniapp——走进小程序的大门

正文

UniApp，作为一款支持跨平台开发的框架，为开发者提供了更为便捷的多端开发体验。本文将带你迈出UniApp的第一步，介绍其中常用的组件View、Image、ScrollView、Swiper以及tabBar底部导航栏。通过这些基础组件，让你轻松驾驭UniApp的开发之路。编译器用的是HBuilderX

1. 视图容器 - View

在UniApp中，View是最基础也是最常用的容器组件。它类似于HTML中的div，用于包裹其他组件，并控制它们的布局和样式。

xml 复制代码

<template>
  <view class="container">
    <text>Hello, UniApp!</text>    // text相当于span，都是行内元素
  </view>
</template>

<style>
.container {
  text-align: center;
  padding: 20rpx;
}
</style>

2. 图片 - Image

在uniapp中显示图片不是img，而是image，image组件用于显示图片，支持本地图片和网络图片。mode属性是图片的裁剪和缩放模式，具体看文档uni-app官网

xml 复制代码

<template>
  <view>
    <image src="/static/logo.png" mode="aspectFit"></image>
  </view>
</template>

3. 滚动视图 - ScrollView

ScrollView组件用于实现可滚动的视图区域，适用于展示较长的内容。

sql 复制代码

<scroll-view scroll-x scroll-left='120'>		
    <view class="group">
	<view class="item">111</view>
	<view class="item">111</view>
	<view class="item">111</view>
    </view>
</scroll-view>

4. 轮播图 - Swiper

Swiper组件用于实现轮播图效果，支持自动播放和手动切换。swiper必须搭配swiper-item一起使用。autoplay 是自动切换 interval 设置切换时间 circular 是播放完后回到开头 indicator-dots 显示指示点 indicator-active-color 当前选中指示点的颜色

xml 复制代码

<swiper autoplay interval=2000 circular indicator-dots indicator-active-color=white>  
    <swiper-item class="item">	
        <image src="/static/banner1.jpg" mode="" aspectFill></image>
    </swiper-item>
    <swiper-item class="item">	
	<image src="/static/banner2.jpg" mode="" aspectFill></image>
    </swiper-item>
    <swiper-item class="item">	
        <image src="/static/banner3.jpg" mode="" aspectFill></image>
    </swiper-item>
</swiper>

5. 底部导航栏 - TabBar

TabBar用于创建底部导航栏，方便用户在不同页面间进行切换。要去项目里的pages.json文件里配置 color是文字的颜色，selectedColor是点击后的颜色，list里配置路由信息

结语

通过学习这些基础组件，你已经迈出了UniApp的第一步。在后续的学习中，你将掌握更多高级组件和技巧，为多端开发提供更强大的工具。UniApp，助你轻松驾驭全平台开发的未来。