Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 微信小程序介绍、配置、视图层、逻辑层、页面数据交互等知识点学习归纳
Blogger Information
Blog 128
fans 9
comment 5
visits 241142
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
微信小程序介绍、配置、视图层、逻辑层、页面数据交互等知识点学习归纳
　一纸荒凉* Armani
Original
6416 people have browsed it

微信小程序

一、小程序介绍

小程序提供了一个简单、高效的应用开发框架和丰富的组件及 API，帮助开发者在微信中开发具有原生 APP 体验的服务

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

二、官方文档

想要更具体了解关于框架、组件、API的详细内容，请参考对应的参考文档：

三、速读了解

  • 微信小程序是腾讯公司旗下
  • 微信小程序只能在微信里打开
  • 微信小程序代码构成：WXML(html)，WXSS(css)，JS，JSON
  • 微信小程序文件构成：
    • .json后缀 JSON 配置文件
    • .wxml后缀 WXML 模板文件
    • .wxss后缀 WXSS 样式文件
    • .js后缀 小程序脚本逻辑文件
    • .wxs后缀 小程序脚本逻辑文件
  • 微信小程序上线后，请求项目接口必须是 https 协议
  • 微信小程序支持：微信支付、客服系统、插件

四、开发者工具

五、整体架构介绍

  • 整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1、视图层 View

  • 视图层由 WXML 与 WXSS 编写，由组件来进行展示
    • WXML(WeiXin Markup language) 用于描述页面的结构
    • WXSS(WeiXin Style Sheet) 用于描述页面的样式
  • 组件(Component)是视图的基本组成单元

2、逻辑层 App Service

  • 小程序开发框架的逻辑层使用 JavaScript 引擎
  • 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈
  • 框架 提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，扫一扫，支付功能等
  • 提供模块化能力，每个页面有独立的作用域

3、文件结构介绍

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件 必需 作用
app.js 是 小程序逻辑
app.json 是 小程序公共配置
app.wxss 否 小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型 必需 作用
js 是 页面逻辑
wxml 是 页面结构
json 否 页面配置
wxss 否 页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

配置文件 描述
project.config.json 此文件是配置微信开发者工具的，我们使用工具，无需去手动修改此文件
sitemap.json 微信索引文件，微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引
  • 一个小程序可以有很多页面，每个页面承载不同的功能，页面之间可以互相跳转
  • 一个 页面由配置代码 JSON 文件、模板代码 WXML 文件、样式代码 WXSS 文件以及逻辑代码 JavaScript 文件组成
  1. wxchant  微信小程序根目录
  2. ├─pages               页面根目录
  3. │  ├─index            index目录
  4. │  │  ├─index.json    json配置文件
  5. │  │  ├─index.wxml    wxml模版文件
  6. │  │  ├─index.wxss    wxss样式文件
  7. │  │  └─index.js      js逻辑事件文件
  8. │  │
  9. │  ├─logs             logs目录
  10. │  │  ├─logs.json     json配置文件
  11. │  │  ├─logs.wxml     wxml模版文件
  12. │  │  ├─logs.wxss     wxss样式文件
  13. │  └──└─logs.js       js逻辑事件文件
  14. │
  15. ├─utils               公共模块目录
  16. │  └─util.js          公共模块文件
  17. │
  18. ├─app.json            公共json配置文件
  19. ├─app.wxss            公共wxss样式文件
  20. ├─app.js              小程序启动文件
  21. ├─project.config.json 开发者工具配置文件
  22. └─sitemap.json        微信索引配置文件

六、小程序配置

1、全局配置

  • 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置
编号 属性 类型 必填 描述
1 entryPagePath string 否 小程序默认启动首页
2 pages string[] 是 页面路径列表
3 window Object 否 全局的默认窗口
4 tabBar Object 否 底部 tab 栏
5 debug boolean 否 是否开启 debug 模式，默认关闭
6 style string 否 v2 启用新版的组件样式
7 sitemapLocation string 是 指明 sitemap.json 索引文件的位置

