25-36
目录
宿主环境
是指的是程序运行所必须的依赖环境
Android系统和iOS系统是两个不同的宿主环境。脱离了宿主环境的软件是没有任何意义的!
手机微信是小程序的宿主环境
借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码、微信支付、微信登陆、地理定位、etc…
宿主环境包含的内容
通信模型
运行机制
组件
API
通信模型
通信的主体是渲染层和逻辑层
① WXML模板和WXSS样式工作在渲染层
② JS脚本工作在逻辑层
小程序中的通信模型分为两部分
① 渲染层和逻辑层之间的通信
由微信客户端进行转发
② 逻辑层和第三方服务器之间的通信
由微信客户端进行转发
运行机制
1.启动过程
① 把小程序的代码包下载到本地
② 解析app.json全局配置文件
③ 执行局app.js小程序入口文件,调用App()创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成
2.页面渲染的过程
① 加载解析页面的.json配置文件
② 加载页面的.wxml 模板和.wxss样式
③ 执行页面的.js 文件,调用Page()创建页面实例
④页面渲染完成
组件
九大类
一、 视图容器
常见的
①view
普通视图区域
类似于HTML 中的 div,是一个块级元素
常用来实现页面的布局效果
使用
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
.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: lightskyblue;
}
.container1 view:nth-child(3){
background-color: lightcoral;
}
.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>
.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: lightskyblue;
}
.container1 view:nth-child(3){
background-color: lightcoral;
}
/*.container1 {
display: flex;
justify-content: space-around;
}*/
.container1 {
border: 1px solid red;
width :100px;
height:120px;
}
③ swiper 和 swiper-item轮播
属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color rgba(0,0,0,3) 指示点颜色
indicator-active-color color #000000 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动
轮播图容器组件和轮播图 item 组件
<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots>
<!--第一页-->
<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: 150%;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
background-color: lightcoral;
}
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
二、基础内容
①text长按选中
文本组件
类似于HTML中的span标签,是一个行内元素
<view>
手机号支持长按选中效果
<text selectable>13800005056</text>
</view>
②rich-text 标题
富文本组件
支持把HTML字符串渲染为WXML结构
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
三、表单组件
四、导航组件
⑤ 媒体组件
⑥ map 地图组件
⑦ canvas 画布组件
⑧ 开放能力
⑨ 无障碍访问
十、其他常用组件
①button按钮
按钮组件
功能比HTML中的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照片
图片组件
image组件默认宽度约300px、高度约240px
<image src="/image/8637823.jpg" mode="heightFix"></image>
③navigator(后期讲)
页面导航组件
类似于HTML中的a链接
API
方便的调用微信提供的能力
例如:获取用户信息、本地存储、支付功能等。
三大类
①事件监听API
特点:以on开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
②同步 API
特点1:以Sync结尾的API都是同步API
特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync('key','value')向本地存储中写入内容
③异步API
特点:类似于jQuery中的$.ajax(options)函数,需要通过success、fall、complete接收调用的结果
举例:wx.request()发起网络数据请求,通过success回调函数接收数据