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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laker 23

要秃啦,支持一下嘛~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值