entryPagePath

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

  1. {
  2.   "entryPagePath": "pages/index/index"
  3. }

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

小程序中新增/减少页面，都需要对 pages 数组进行修改。

如开发目录为：

  1. ├── app.js
  2. ├── app.json
  3. ├── app.wxss
  4. ├── pages
  5. │   │── index
  6. │   │   ├── index.wxml
  7. │   │   ├── index.js
  8. │   │   ├── index.json
  9. │   │   └── index.wxss
  10. │   │── login
  11. │   │   ├── login.wxml
  12. │   │   ├── login.js
  13. │   │   ├── login.json
  14. │   │   └── login.wxss
  15. │   └── logs
  16. │       ├── logs.wxml
  17. │       └── logs.js
  18. └── utils

则需要在 app.json 中写

  1. {
  2.   "pages": [
  3.       "pages/index/index", 
  4.       "pages/login/login", 
  5.       "pages/logs/logs"
  6.   ]
  7. }
  • window 配置项

用于设置小程序的状态栏、导航条、标题、窗口背景色。

编号 属性 类型 默认值 描述
1 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
2 navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white
3 navigationBarTitleText string 导航栏标题文字内容
4 backgroundColor HexColor #ffffff 窗口的背景色
5 backgroundTextStyle string dark 下拉 loading 的样式，仅支持 dark / light 
  1. {
  2.     "window": {
  3.     "navigationBarBackgroundColor": "#ffffff",
  4.     "navigationBarTextStyle": "black",
  5.     "navigationBarTitleText": "微信小程序配置测试",
  6.     "backgroundColor": "#eeeeee",
  7.     "backgroundTextStyle": "light"
  8.   }
  9. }

  • tabBar 配置项

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

编号 属性 类型 必填 默认值 描述
1 color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色
2 selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色
3 backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色
4 borderStyle string 否 black tabbar 上边框的颜色， 仅支持 black / white
5 list Array 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
6 position string 否 bottom tabBar 的位置，仅支持 bottom / top

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

  • list 配置项
编号 属性 类型 必填 描述
1 pagePath string 是 页面路径，必须在 pages 中先定义
2 text string 是 tab 上按钮文字
3 iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络图片。*当 position 为 top 时，不显示 icon。
4 selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 

  1. {
  2.   "entryPagePath": "pages/login/login",
  3.   "pages":[
  4.     "pages/index/index",
  5.     "pages/logs/logs",
  6.     "pages/login/login"
  7.   ],
  8.   "window": {
  9.     "navigationBarBackgroundColor": "#ffffff",
  10.     "navigationBarTextStyle": "black",
  11.     "navigationBarTitleText": "微信小程序配置测试",
  12.     "backgroundColor": "#eeeeee",
  13.     "backgroundTextStyle": "light"
  14.   },
  15.   "tabBar": {
  16.     "color": "#F5F5F5",
  17.     "selectedColor": "#F44336",
  18.     "backgroundColor": "#90CAF9",
  19.     "borderStyle": "black",
  20.     "position":"bottom",
  21.     "list": [
  22.       {
  23.         "pagePath": "pages/index/index",
  24.         "text": "首页",
  25.         "iconPath": "img/1.png",
  26.         "selectedIconPath": "img/1.1.png"
  27.       },
  28.       {
  29.         "pagePath": "pages/logs/logs",
  30.         "text": "日志"
  31.       },
  32.       {
  33.         "pagePath": "pages/login/login",
  34.         "text": "登录",
  35.         "iconPath": "img/2.png",
  36.         "selectedIconPath": "img/2.2.png"
  37.       }
  38.     ]
  39.   },
  40.   "style": "v2",
  41.   "sitemapLocation": "sitemap.json"
  42. }

底部选项卡Tab栏图标和选中时图标可以通过阿里图标库进行下载： iconfont字体图标库

2、页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

