1. 逻辑层
1.1 注册小程序
- 注册小程序示例
每个小程序都需要在app.js
中调用 App 方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。 - 获取全局唯一的 App 示例
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数。
1.2 注册页面
- 注册页面示例
对于小程序中的每个页面,都需要在页面对应的js
文件中调用 Page 方法注册页面示例,指定页面的初始数据、生命周期回调、事件处理函数等。 - 拓展
除了Page
,作为高级用法,页面可以像自定义组件一样使用 Component 来创建,这样就可以使用自定义组件的特性,如behaviors
等。
1.3 页面生命周期
1.4 页面路由
说明:在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了当前的所有页面。
(1) 路由方式
说明:
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的onLoad中获取。
(2) 发生路由切换时对应的页面栈的表现
(3) 获取当前页面栈
开发者可以使用 getCurrentPages 函数获取当前页面栈。
1.5 模块化
- 公共代码模块化
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。在需要使用这些模块的文件中,使用 require 将公共代码引入。 - 文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。通过全局函数 getApp 可以获取全局的应用实例,如果需要全局的数据可以在 App 中设置。
1.6 API
说明:小程序开发框架提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。通常,在小程序 API 有以下几种类型:
- 事件监听 API:以 on 开头的 API 用来监听某个事件是否触发
- 同步 API:以 Sync 结尾的 API 都是同步 API
- 异步 API:大多数 API 都是异步 API,如 wx.request,wx.login 等
备注1:异步 API 接口通常都接受一个 Object 类型的参数
备注2:success,fail,complete 函数调用时会传入一个 Object 类型参数
2. 视图层
2.1 WXML
说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。WXML 具有什么能力如下:
2.2 WXSS
说明:WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性,同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改,WXSS 扩展的特性有:
(1)新增了尺寸单位 rpx:rpx可以根据屏幕宽度进行自适应
(2)提供了全局的样式和局部样式
(3)仅支持部分 CSS 选择器
(4)样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
(5)内联样式:框架组件上支持使用 style、class 属性来控制组件的样式
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名
不需要带上.
,样式类名之间用空格
分隔。
WXSS补充说明参考
:微信小程序开发(微信小程序与普通网页开发的区别和联系)中的第2.3节WXSS 样式。
2.3 WXS
说明:WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
2.4 基础组件
说明:框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
(1) 组件介绍
- 组件是视图层的基本组成单元。
- 组件自带一些功能与微信风格一致的样式。
- 一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内。
注意
:所有组件与属性都是小写
,以连字符-
连接
(2) 属性类型
(3) 公共属性:所有组件都有的属性
(4)特殊属性:几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义
2.5 事件系统
2.5.1 事件介绍
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
2.5.2 事件的使用方式
- 在组件中绑定一个事件处理函数
- 在相应的Page定义中写上相应的事件处理函数,参数是event
2.5.3 使用WXS函数响应事件
2.5.4 事件详解
(1) 事件分类
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
(2) 事件绑定和冒泡:事件绑定的写法同组件的属性,以 key、value 的形式
- key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart
- value 是一个字符串,需要在对应的 Page 中定义同名的函数(不然当触发事件的时候会报错)
备注
:bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。如下例:点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
(3) 事件的捕获阶段
(4) 事件对象
说明:如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
-
区别target和currentTarget
- dataset
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
3. 场景值
说明:场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表。