微信小程序宿主环境概念宿主环境（host environment）指的是程序运行所必须的依赖环境。例如： Androi

概念

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

手机微信是小程序的宿主环境

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc...

启动过程
- 把小程序的代码包下载到本地
- 解析app.json全局配置文件
- 执行app.js小程序入口文件，调用App（）创建小程序实例
- 渲染小程序首页
- 小程序启动完成
页面渲染过程
- 加载解析页面的.json配置文件
- 加载页面的.wxml模板和.wxss样式
- 执行页面的.js文件，调用Page（）创建页面实例
- 页面渲染完成

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

视图容器

scroll-view

使用

// scroll-y 允许纵向滚动
// scroll-x 允许横向滚动
// scrpll-view 需要固定高度 
<scroll-view scroll-y>
    <view> A <view>
    <view> A <view>
</scroll-view>

swiper 和 swiper-item

使用

<swiper indicator-dots>
    <swiper-item>
        <view>aaa</view>
    </swiper-item>
</swiper>

常用属性

基础内容

text

使用

通过text组件的selectable属性，实现长按选中文本内容的效果
<text selecttable>ssss</text>

rich-text

使用

通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的Ul结构
<rich-text nodes="<h1>aaaa</h1>"></rich-text>

表单组件

image

使用

<image src='sss' mode='scaleToFill'><image>

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

mode值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
asperctFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变