微信小程序开发(框架)

1. 逻辑层

1.1 注册小程序

  • 注册小程序示例
    每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
  • 获取全局唯一的 App 示例
    整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数。

1.2 注册页面

  • 注册页面示例
    对于小程序中的每个页面,都需要在页面对应的 js 文件中调用 Page 方法注册页面示例,指定页面的初始数据、生命周期回调、事件处理函数等。
  • 拓展
    除了 Page ,作为高级用法,页面可以像自定义组件一样使用 Component 来创建,这样就可以使用自定义组件的特性,如 behaviors 等。

1.3 页面生命周期

Page实例的生命周期.png

1.4 页面路由

说明:在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了当前的所有页面。
(1) 路由方式


路由的触发方式以及页面生命周期函数.png

说明:

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

(2) 发生路由切换时对应的页面栈的表现

路由方式和对应页面栈的表现.png

(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.requestwx.login
    备注1:异步 API 接口通常都接受一个 Object 类型的参数
    Object参数说明.png

    备注2:success,fail,complete 函数调用时会传入一个 Object 类型参数
    回调函数的参数.png

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) 属性类型

属性类型.png

(3) 公共属性:所有组件都有的属性
所有组件都有的公共属性.png

(4)特殊属性:几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义

2.5 事件系统

2.5.1 事件介绍

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如 id, dataset, touches。

2.5.2 事件的使用方式

  • 在组件中绑定一个事件处理函数
  • 在相应的Page定义中写上相应的事件处理函数,参数是event

2.5.3 使用WXS函数响应事件

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) 事件对象
说明:如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。


事件对象的属性.png
  • 区别target和currentTarget


    区别target和currentTarget.png
  • dataset
    在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

3. 场景值

说明:场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容