微信小程序宿主环境及其五个基础组件使用

微信小程序五个基础组件使用

宿主环境

宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：
Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

手机微信是小程序的宿主环境，如图所示

包括了以下的内容

• 通信模型
• 运行机制
• 组件
• API

1. 通信的主体
   程序中通信的主体是渲染层和逻辑层，其中：
   WXML 模板和 WXSS 样式工作在渲染层
   JS 脚本工作在逻辑层

小程序的启动过程

1. 把小程序的代码包下载到本地
2. 解析 app.json 全局配置文件
3. 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

组件信息

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：

• 视图容器
• 基础内容
• 表单组件
• 导航组件
• 媒体组件
• map 地图组件
• canvas 画布组件
• 开放能力
• 无障碍访问

view
普通视图区域
类似于 HTML 中的 div，是一个块级元素
常用来实现页面的布局效果
scroll-view
可滚动的视图区域
常用来实现滚动列表效果
swiper 和 swiper-item
轮播图容器组件 和 轮播图 item 组件

view组件的使用

<!--view组件的使用-->
<view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

/* pages/list/list.wxss */

.container1 view {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

.container1 view:nth-child(1) {
	background-color: lightgreen;
}

.container1 view:nth-child(2){
	background-color: lightblue;
}

.container1 view:nth-child(3){
	background-color: lightpink;
}

.container1{
	display: flex;
	justify-content: space-around;
}

scroll-view 组件的基本使用

<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

/* pages/list/list.wxss */

.container1 view {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

.container1 view:nth-child(1) {
	background-color: lightgreen;
}

.container1 view:nth-child(2){
	background-color: lightblue;
}

.container1 view:nth-child(3){
	background-color: lightpink;
}

.container1{
	border:1px solid red;
	width: 100px;
	height: 120px;
}

swiper 和 swiper-item 组件的基本使用

<!--swiper-->
<swiper class="swiper-container">
    <!--轮播图1-->
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <!--轮播图2-->
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
    <!--轮播图3-->
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>
</swiper>

.swiper-container{
	height: 150px;
}

.item{
	height: 100%;
	line-height: 150px;
	text-align: center;
}

swiper-item:nth-child(1) .item{
	background-color:lightgreen;
}
swiper-item:nth-child(2) .item{
	background-color:lightblue;
}
swiper-item:nth-child(3) .item{
	background-color:lightpink;
}

wiper 组件的常用属性

常用的基础内容组件

text

文本组件
类似于 HTML 中的 span 标签，是一个行内元素

rich-text

富文本组件
支持把 HTML 字符串渲染为 WXML 结构

<view>
    手机号长按选中
    <text selectable>15106903637</text>
</view>

<!--通过nodes属性渲染html为xml-->
<rich-text nodes="<h1 style='color:red;'>标题</h1>">

</rich-text>

ich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：

其他常用组件

其它常用组件
button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
image
图片组件
image 组件默认宽度约 300px、高度约 240px

<!-- 按钮组件基本使用 -->
<!-- 通过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 plain="">普通按钮</button>
<button type="primary" plain>主色调</button>
<button type=warn" plain="true">警告</button>

<!-- image组件的基本属性 -->
<image></image>
<image src="/images/8.jpg" mode="aspectFill"></image>

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：

添加项目成员和体验成员