小程序里的组件也是由宿主环境提供的,可以利用组件快速的实现页面结构。
说明文档:https://developers.weixin.qq.com/miniprogram/dev/component/

常用的组件

1、视图容器组件
view:普通视图区域;类似HTMLdiv,是一个块级元素;
scroll-view:可滚动的视图容器
swiperswiper-item:轮播图组件

  1. <view class="view-box">
  2. <view>A</view>
  3. <view>B</view>
  4. <view>C</view>
  5. </view>
  6. <scroll-view class="scroll-view" scroll-y>
  7. <view>A</view>
  8. <view>B</view>
  9. <view>C</view>
  10. </scroll-view>
  11. <swiper indicator-dots autoplay>
  12. <swiper-item>A</swiper-item>
  13. <swiper-item>B</swiper-item>
  14. <swiper-item>C</swiper-item>
  15. </swiper>

2、基础内容组件
text:文本组件
rich-text:富文本组件,可以吧html字符串渲染为wxml结构

  1. <text user-select>手机号:1111111</text>
  2. <rich-text nodes="<h1>标题h1</h1>"></rich-text>

3、其他组件
button:按钮组件,比html里的button功能丰富
image:图片组件
navigator:页面导航组件,类似a标签

  1. <button type="primary">按钮</button>
  2. <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" show-menu-by-longpress></image>