编号 属性 类型 默认值 描述
1 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
2 navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white
3 navigationBarTitleText string 否 导航栏标题文字内容
4 backgroundColor HexColor #ffffff 窗口的背景色
5 backgroundTextStyle string dark 下拉 loading 的样式，仅支持 dark / light

页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。 

  1. {
  2.   "navigationBarBackgroundColor": "#000",
  3.   "navigationBarTextStyle": "white",
  4.   "navigationBarTitleText": "用户登陆",
  5.   "backgroundColor": "#eeeeee",
  6.   "backgroundTextStyle": "light"
  7. }

了解更多配置请查看：官方文档

3、JSON数据格式

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON 扮演的静态配置的角色

  • JSON 文件都是被包裹在一个大括号中 {}，通过 key-value 的方式来表达数据。JSON 的 Key 必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
  • JSON 的值只能是以下几种数据格式，其他任何格式都会触发报错。
    • 1, 数字，包含浮点数和整数
    • 2, 字符串，需要包裹在双引号中
    • 3, Bool 值，true 或者 false
    • 4, 数组，需要包裹在方括号中 []
    • 5, 对象，需要包裹在大括号中 {}
    • 6, Null
  • 还需要注意的是 JSON 文件中无法使用注释，添加注释将会引发报错。
  • json 数据最后一个元素，不能有,逗号。数组和对象里的最后一个元素，也不能有,逗号。
  • 必须使用双引号，不能使用单引号会报错。

七、视图层

  • 视图层由 WXML 与 WXSS 编写，由组件来进行展示
    • WXML(WeiXin Markup language) 用于描述页面的结构
    • WXSS(WeiXin Style Sheet) 用于描述页面的样式
  • 组件(Component)是视图的基本组成单元
  1. wxml 书写方式跟 html 非常相似
  2. wxml 的组件有开始标签和结束标签，忘写结束标签会报错
  3. wxml 的标签支持属性、事件
  4. wxml 支持逻辑语法和条件判断

1、什么是组件

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格一致的样式。
  • 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

2、组件

  • 视图容器
编号 名称 功能说明
1 cover-image 覆盖在原生组件之上的图片视图
2 cover-view 覆盖在原生组件之上的文本视图
3 match-media media query 匹配检测节点
4 movable-area movable-view 的可移动区域
5 movable-view 可移动的视图容器，在页面中可以拖拽滑动
6 page-container 页面容器
7 scroll-view 可滚动视图区域
8 share-element 共享元素
9 swiper 滑块视图容器
10 swiper-item 仅可放置在 swiper 组件中，宽高自动设置为 100%
11 view 视图容器
  • 基础内容
编号 名称 功能说明
1 icon 图标
2 progress 进度条
3 rich-text 富文本
4 text 文本
  • 表单组件
编号 名称 功能说明
1 button 按钮
2 checkbox 多选项目
3 checkbox-group 多项选择器，内部由多个 checkbox 组成
4 editor 富文本编辑器，可以对图片、文字进行编辑
5 form 表单
6 input 输入框
7 keyboard-accessory 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
8 label 用来改进表单组件的可用性
9 picker 从底部弹起的滚动选择器
10 picker-view 嵌入页面的滚动选择器
11 picker-view-column 滚动选择器子项
12 radio 单选项目
13 radio-group 单项选择器，内部由多个 radio 组成
14 slider 滑动选择器
15 switch 开关选择器
16 textarea 多行输入框
  • 导航
编号 名称 功能说明
1 functional-page-navigator 仅在插件中有效，用于跳转到插件功能页
2 navigator 页面链接
  • 媒体组件
编号 名称 功能说明
1 audio 音频
2 camera 系统相机
3 image 图片
4 live-player 实时音视频播放（v2.9.1 起支持同层渲染）
5 live-pusher 实时音视频录制（v2.9.1 起支持同层渲染）
6 video 视频（v2.4.0 起支持同层渲染）
7 voip-room 多人音视频对话
  • 地图
