小程序架构模型

176 阅读2分钟

小程序的核心技术

微信小程序的主要技术包括WXML、WXSS、JavaScript+WXS。

  • 页面布局:WXML,类似HTML;
  • 页面样式:WXSS,几乎就是CSS(某些不支持,某些进行了增强,但是基本是一致的) ;
  • 页面脚本:JavaScript+WXS(WeixinScript) ;

学习小程序是比较简单的,核心思想是组件化开发、数据响应式、mustache语法、事件绑定等。

开发小程序我们需要注册账号,申请AppID,下载安装官方提供的开发工具小程序开发工具。

小程序的MVVM架构

Vue的MVVM和小程序MVVM对比:

image.png

image.png

使用MVVM可以将我们从命令式编程转移到声明式编程。使用MVVM为什么这么好用呢?原因有两方面:DOM Listeners和Data Bindings。DOM Listeners:ViewModel层可以将DOM的监听绑定到Model层。Data Bindings: ViewModel层可以将数据的变量, 响应式的反应到View层。

小程序的架构模型

小程序采用了目前称为「双线程模型」的架构。WXML模块和WXSS样式运行于 渲染层,渲染层使用WebView线程渲染(一个程序有多个页面,会使用多个WebView的线程)。JS脚本(app.js/home.js等)运行于 逻辑层,逻辑层使用JsCore运行JS脚本。这两个线程都会经由微信客户端(Native)进行中转交互。

image.png

小程序配置文件

小程序的很多开发需求被规定在了配置文件中。为什么这样做呢?这样做可以更有利于我们的开发效率;并且可以保证开发出来的小程序的某些风格是比较一致的;比如导航栏 – 顶部TabBar,以及页面路由等等。

常见的配置文件:

  • project.config.json:项目配置文件, 比如项目名称、appid等;
  • sitemap.json:小程序搜索相关的;
  • app.json:全局配置;
  • page.json:页面配置;

全局app配置文件

全局配置比较多,可以查看官方文档。

  • pages: 页面路径列表。用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。小程序中所有的页面都是必须在pages中进行注册的。
  • window: 全局的默认窗口展示。用户指定窗口如何展示, 其中还包含了很多其他的属性。
  • tabBar: 顶部tab栏的展示。

页面page配置文件

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。