舒大少博客

手机扫码查看

1. 小程序中组件的分类
   小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
   官方把小程序的组件分为9大类，分别是：
   1. 视图容器、2. 基础内容、3.表单组件、4.导航组件、5.媒体组件、6.map地图组件、7.canvas画布组件、8.开放能力、9.无障碍访问
2. 常用的视图容器类组件
   1. view：普通视图区域、类似于HTML中的div，是一个块级元素，常用来实现页面的布局效果
   2. scroll-view：可滚动的视图区域，常用来实现滚动列表效果
   3. swiper和swiper-item：轮播容器组件和轮播图item组件
3. view 组件的基本使用
   实现flex横向布局效果
   
4. scroll-view 组件的基本使用
   实现纵向滚动效果
   
5. swiper和swiper-item 组件的基本使用
   实现轮播效果
   
6. swiper 组件的常用属性
   
7. 常用的基础内容组件
   1. text：文本组件，类似于HTML中的span标签，是一个行内元素
   2. rich-text：富文本组件，支持把HTML字符串渲染为WXML结构
8. text组件的基本使用
   通过text组件的selectable 属性，实现长按选中文本内容的效果
   <text selectable>123456789</text>
9. rich-text 组件的基本使用
   通过rich-text 组件的nodes属性节点，把HTML字符串渲染为对应的UI结构
   <rich-text node=”<h1 style=’color:red’>标题</h1>”</rich-text>
10. 其他常用组件
    1. button：按钮组件，功能比HTML中的button按钮丰富，通过open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
    2. image：图片组件，image组件默认宽度为300px、高度为240px
    3. navigator：页面导航组件，类似于HTML中的a链接
11. button 按钮的基本使用
    <button>默认按钮</button>
    <button type=”primary”>主色调按钮</button>
    <button type=”warn”>警告按钮</button>

    <button size=”mini”>默认按钮</button>
    <button type=”primary” size=”mini”>主色调按钮</button>
    <button type=”warn” size=”mini”>警告按钮</button>

    <button size=”mini” plain>默认按钮</button>
    <button type=”primary” size=”mini” plain>主色调按钮</button>
    <button type=”warn” size=”mini” plain>警告按钮</button>

12. image组件的基本使用
    <image src=”url”></image>
13. image组件的mode属性
    image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：