编号 名称 功能说明
1 map 地图（v2.7.0 起支持同层渲染）
  • 画布
编号 名称 功能说明
1 canvas 画布
  • 开放能力
编号 名称 功能说明
1 web-view 承载网页的容器
2 ad Banner 广告
3 ad-custom 原生模板 广告
4 official-account 公众号关注组件
5 open-data 用于展示微信开放的数据
  • 原生组件说明
编号 名称 功能说明
1 native-component 原生组件
  • 无障碍访问
编号 名称 功能说明
1 aria-component 无障碍访问
  • 导航栏
编号 名称 功能说明
1 navigation-bar 页面导航条配置节点，用于指定导航栏的一些属性
  • 页面属性配置节点
编号 名称 功能说明
1 page-meta 页面属性配置节点，用于指定页面的一些属性、监听页面事件

3、组件属性

编号 属性名 类型 描述 注解
1 type string 是
2 size number/string 23 否
3 color string 否 
  1. <view>
  2.   <icon type="success" />
  3.   <icon type="info" size="32" />
  4.   <icon type="warn" size="36" />
  5.   <icon type="warn" size="40" color="orange" />
  6. </view>

4、组件公共属性

编号 属性名 类型 描述 注解
1 id String 组件的唯一标识 整个页面唯一
2 class String 组件的样式类 在对应的 WXSS 中定义的样式类
3 style String 组件的内联样式 可以动态设置的内联样式
4 hidden Boolean 组件是否显示 所有组件默认显示
5 data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
6 bind*/catch* EventHandler 组件的事件 
  1. <view id="php" style="color:red;">PHP中文网</view>
  2. <view id="ouyangke" style="color:green;">欧阳克</view>
  3. <view hidden>隐藏的view</view>

备：小程序没有类似 html5 中的 head、style 组件。花里胡哨的组件都没有

5、什么是WXSS

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

  1. 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
  2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
  3. 此外 WXSS 仅支持部分 CSS 选择器
  • 小程序的样式语言，用于描述 WXML 的组件样式，也就是视觉上的效果。
  • 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性
  • 与 CSS 相比，WXSS 扩展的特性有：
    • 尺寸单位
    • 样式导入

6、尺寸单位

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
编号 设备 rpx 换算 px (屏幕宽度/750) px 换算 rpx (750/屏幕宽度)
1 iPhone5 1rpx = 0.42px 1px = 2.34rpx
2 iPhone6 1rpx = 0.5px 1px = 2rpx
3 iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
  • 建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

7、样式文件

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
  1. <view style="color:{{color}};" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
  1. <view class="normal_view" />

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

  • app.wxss 全局样式文件
  1. .red {
  2.   color: red;
  3. }
  4. <view class="red">欧阳克</view>
  • index/index.wxss 局部样式文件
  1. .red {
  2.   color: green;
  3. }
  4. <view class="red">欧阳克</view>

8、样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

  1. /** wxss\common.wxss **/
  2. .small-p {
  3.   padding:5px;
  4. }
  1. /** app.wxss **/
  2. @import "wxss\common.wxss";
  3. .middle-p {
  4.   padding:15px;
  5. }

9、选择器

编号 选择器 样例 样例描述
1 .class .intro 选择所有拥有 class=”intro” 的组件
2 #id #firstname 选择拥有 id=”firstname” 的组件
3 element view 选择所有 view 组件
4 element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
5 ::after view::after 在 view 组件后边插入内容
6 ::before view::before 在 view 组件前边插入内容

10、选择器优先级

选择器优先级

  1. /* 权重为 1 + 100 = 101，优先级最高 */
  2. view#php {
  3.   color: orange;
  4. }
  6. /* 权重为 100 */
  7. #id {
  8.   color: pink;
  9. }
  11. /* 权重为 1 + 10 = 11 */
  12. view.ouyangke {
  13.   color: green;
  14. }
  16. /* 权重为 10 */
  17. .class {
  18.   color: red;
  19. }
  21. /* 权重为 1 */
  22. view {
  23.   color: blue;
  24. }

