微信小程序宿主环境组件

目录

一.轮播图

二.文本组件

三. 按钮组件

四.图片组件

五.API

---

前言

介绍一些微信小程序宿主环境组件。

---

一.轮播图

<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="grey" autoplay interval="3000" circular>
<!-- 第一个轮播图 -->

<swiper-item>

<view class="item">A</view>

</swiper-item>

<!-- 第二个轮播图 -->

<swiper-item>

  <view class="item">B</view>

</swiper-item>

<!-- 第三个轮播图 -->

<swiper-item>

  <view class="item">C</view>

</swiper-item>

</swiper>

效果图

二.文本组件

<!-- text&rich-text的使用：文本组件 -->
<view>
手机支持长按保存
<text selectable>12890005101</text>
</view>
<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

效果图

三. 按钮组件

<!-- button:按钮组件（通过open-type属性调用微信各种功能）-->
<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size=“mini” 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

效果图

四.图片组件

image组件的mode属性

<!-- image:图片组件（默认宽300px，高240px） -->
<image></image>
<image src="/pages/images/01.jpg"></image>

 效果图

<!-- image:图片组件（默认宽300px，高240px） -->
<image></image>
<image src="/pages/images/01.jpg" mode="aspectFit"></image>

 效果图

<!-- image:图片组件（默认宽300px，高240px） -->
<image></image>
<image src="/pages/images/01.jpg" mode="aspectFill"></image>

效果图

<!-- image:图片组件（默认宽300px，高240px） -->
<image></image>
<image src="/pages/images/01.jpg" mode="widthFix"></image>

效果图

<!-- image:图片组件（默认宽300px，高240px） -->
<image></image>
<image src="/pages/images/01.jpg" mode="heightFix"></image>

效果图

五.API

小程序官方把API分为了如下3大类:

1.事件监听API
 ●特点:以on开头，用来监听某些事件的触发
   举例: wx.onWindowResize(function callback)监听窗口尺寸变化的事件

2.同步API
 特点1:以 Sync结尾的API都是同步API
 特点2:同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常举   例:wx.setStorageSync('key' , "value")向本地存储中写入内容

3.异步API
特点:类似于jQuery 中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果举例: wx.request()发起网络数据请求，通过success回调函数接收数据

---

总结

本文简述了小程序宿主环境的组件内容