宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:
Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
小程序的宿主环境
手机微信是小程序的宿主环境,如图所示:
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码,微信支付,微信登录,地里定位,etc等。
小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件
- API
通信主体
小程序中通信的主体是渲染层和逻辑层,其中:
- WXML模板和WXSS样式工作在渲染层
- JS脚本工作在逻辑层
小程序的通信模型
小程序的通信模型分为两部分
渲染层和逻辑层之间的通信
- 由微信客户端进行转发
逻辑层和第三方服务器之间的通信
- 由微信客户端进行转发
小程序启动的过程
- 把小程序的代码包下载到本地
- 解析
app.json
全局配置文件 - 执行
app.js
小程序入口文件,调用App()
创建小程序实例 - 渲染小程序首页
- 小程序启动完成
页面渲染的过程
- 加载解析页面的
.json
配置文件 - 加载页面的
.wxml
模板和.wxss
样式 - 执行页面的
.js
文件,调用Page()
创建页面实例 - 页面渲染完成
小程序中的组件
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构,官方把小程序的组件分为了9大类,分别是:
视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问。
常用的视图容器类组件
view
- 普通视图区域
- 类似于HTML中的div,是一个块级元素
- 常用来实现页面的布局效果
scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
swiper 和 swiper-item
- 轮播图容器组件 和 轮播图item组件
view组件的基本使用
scroll-view组件的基本使用
swiper和swiper-item基本用法
<!-- 轮播图的结构 -->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray">
<!-- 第一个轮播图 -->
<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>
/* 轮播图样式 */
.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;
}
swiper组件的常用属性
常用的基础内容组件
text:文本组件,类似于HTML中的span标签,是一个行内元素。
通过text
组件的selecttable
属性,实现长按选中文本内容的效果:
<view class="textsj">
手机号(长按选中):
<text selectable>18888888888</text>
</view>
rich-text:富文本组件,支持把HTML字符串渲染为WXML结构。
通过rich-text
组件的nodes
属性节点,把HTML字符串渲染为对应的UI结构:
其它常用组件
button:
- 按钮组件
- 功能比HTML中的
button
按钮丰富 - 通过
open-type
属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image:
- 图片组件
- image组件默认宽度约为300px、高度约为240px
image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode
属性如下:
navigator:
- 页面导航组件
- 类似于HTML中的
a
链接
小程序API
官方把API分为如下3大类:
事件监听API
- 特点:以
on
开头,用来监听某些事件的触发 - 举例:
wx.onWindowResize(function callback)
监听窗口尺寸变化的事件
同步API
- 特点1:以
Sync
结尾的API都是同步API - 特点2:同步API的执行结构,可以通过函数返回值直接获取,如果执行出错会抛出异常
- 举例:
wx.setStorageSync('key','value')
向本地存储中写入内容
异步API
- 类似于
Jquery
中的$.ajax(options)
函数,需要通过success
、fail
、complete
接收调用的结果 - 举例:
wx.request()
发起网络数据请求,通过success
回调函数接收数据