八、实战案例

九、逻辑层

1、什么是js

  • js 就是 JavaScript 的缩写，小程序的主要开发语言是 JavaScript，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求
  • js 就是 JavaScript 的缩写，小程序的主要开发语言是 JavaScript，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求

2、App 注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

  • App() 接受一个 Object 参数，其指定小程序的生命周期回调等
  • App() 必须在 app.js 中调用，必须调用且只能调用一次
  1. App({});
  • App 方法的所有属性
编号 属性 类型 必填 说明
1 onLaunch function 否 生命周期回调——监听小程序初始化
2 onShow function 否 生命周期回调——监听小程序启动或切前台
3 onHide function 否 生命周期回调——监听小程序切后台
4 onError function 否 错误监听函数
5 onPageNotFound function 否 页面不存在监听函数
6 onUnhandledRejection function 否 未处理的 Promise 拒绝事件监听函数
7 onThemeChange function 否 监听系统主题变化
8 其他 any 否 开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问 
  1. // app.js
  2. App({
  3.     // 小程序初始化完成时触发，全局只触发一次
  4.   onLaunch (options) {
  5.     // Do something initial when launch.
  6.   },
  7.     // 小程序启动，或从后台进入前台显示时触发
  8.   onShow (options) {
  9.     // Do something when show.
  10.   },
  11.     // 小程序从前台进入后台时触发
  12.   onHide () {
  13.     // Do something when hide.
  14.   },
  15.     // 小程序发生脚本错误或 API 调用报错时触发
  16.   onError (msg) {
  17.     console.log(msg)
  18.   },
  19.     // 小程序要打开的页面不存在时触发
  20.   onPageNotFound(res) {
  21.     wx.redirectTo({
  22.       url: 'pages/...'
  23.     }) // 如果是 tabbar 页面，请使用 wx.switchTab
  24.   },
  25.   globalData: 'I am global data'
  26. })

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

  1. // xxx.js
  2. // 获取到小程序全局唯一的 App 实例
  3. const app = getApp()
  4. console.log(app.globalData) // I am global data
  • App 方法只能有参数和方法
  1. App({
  2.   onLaunch: function () {
  3.     console.log(a);
  4.   },
  5.   onShow() {},
  6.   ouyangke() {
  7.     console.log("欧阳克");
  8.   },
  9.   globalData: {
  10.     php: "PHP中文网",
  11.   },
  12. });
  • this 调用本文件的方法和参数
  1. var a = 1;
  2. App({
  3.   onLaunch: function () {
  4.     this.ouyangke();
  5.     console.log(this.globalData.php);
  6.     // 也可以调用默认方法，但这样做没意义
  7.     this.onThemeChange();
  8.     console.log(a);
  9.   },
  10.   onShow() {
  12.   },
  13.   ouyangke() {
  14.     console.log("欧阳克");
  15.   },
  16.   globalData: {
  17.     php: "PHP中文网",
  18.   },
  19. });

3、Page 注册页面

  • Page() 接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等
