微信小程序开发之开发框架1

1、理解

小程序的开发和之前常见的H5WEB开发有很大的相似性,因此,熟悉H5WEB开发的开发者对小程序开发应该更容易上手,微信小程序框架是基于MVVM模式打造的,微信团队为小程序提供的框架命名为“MINA应用框架”。

小程序框架原理

微信小程序MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供一整套JavaScript API,让开发者能够非常方便的使用微信客户端提供的各种基础功能与能力,快速地构建一个应用。整个MINA框架包含两大部分:View视图层AppService逻辑层。

  1. View视图层中,wxml是MINA提供的一套类似html标签的语言及一系列基础组件。
  2. 开发者使用wxml文件来搭建页面的基础视图结构,使用wxss文件来控制的展现样式。
  3. AppService逻辑层是MINA的服务中心,由微信客户端启用异步线程单独加载运行。
  4. 页面渲染所需的数据、页面交互处理逻辑都在AppService逻辑层中实现。
    5.MINA框架中的 AppService使用Java Script来编写交互逻辑、网络请求和数据处理,但不能使用Java Script中的DOM操作。
  5. 小程序中的各个页面可以通过AppService实现数据管理、网络通信、应用生命周期管理和页面路由。
  6. MINA框架的核心是一个响应的数据绑定系统。可以让数据与视图非常简单的保持同步。当修改数据的时候,只需在逻辑层修改数据,视图层就会做相应的更新。
  7. MVVM源于经典的Model-View-Controller(MVC)模式。

目录结构

小程序的重要组成部分:包含一个描述整体的app和多个描述各自页面的page。其他还包括一个公用工具类库utils和一个项目IDE配置:project.config.json。

文件构成

一个程序主体部分由三个文件组成,且必须放在项目的根目录。主体文件如下图:
微信小程序开发之开发框架1
一个小程序页面由四个文件组成,如下图:
微信小程序开发之开发框架1
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
其页面设计基本上也遵循了MVC结构进行构建。如:
js:页面逻辑,相当于控制层(C),也包括部分数据(M);
wxml:页面结构展示,相当于视图层(V);
json:页面配置,配置一些页面展示的数据,充当部分的模型(M);
wxss:页面样式表,纯前端,用于辅助wxml展示。