小程序业务架构 小程序运营团队架构

目录

• 一、MVVM结构
• 二、小程序的通信
• 三、小程序的运行机制

• 1.启动流程
• 2.页面渲染流程

• 四、小程序组件

一、MVVM结构

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

1.MVVM结构：

M - Model：模型层（数据层）
V - VIew：视图层（页面基本结构）
VM - ViewModel：控制层

数据定义在JS中，当数据发生改变时，数据存在双向绑定。当修改模型层的数据时，模型层会“通知”控制层“，控制层”通知“视图层”从而修改数据。同理，当视图层的数据被修改时，视图层先通知控制层，由控制层通知模型层，然后将数据修改成与视图层保持一致。实现双方同步更新。

二、小程序的通信

1.小程序运行环境分为逻辑层和视图层。逻辑层采用JSCore线程运行JS，视图层包括WXML、WXSS等。

2.数据通信过程：通过微信客户端和第三方服务器作为中间站进行数据交流。

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图所示。

三、小程序的运行机制

1.启动流程

(1).微信客户端在打开小程序之前，会把整个小程序的代码下载到本地；

(2).解析json；

(3).解析Js，创建实例；

(4).渲染首页，调用回调onLaunch。

2.页面渲染流程

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

四、小程序组件

代码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的区别。