编号 属性 类型 必填 说明
1 data Object 否 页面的初始数据
2 options Object 否 页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
3 onLoad function 否 生命周期回调—监听页面加载
4 onShow function 否 生命周期回调—监听页面显示
5 onReady function 否 生命周期回调—监听页面初次渲染完成
6 onHide function 否 生命周期回调—监听页面隐藏
7 onUnload function 否 生命周期回调—监听页面卸载
8 onPullDownRefresh function 否 监听用户下拉动作
9 onReachBottom function 否 页面上拉触底事件的处理函数
10 onShareAppMessage function 否 用户点击右上角转发
11 onAddToFavorites function 否 用户点击右上角收藏
12 onPageScroll function 否 页面滚动触发事件的处理函数
13 onResize function 否 页面尺寸改变时触发，详见 响应显示区域变化
14 onTabItemTap function 否 当前是 tab 页时，点击 tab 时触发
15 其他 any 否 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问
  • Page 方法只能有参数和方法
  1. // pages/login/login.js
  2. Page({
  4.   /**
  5.    * data 是页面第一次渲染使用的初始数据。
  6.    */
  7.   data: {
  8.     str: "PHP中文网",
  9.     boole: true,
  10.     number: 2021,
  11.     array: {
  12.       0: "HTMl",
  13.       1: "CSS",
  14.       2: "JavaScript",
  15.       3: "PHP",
  16.       4: "ThinkPHP",
  17.       5: "微信小程序"
  18.     },
  19.     object: [
  20.       {
  21.         name: "欧阳克",
  22.         gender: "男",
  23.         age: 40
  24.       },
  25.       {
  26.         name: "灭绝师太",
  27.         gender: "女",
  28.         age: 18
  29.       },
  30.       {
  31.         name: "西门大官人",
  32.         gender: "男",
  33.         age: 28
  34.       },
  35.     ]
  36.   },
  37.   tapName(event) {
  38.     this.setData({
  39.       str: "我被修改了",
  40.     });
  41.     console.log(event);
  42.   },
  44.   /**
  45.    * 生命周期函数--监听页面加载
  46.    */
  47.   onLoad: function (options) {
  49.   },
  51.   /**
  52.    * 生命周期函数--监听页面初次渲染完成
  53.    */
  54.   onReady: function () {
  56.   },
  58.   /**
  59.    * 生命周期函数--监听页面显示
  60.    */
  61.   onShow: function () {
  63.   },
  65.   /**
  66.    * 生命周期函数--监听页面隐藏
  67.    */
  68.   onHide: function () {
  70.   },
  72.   /**
  73.    * 生命周期函数--监听页面卸载
  74.    */
  75.   onUnload: function () {
  77.   },
  79.   /**
  80.    * 页面相关事件处理函数--监听用户下拉动作
  81.    */
  82.   onPullDownRefresh: function () {
  84.   },
  86.   /**
  87.    * 页面上拉触底事件的处理函数
  88.    */
  89.   onReachBottom: function () {
  91.   },
  93.   /**
  94.    * 用户点击右上角分享
  95.    */
  96.   onShareAppMessage: function () {
  98.   },
  100.    /**
  101.    * 当前是 tab 页时，点击 tab 时触发
  102.    */
  103.   onTabItemTap(item) {
  104.     console.log(item.index)
  105.     console.log(item.pagePath)
  106.     console.log(item.text)
  107.   },
  108.   // Event handler.
  109.   viewTap: function() {
  110.     this.setData({
  111.       text: 'Set some data for updating view.'
  112.     }, function() {
  113.       // this is setData callback
  114.     })
  115.   },
  116.   customData: {
  117.     hi: 'MINA'
  118.   }
  119. })

十、数据交互

WXML 语法参考

1、数据绑定

  • data 是页面第一次渲染使用的初始数据
  • 页面加载时，data 将会以 JSON 字符串的形式由逻辑层传至渲染层
  • 渲染层可以通过 WXML 对数据进行绑定
  • WXML 中的动态数据均来自对应 Page 的 data
  1. Page({
  2.   data: {
  3.     str: "PHP中文网",
  4.     boole: true,
  5.     number: 2021,
  6.     array: {
  7.       0: "HTMl",
  8.       1: "CSS",
  9.       2: "JavaScript",
  10.       3: "PHP",
  11.       4: "微信小程序",
  12.       5: "ThinkPHP",
  13.     },
  14.     object: [
  15.       {
  16.         name: "欧阳克",
  17.         gender: "男",
  18.         age: 40,
  19.       },
  20.       {
  21.         name: "灭绝师太",
  22.         gender: "女",
  23.         age: 18,
  24.       },
  25.       {
  26.         name: "西门大官人",
  27.         gender: "男",
  28.         age: 28,
  29.       },
  30.     ],
  31.   },
  32.   onLoad: function () {},
  33. });
  • WXML 通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在 {{ }} 内进行简单的逻辑运算
  1. <view>字符串：{{ str }}</view>
  2. <view>布尔值：{{ boole }}</view>
  3. <view>数字：{{ number }}</view>
  4. <view>运算：{{ number + 100 }}</view>
  5. <view>数字运算：{{ 20 + 20 }}</view>
  6. <view>字符串运算：{{ '欧阳克' + ' ' + '朱老师' }}</view>

