class02：小程序通信与运行机制

一、MVVM结构

注意：若要在微信开发者工具中运行其他作者的代码，需检查project.config.json文件中appID是否为自己的appID，否则将不能运行。

1.MVVM结构：
M - Model：模型层（数据层）
V - VIew：视图层（页面基本结构）
VM - ViewModel：控制层
数据定义在JS中，当数据发生改变时，数据存在双向绑定。当修改模型层的数据时，模型层会“通知”控制层“，控制层”通知“视图层”从而修改数据。同理，当视图层的数据被修改时，视图层先通知控制层，由控制层通知模型层，然后将数据修改成与视图层保持一致。实现双方同步更新。

二、小程序的通信

1.小程序运行环境分为逻辑层和视图层。逻辑层采用JSCore线程运行JS，视图层包括WXML、WXSS等。
逻辑层：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/
视图层：https://developers.weixin.qq.com/miniprogram/dev/framework/view/

2.数据通信过程：通过微信客户端和第三方服务器作为中间站进行数据交流。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图所示。
链接: https://developers.weixin.qq.com/ebook?action=get_post_info&volumn=1&lang=zh_CN&book=miniprogram&docid=0000286f908988db00866b85f5640a

三、小程序的运行机制

1.启动流程

(1).微信客户端在打开小程序之前，会把整个小程序的代码下载到本地；
(2).解析json；
(3).解析Js，创建实例；
(4).渲染首页，调用回调onLaunch。

注：整个小程序只有一个APP实例，是全部页面共享的。更多的事件回调参考文档链接: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

2.页面渲染流程

(1).找到页面json文件，获取配置；
(2).读取wxml、wxss文件；
(3).读取JS文件的page创建页面实例；
(4).当前页面全部渲染完后，自动调用回调onLoad。

小程序组件：https://developers.weixin.qq.com/miniprogram/dev/component/
小程序API：https://developers.weixin.qq.com/miniprogram/dev/api/

四、小程序组件

在线文档：https://developers.weixin.qq.com/miniprogram/dev/component/
代码demo：

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>
<text>{{name}}</text>

json
wxml
wxss
js

<map></map>
<!-- <view class="cover">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view> -->

<!-- 滚动视图区域 -->
<scroll-view class="cover" scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

<!-- 轮播 -->
<swiper class="swiper-wrap" indicator-dots indicator-color="#fff" autoplay interval="1000" circular vertical>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
  <swiper-item>3</swiper-item>
</swiper>

<view>
  <text user-select space="ensp">110   11011110</text>
</view>
<view>
  <text user-select space="emsp">110   1101110</text>
</view>
<view>
  <text user_select space="nbsp">110   1101110</text>
</view>

<rich-text nodes="<h2>各部门注意！</h2>">马上要下班了</rich-text>   // 会覆盖后面的文字
<icon type="success" size="30"></icon>
<progress percent="80" show-info></progress>

<button>普通按钮</button>
<button type="primary">氪金的按钮</button>
<button type="warn">警告的按钮</button>

注意ensp、emsp、nbsp的区别。