小程序宿主环境

宿主环境就是软件运行所必须的依赖环境，微信小程序的宿主环境就是微信

通信模型

  • 渲染层

wxml 文件和 wxss 文件就是工作在渲染层

  • 逻辑层

js j脚本就是运行在逻辑层

运行机制

启动过程

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

渲染过程

  1. 加载解析页面的 json 配置文件
  2. 加载页面的 wxml 文件和 wxss 文件
  3. 解析页面的 js 脚本文件，调用 Page() 创建页面实例
  4. 页面渲染完成

组件

小程序的组件也是由宿主环境所提供

微信小程序组件官方文档

容器组件

  • view
    • 普通的视图区域
    • 类似于 HTML 中的 div 容器，是一个块级容器
    • 常用来实现页面的布局效果
1
<view class="container"></view>
  • scroll-view
    • 可滚动的视图区域
    • 常用来实现滚动列表的效果
1
<scroll-view class="container" scroll-y></scroll-view>
  • swiper & swiper-item
    • 轮播图组件和轮播图内容组件
1
2
3
4
5
<swiper class="swiper-container">
 <swiper-item>
   <view>A</view>
 </swiper-item>
</swiper>

基础内容

  • text

普通文本标签，和 HTML 中的 span 标签类似

1
<text>普通文本</text>
  • rich-text

可设置 HTML 文本

1
<rich-text nodes="<h1></h1>">HTML文本</rich-text>
  • icon

图标

1
<icon type="info">图标</icon>
  • progress

进度条

1
<progress percent="20"/>

表单组件

导航组件

媒体组件

map 地图组件

canvas 画布组件

开放能力

无障碍访问

API

事件监听API

事件监听API 都是以 on 开头

同步API

异步API 都是以 Sync 结尾
同步API 的执行结果，可以通过函数返回值进行接收，如果执行报错就会抛出异常

异步API

需要通过 success、fail、complete 接收调用的结果