2、js 获取 data 数据

  • this 调用本文件的方法和参数
  1.   onLoad: function () {
  2.     console.log(data.str);  // 会报错
  3.     console.log(this.data.str);
  4.   },

3、js 修改 data 数据

  • 单向修改
  1.   onLoad: function () {
  2.     this.data.str = '这里是php中文网';
  3.     console.log(this.data.str);
  4.   },
  5.   onShow: function () {
  6.     console.log(this.data.str);
  7.   }
  • 双向修改
  1.   onLoad: function () {
  2.     this.setData({
  3.       str : "这里是php中文网"
  4.     })
  5.     console.log(this.data.str);
  6.   },

在 WXML 中，普通的属性的绑定是单向的。例如：

  1. <input value="{{value}}" />

如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。

如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：

  1. <input model:value="{{value}}" />

这样，如果输入框的值被改变了， this.data.value 也会同时改变。同时， WXML 中所有绑定了 value 的位置也会被一同更新， 数据监听器 也会被正常触发。

4、事件修改

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

  1. <view>{{ msg }}</view>
  2. <button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

  1. Page({
  2.   clickMe: function(event) {
  3.     this.setData({ msg: "Hello World" });
  4.      console.log(event);
  5.   }
  6. })
  • 在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

  1. <view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
  • 在相应的Page定义中写上相应的事件处理函数，参数是event。
  1. Page({
  2.   tapName: function(event) {
  3.     console.log(event)
  4.   }
  5. })
  • 可以看到log出来的信息大致如下：
  1. {
  2.   "type":"tap",
  3.   "timeStamp":895,
  4.   "target": {
  5.     "id": "tapTest",
  6.     "dataset":  {
  7.       "hi":"Weixin"
  8.     }
  9.   },
  10.   "currentTarget":  {
  11.     "id": "tapTest",
  12.     "dataset": {
  13.       "hi":"Weixin"
  14.     }
  15.   },
  16.   "detail": {
  17.     "x":53,
  18.     "y":14
  19.   },
  20.   "touches":[{
  21.     "identifier":0,
  22.     "pageX":53,
  23.     "pageY":14,
  24.     "clientX":53,
  25.     "clientY":14
  26.   }],
  27.   "changedTouches":[{
  28.     "identifier":0,
  29.     "pageX":53,
  30.     "pageY":14,
  31.     "clientX":53,
  32.     "clientY":14
  33.   }]
  34. }

WXML的冒泡事件列表：

类型 触发条件 最低版本
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开

事件详解：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

5、条件逻辑

  1. <view>姓名：{{ array.name=='欧阳克' ? '欧阳克' : '朱老师' }}</view>
  2. <view wx:if="{{ array.age < 20 }}">青年</view>
  3. <view wx:elif="{{ array.age < 30 }}">中年</view>
  4. <view wx:else>老年</view>

6、循环渲染

  • 使用 wx:for-item 可以指定数组当前元素的变量名
  • 使用 wx:for-index 可以指定数组当前下标的变量名
  1. <view wx:for="{{ object }}">
  2.   {{index}} --- 姓名：{{ item.name }} --- 性别：{{ item.age }}
  3. </view>
  4. <view wx:for="{{ object }}" wx:for-item="v" wx:for-index="k">
  5.   {{k}} --- 姓名：{{ v.name }} --- 性别：{{ v.age }}
  6. </view>

7、九九乘法表

  1. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  2.   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
  3.     <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view>
  4.   </view>
  5. </view>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post