微信小程序框架【逻辑层和视图层】介绍

原创

已于 2023-11-10 11:49:11 修改 · 1.7k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-10-16 21:29:01 首次发布

本文介绍了微信小程序的开发框架，包括逻辑层AppService的页面路由和生命周期管理，以及视图层View的WXML、数据绑定、列表渲染、条件渲染和事件系统。

一. 框架介绍

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到框架中，其他的一切复杂的操作都交由框架处理。
框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。
框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的例子来看看 WXML 具有什么能力：

<!--pages/a/a.wxml-->
<text>a页面</text>
<view> {
  
  {message}} </view>

// pages/a/a.js
Page({
  data: {
    message: '派大星你好，我是海绵宝宝🙂🙂'
  }
})

<!--pages/a/a.wxml-->
<text>a页面</text>
<view wx:for="{
  
  {array}}"> {
  
  {item}} </view>

// pages/a/a.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

<!--pages/a/a.wxml-->
<text>a页面</text>

<view wx:if="{
  
  {view == '1'}}"> WEBVIEW </view>
<view wx:elif="{
  
  {view == '2'}}">