微信小程序开发框架

第59篇

极客时间《9小时搞定微信小程序开发》第三课：开发框架。

基本构成

WXML：WeiXin Markup Language，构建页面内容
WXSS：WeiXin Style Sheets，用于描述页面样式
WXS：WXML能力增强的脚本语言，快速构建页面内容结构
JavaScript ：交互逻辑、数据通信

WXML

语法：标签闭合、属性名称大小写敏感

4种语言特性

• 1、数据绑定
  {{变量名/属性/运算符}}

  
  变量
  属性
  运算符

共同属性：id、class、style、hidden、data-*、bind*/catch*

共同属性

• 2、列表渲染

  
  列表渲染

• 3、条件渲染

  
  条件渲染

• 4、模板引用

模板引用

文件引用：import

import 作用域

文件引用：include

include

WXSS：CSS修改和补充后的适用于微信小程序的样式语言

wxss

• 尺寸单位rpx：响应式的像素

  
  像素

ppi

• 样式导入

  
  执行顺序
  外联样式

• 内联样式

  
  内联样式

• 选择器

  
  选择器

权重

JavaScript

轻量的 、解释型的、面向对象的头等函数语言
动态的基于原型和多范式的脚本语言
支持面向对象、命令式和函数式的编程风格
与Java语言完全不同，就像雷锋和雷峰塔的区别。

Nodejs
小程序javascript
浏览器JavaScript 小程序脚本运行环境差异

WXS：WeiXin Script，是对JS脚本语言上层的封装和限制，方便运算处理

wxs

模块：对外不可见，exports暴露，require引入其他模块。

模块

注释：单行注释、多行注释、结尾注释

注释 运算符

语句：与JS基本一致，不支持try-catch语句
数据类型：8种number、string、boolean、object、array、function、date、regexp。后两种通过get使用，不能使用new

数据类型 基础类库

---

MINA框架详解

View视图层、App Service逻辑层、Native系统层
视图层和逻辑层独立线程运行，通过JSBridge实现通信。

MINA框架

小程序运行机制

启动

启动分冷启动和热启动两种，冷启动是首次打开和微信主动销毁再次打开时；
热启动是已经打开过之后一定时间内再次打开。
主动销毁：超过5分钟或5s内多次告警
冷启动遇到更新时会异步加载，下次打开才能应用。

加载

加载

生命周期

程序生命周期

appservice

页面生命周期

view

示例

生命周期

页面路由

页面路由全部由框架来管理，共有6种路由方式：

路由方式

路由触发时机

触发时机 tab切换对应生命周期

小程序事件流

通过事件实现视图层和逻辑层进行通讯。

事件 事件模型
事件清单

微信小程序开发文档

https://developers.weixin.qq.com/miniprogram/dev/index.html

小程序示例

小程序示例