宿主环境

是指 程序运行必须的依赖环境 ，如 windows 、mac

微信是微信小程序的 宿主环境，可以给小程序提供微信扫码 、微信支付、微信登录 等功能

内容包括

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

通信模型

主体： 渲染层 和 逻辑层

渲染层和逻辑层之间的通信、逻辑层和第三方服务之间的通信都是由微信客户端进行转发

组件

基于组件可以快速搭建出漂亮的页面结构，官方把小程序组件分为了 9 类

• 视图容器

  view ： 普通视图区域、类似 div 块级元素 、用来实现页面布局效果

  scoll-view：可滚动的视图区域、常用来实现滚动列表效果

  swiper和swiper-item ： 轮播图容器组件和轮播图item

• 基础内容

• 表单组件

• 导航组件

• 媒体组件

• map 地图组件

• canvas 画布组件

• 开放能力

• 无障碍访问

view

结构

<view class = "container">
	<view>A</view>
  <view>B</view>
  <view>C</view>
</view>

样式

.container view{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px
}
.container {
  display:flex;
  justify-content:space-around
}

scroll-view

结构

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

样式

.container view{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px
}
.container {
  border: 1px solid red;
  height:120px;
  width:100px;
}

swiper

结构

<swiper class = "container">
	<swiper-item><view>A</view></swiper-item>
  <swiper-item><view>B</view></swiper-item>
  <swiper-item><view>C</view></swiper-item>
</swiper>

样式

.container view{
  height:150%;
  text-align:center;
  line-height:150px
}
.container {
  height:150px;
}

常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示指示点
indicator	color	raba(0,0,0,0.3)	指示点颜色
indicator-active-color	color	#000000	选择指示点颜色
autoplay	boolean	false	自动播放
interval	number	5000	切换间隔时间
circular	boolean	false	是否无缝切换

text

<view>
	手机支持的长安选中效果需要在 text 元素中
  <text>可选中文字</text>
</view>

<rich-text nodes="<h3>可用此元素渲染html元素</h3>"></rich-text>

button

功能比 html 丰富，提供微信的客服、转发、用户授权等

<button>普通按钮</button>
<button type="primary">主色按钮</button>
<button type="warn">警告按钮</button>
// 小尺寸按钮
<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 src='/images/img.png' mode=""></image>

mode属性

model	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来
widthFix	缩放模式，宽度不变，高度自动变化，保持图片纵横比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持图片纵横比不变

navigator

API

• 事件监听 API

  特点：以 on 开头，用来监听某些事件的触发

  举例：wx.onWindowResize(functio callback) 监听窗口尺寸变化的事件

• 同步 API

  特点：以 Sync 结尾的使同步 API ，其执行结果可以通过函数返回值直接获取

  举例：wx.setStorageSync(key,value) 向本地存储中写入内容

• 异步 API

  特点：类似与 Jquery 中的 $.ajax(options) 函数，需要通过 succes、fail、complete

  举例：wx.request() 发起网络数据请求，通过 success 回调数据接收数据

小程序版本

版本阶段	说明
开发版本
体验版本
审核中的版本
线上版本