当前位置:   article > 正文

微信小程序基础知识(一)_微信小程序 常用事件与属性列表

微信小程序 常用事件与属性列表

目录

简介

了解项目结构

小程序页面的组成部分

Json配置

json语法

项目根目录中的app.json配置文件

项目根目录中的sitemap.json配置文件

每个页面文件夹中的.json配置文件

新建小程序页面

修改项目首页

WXML模板

区别

WXSS样式

区别

js逻辑交互

小程序的宿主环境

宿主环境包含的内容

通信主题

通信模型

运行机制

启动过程

页面渲染过程

组件

分类

小程序的三类API

协同工作和发布

模板与配置

模板语法

数据绑定

事件绑定

常用事件

事件对象的属性列表

target和currentTarget的区别

bindtap的语法格式

条件渲染

hidden的使用

wx:if和hidden的区别

两者的使用情况

引入:v-if和v-show的区别

列表渲染

wx:key的使用

WXSS模板样式

wxss独有的属性

全局样式和局部样式

全局配置

设置下拉菜单的样式

设置上拉触底的距离

tabBar

tabBar的六个组成部分

tabBar的节点的配置项

每个tab项的配置选项

配置tabBar的步骤

页面配置

页面配置文件和全局配置配置的关系

网络数据请求

配置request合法域名

发起get请求

发起post请求

在页面刚加载时请求数据

跳过request合法域名校验

关于跨域和Ajax的说明

案例-本地生活(day2)

视图与逻辑

页面导航

小程序实现页面导航的两种方式

声明式导航

编程式导航

导航传参

声明式导航传参

编程式导航传参

在onload中接收导航参数

页面事件

下拉刷新

全局开启下拉刷新

局部开启下拉刷新(推荐)

配置下拉刷新窗口的样式

监听下拉刷新事件

上拉触底

配置上拉触底距离

上拉触底小案例实现步骤

生命周期函数

应用的生命周期函数

页面的生命周期函数

WXS脚本

内嵌wxs脚本(内联式)

外联wxs脚本

wxs的特点

小程序组件化开发

创建组件

局部组件

全局组件

组件和页面的区别

自定义组件

组件样式隔离

修改组件的样式隔离

styleIsolation的可选值

自定义组件的数据、方法和属性

data数据

methods方法

properties属性

data 和properties 的区别

数据监听器

纯字段数据

组件的生命周期

组件全部的生命周期函数

组件所在页面的生命周期

父子组件之间的通信

属性绑定

事件绑定

获取组件实例

简介

  • 小程序与网页开发的区别

  1. 运行环境不同

  2. API不同

  3. 开发模式不同

了解项目结构

  1. pages用来存放所有小程序的页面

  2. utils用来存放工具性质的模块(例如:格式化时间的自定义模块)

  3. app.js 小程序项目的入口文件

  4. app.json小程序项目的全局配置文件

  5. app.wxss小程序项目的全局样式文件

  6. project.config.json项目的配置文件

  7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

小程序页面的组成部分

其中,每个页面由4个基本文件组成,它们分别是:

  1. .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等)

  2. .json文件(当前页面的配置文件,配置窗口的外观、表现等)

  3. .wxml文件((页面的模板结构文件)

  4. .wxss文件(当前页面的样式表文件)

Json配置

json是一种数据格式,总是以配置文件的形式出现,通过不同的.json配置文件,可以将小程序项目进行不同级别的配置

json语法

json是一种轻量级的数据交换格式,JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据,JSON的Key必须包裹在一个双引号中.

不能使用注释

JSON的值只能是以下几种数据格式:

  1. 数字,包含浮点数和整数

  2. 字符串,需要包裹在双引号中

  3. Bool值,true 或者 false

  4. 数组,需要包裹在方括号中 []

  5. 对象,需要包裹在大括号中 {}

  6. Null

项目根目录中的app.json配置文件
  • pages:用来记录当前小程序所有页面的路径

  • window:全局定义小程序所有页面的背景色、文字颜色等

  • style:全局定义小程序组件所使用的样式版本

  • sitemapLocation:用来指明sitemap.json的位置

项目根目录中的project.config.json配置文件

  • setting 中保存了编译相关的配置

  • projectname中保存的是项目名称

  • appid中保存的是小程序的账号ID

项目根目录中的sitemap.json配置文件
  • 用来配置小程序页面是否允许微信索引,allow表示允许,不想允许时只需要设置为disallow

  • 关闭警告"checkSiteMap": false,

每个页面文件夹中的.json配置文件

对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json(全局)的window中相同的配置项,页面配置的优先级更高

新建小程序页面

在app.json下找到pages,添加新增页面的存放路径,小程序开发工具会自动生成文件夹

修改项目首页

调整app.json下的pages数组在页面路径的前后顺序,即可修改项目的首页。小程序会默认将排在第一位的页面当作首页进行渲染

WXML模板

和HTML 一样都是标签语言,用来构建小程序页面的结构

区别
  • 标签名称不同

  • 属性节点不同

  • 提供了类似vue中的模板语法

WXSS样式

是一套样式语言,严格区分大小写。

没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中,

属性值也可以动态的去改变,在插值语法外加上双引号,即可实现动态的数据绑定。

<text data-test="{{test}}"> hello world</text>

区别
  • 新增了rpx尺寸单位,不需要手动进行换算(rem需要),在不同的屏幕大小上会自动进行换算。

  • 提供了全局样式和局部样式

  • 仅支持部分CSS样式选择器

    • .class和#id

    • element

    • 并集选择器、后代选择器

    • ::after和::before等伪类选择器

js逻辑交互

.js文件分为三大类

  1. app.js

是整个函数的入口文件,通过调用App()函数来启动整个小程序

  1. 页面的.js文件

是页面文件的入口,通过调用page()函数来创建并运行页面

  1. 普通js文件

       用来封装公共的函数或属性供页面使用

小程序的宿主环境

宿主环境是指程序运行所必须的依赖环境,Android和iOS是两个不同的宿主环境,软件脱离宿主环境无法运行。手机微信是小程序的宿主环境

宿主环境包含的内容
通信主题

小程序正在通信的主体是渲染层和逻辑层,二者之间进行交互

  • 渲染层:包含WXML和WXSS

  • 逻辑层:包含JS脚本

通信模型

渲染层逻辑层之间的通信是由微信客户端进行转发的,而逻辑层和第三方服务器之间的通信是由微信客户端进行转发。

运行机制
启动过程
  1. 把小程序的代码包下载到本地

  2. 解析app.json全局配置文件

  3. 执行app.js 小程序入口文件,调用App()

  4. 创建小程序实例渲染小程序首页

  5. 小程序启动完成

页面渲染过程
  1. 加载解析页面的.json配置文件

  2. 加载页面的.wxml模板和.wxSS样式

  3. 执行页面的.js文件,调用Page()创建页面实例

  4. 页面渲染完成

组件
分类

由宿主环境提供,分为九大类

  • 视图容器

    • view:普通视图区域,类似于div是块级元素,常用来实现页面的布局效果

    • scroll-view:可以滚动视图区域,常用于实现列表滚动效果

    • swiper和swiper-item:轮播图容器组件和轮播图item组件

      • swiper组件的常用属性

  • 基础内容

    • text:文本组件,类似span,是一个行内元素

      • selectable属性,实现长按文本选中的效果

    • rich-text:富文本正在组建,能解析标签

  • 表单组件

  • 导航组件

  • 媒体组件

  • map地图组件

  • canvas画布组件

  • 开放能力

  • 无障碍访问

  • 其他常用按钮

    • Button组件

      • 通过type指定按钮的颜色

      • 通过size="mini"指定按钮的大小

      • 添加plain属性设置镂空按钮

    • image组件

      • 可以通过mode属性指定图片的裁剪和缩放模式

小程序的三类API
  1. 事件监听API

    1. 以on开头,用来监听某些事件的触发

  2. 同步API

    1. 以Sync结尾的API都是同步API

    2. 同步API的执行结果,可以通过函数返回值直接获取,如果执行错误会抛出异常

  3. 异步API

      类似于jQuery 中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果

协同工作和发布

模板与配置

模板语法

数据绑定

在data中定义一个对象属性,在wxml中通过插值语法来绑定data对象属性,用双引号将属性值包裹起来,即可实现动态的绑定

<text data-test="{{test}}"> hello world</text>

事件绑定

事件是渲染层到逻辑层的通讯方式

常用事件
  • tap:触摸后离开,类似点击事件

  • input:文本框输入事件

  • change:状态改变时触发

转存失败重新上传取消转存失败重新上传取消

事件对象的属性列表

当事件回调触发时,会收到一个事件对象event

target和currentTarget的区别

target触发的是源头组件,而currentTarget触发的是当前事件所绑定的事件

例如:在view组件中嵌套了一个button组件,点击button时,会以冒泡的形式向外扩散,也会触发外层view的tap事件处理函数。

对于外层的view来说

  • e.target指向触发事件的源头组件,即内部的button正在组件

  • e.currentTarget指向的是当前事件所绑定的事件,即为外层的view组件

bindtap的语法格式
条件渲染

语法

<view wx:if="{{condition}}"> True </view>

还可以搭配else-if和else使用

<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>

将条件放在一个标签上,则标签内包含的多个内容可以一起进行判断

hidden的使用

<view hidden="true"></view>

也可以控制元素的显示与隐藏

wx:if和hidden的区别

wx:if :以动态创建和移除元素控制元素的展示于隐藏(类似Vue中的v-if)

hidden:切换样式{dispaly:none/block;},控制元素的显示与隐藏(类似Vue中的v-show

两者的使用情况
  • 当切换频繁时,建议使用hidden

  • 当切换条件复杂时性能消耗比较大,建议使用wx:if搭配else else-if来进行展示与隐藏的切换。

引入:v-if和v-show的区别
  • V-if:依赖于DOM节点的控制,在切换模块时,Vue有一个局部编译/卸载的过程,v-if时真实的条件渲染,但同时也是"懒惰的",当初始渲染条件时为假,则什么都不做,当条件为真时,才会渲染模块。

  • v-show:依赖于DOM节点的display属性,当v-show传入的值为true时,对应的display的值为block,当传入的值为false时,display的值为none。不管初始条件是什么,元素总是会被选入,但只是基于CSS进行切换。

列表渲染

使用wx:for绑定一个数组,默认数组下标名为index 变量名默认为item

  1. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view>
  2. Page({
  3.     data: {
  4.         array: [{ message: 'foo', },
  5.           { message: 'bar' }]
  6.         }
  7. })
wx:key的使用

指定唯一的key值,提高渲染效率

WXSS模板样式

类似于CSS

wxss独有的属性
  • rpx尺寸单位

    • 能解决屏幕适配,rpx把屏幕宽度等分为750份,总和为750rpx。在不同大小的屏幕上一个rpx所代表的大小不同。

    • rpx与px之间的换算:750rpx = 当前屏幕大小的px

  • @import导入

    • import + “需要导入样式的相对路径”;

全局样式和局部样式
  • 全局样式中的样式会应用于所有页面

  • 当全局样式和局部样式冲突时,根据就近原则局部样式会覆盖掉全局样式

  • 只有当局部样式的权重大于或等于全局样式时,才会覆盖全局样式。(如果全局样式的权重高,则采用全局样式)

全局配置

根目录下的app.json是小程序的全局配置文件

  • pages:记录所有页面的存放路径

  • window:设置小程序窗口的外观

  • 常用配置项

  • tabBar:设置底部的tabBar效果

  • style:是否启用新版的组件样式

设置下拉菜单的样式
  1. "window": {
  2. //下拉 loading 的样式,仅支持 dark(小圆点是暗色的) / light(小圆点的是白色的)
  3. "backgroundTextStyle": "light",
  4. //导航栏的背景色,只支持十六进制的颜色,不支持文本格式的颜色
  5. "navigationBarBackgroundColor": "#fff",
  6. //导航栏顶部的文字
  7. "navigationBarTitleText": "Weixin",
  8. //设置导航栏的文字颜色(只支持黑色和白色)
  9. "navigationBarTextStyle": "black",
  10. //设置下拉菜单
  11. "enablePullDownRefresh": true,
  12. //设置下拉菜单刷新时窗口的背景色
  13. "backgroundColor": "#eeeeee" },
设置上拉触底的距离

上拉触底是通过手指在屏幕上的上拉滑动操作,从而加载更多的数据的行为,默认距离是50px

"onReachBottomDistance": 50

tabBar
  • 有顶部和底部tabBar

  • 可以设置最少两个最多五个的tab页签

  • 当渲染顶部tab时不显示icon,只显示文本

tabBar的六个组成部分

  1. backgroundColor:tabBar的背景色

  2. selectIconPath:选中时的图片路径

  3. borderStyle:tabBar上边框的颜色

  4. iconPath:未选中时的图片路径

  5. selectedColor:tab上的文字选中的颜色

  6. color:tab上的文字(默认)未选中的颜色

tabBar的节点的配置项

每个tab项的配置选项

配置tabBar的步骤
  1. 准备好图片资源

    1. 包含active的是选中后的图标,不包含active的是未选中时的图标

  2. 在app.json文件中新增pages节点,新建对应的tab页面(tab页面必须放在普通页面的前面才能正常运行)

  3. 打开app.json,新增tabBar节点,新增list数组,在这个数组中存放着每个Tab项的配置对象,其中list中的每一个对象包含的属性有

    1. pagePath:指定当前tab对应的页面路径(必填)

    2. text:指定当前tab上按钮的文字(必填)

    3. iconPath:指定当前tab未选择时的图片路径

    4. selectedIconPath:指定当前tab被选中后高亮的图片路径

页面配置

每个页面中都有.json配置文件,用来对当前页面的窗口外观、页面效果进行配置。

页面配置文件和全局配置配置的关系

app.json中的window节点中的配置,对所有页面都生效。想单独配置页面时,只需要在对应的json文件中进行配置即可。

根据就近原则,如果产生冲突,最终效果以页面配置为准(全局配置将会被覆盖)

  • 建议"enablePullDownRefresh": true属性不要再全局配置中使用,当某个页面需要使用下拉刷新时,再去添加这个属性

网络数据请求

出于安全性的考虑,小程序只能使用HTTPS类型的接口,必须将接口的域名添加到信任列表中。

配置request合法域名

登录到微信小程序管理后台—>开发管理—>开发设置—>服务器域名 开始配置—>修改request合法域名

注意事项:

  • 域名只支持https协议

  • 域名不能使用IP地址或者localhost

  • 域名必须经过ICP备案

  • 服务器域名一个月内最多可申请5次修改

发起get请求

使用微信提供的wx.request()方法,可以发起GET数据请求

  1. getInfo() {
  2. wx.request({
  3. url: 'https://www.escook.cn.api/get',
  4. method:'GET',
  5. data: {
  6. name:'xiaoyu', age:20
  7. },
  8. success:(res) => {
  9. console.log(res);
  10. }
  11. })
  12. },
发起post请求
  1. postInfo() {
  2. wx.request({
  3. url: 'https://www.escook.cn.api/get',
  4. method:'POST',
  5. data: {
  6. name:'zhangzan',
  7. age:23
  8. },
  9. success:(res) => {
  10. console.log(res.data);
  11. }
  12. })
  13. },
在页面刚加载时请求数据

在页面刚加载的时候,自动请求一些初始化的数据,只需要在页面的onLoad事件中调用获取数据的函数

  1. onLoad() {
  2.     this.getInfo()
  3.    this.postInfo()
  4. },
跳过request合法域名校验

在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS 版本及HTTPS 证书」选项,跳过request 合法域名的校验。

仅限在开发与调试阶段使用

关于跨域和Ajax的说明

以上两种情况在小程序中都不存在。

  • 跨域只存在浏览器中,而小程序的宿主环境是微信,所以不存跨域的问题。

  • Ajax的核心技术是依赖于浏览器的XMLHttpRequest这个对象,在小程序中不能叫做发起“Ajax请求”,而是叫做“发起网络数据请求”

案例-本地生活(day2)
  1. 创建一个小程序项目,新建页面

  2. 设置头部导航栏

    1. 在app.json中修改window节点的配置

  3. 设置tabBar

    1. 每一个list都是一个小图标

    2. pagePath和text必须设置

  4. 实现轮播图效果

  5. 实现九宫格效果

视图与逻辑

页面导航

实现页面间的相互跳转,<a>/location.href(js的API)都可以在浏览器在实现页面导航。

小程序实现页面导航的两种方式
  1. 声明式导航

    1. 在页面上声明一个<navigator>导航组件,通过点击<navigator>组件实现页面跳转

  2. 编程式导航

    1. 调用小程序的API,实现页面的跳转

声明式导航
  1. 导航到tabBar页面

      在页面上声明一个<navigator>导航组件

    1. //参考跳转到非tab页面
    2. <navigator url="/pages/test/test?name=xiaoyu&age=20">跳转到test页面</navigator>
  2. 导航到非tabBar页面

      通过点击<navigator>组件实现页面跳转

    1. <navigator url="/pages/test/test" open-type="navigate">导航到非Tab页面</navigator>
    2. //url是要跳转的页面的路径必须是以/开头
    3. //open-type是跳转的方式,必须为navigate (可以省略,默认跳转到非tab页面)
  3. 后退导航

    1. <navigator open-type="navigateBack" delta="1">后退</navigator>
    2. //open-type的值为navigateBack,表示进行后退
    3. //delta的值必须是数字,表示后退的层级,为1的时候可以省略(1为默认属性)
编程式导航
  1. 导航到tabBar页面

      调用wx.switchTab(Object object)方法

    1. <button bindtap="gotoMessage">跳转到Tab页面</button>
    2. //通过编程式导航,跳转到message页面
    3. gotoMessage() {
    4. wx.switchTab({
    5. url: '/pages/message/message',
    6. })
    7. },
  2. 导航到非tabBar页面

调用wx.navigateTo(Object object)方法

  1. <button bindtap="gotoTest">跳转到非Tab页面</button>
  2. //通过编程式导航,跳转到test页面
  3. gotoTest() {
  4. wx.navigateTo({
  5. url: '/pages/test/test',
  6. })
  7. },
  1. 后退导航

调用wx.navigateBack(Object object)方法

  1. <button bindtap="gotoBack">后退</button>
  2. // 编程式导航,后退到上一页面
  3. gotoBack() {
  4. wx.navigateBack()
  5. },
导航传参
声明式导航传参

navigator 组件的url 属性用来指定将要跳转到的页面的路径。路径携带的参数:

  • 参数与路径之间使用?分隔

  • 参数键与参数值用=相连

  • 不同参数用&分隔

  1. //参考跳转到非tab页面
  2. <navigator url="/pages/test/test?name=xiaoyu&age=20">跳转到test页面</navigator>
编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数

  1. <button bindtap="gotoTest2">跳转到test页面</button>
  2. gotoTest2() {
  3. wx.navigateTo({
  4. url: '/pages/test/test?name=lele&age=23',
  5. })
  6. },
在onload中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad 事件中直接获取到

  1. onLoad:function(options) {
  2. //options就是导航传过来的参数对象
  3. console.log(options)
  4. }

页面事件

下拉刷新

下拉页面从重新加载页面数据

全局开启下拉刷新
  1. //在app.json的Windows中配置即可开启全局下拉刷新
  2. "enablePullDownRefresh": true
局部开启下拉刷新(推荐)
  1. //在需要进行下拉刷新的页面的json配置文件中
  2. "enablePullDownRefresh": true
配置下拉刷新窗口的样式
  1. //设置下拉刷新的背景颜色
  2. "backgroundColor": "#efefef",
  3. //设置小圆点的颜色
  4. "backgroundTextStyle": "dark"
监听下拉刷新事件

在页面的.js 文件中,通过onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件

  1. <view>count值是{{count}}</view>
  2. <button bindtap="addCount">点我加1</button>
  3. addCount() {
  4. this.setData({
  5. count:this.data.count + 1
  6. })
  7. }
  8. // 页面相关事件处理函数-监听用户下拉动作
  9. onPullDownRefresh() {
  10. this.setData({
  11. count : 0
  12. })
  13. wx.stopPullDownRefresh()
  14. }
上拉触底

通过上拉滑动从而加载更多数据的行为,调用onReachBottom() 函数即可实现当前页面上拉触底事件的监听效果。

onReachBottom() { }
配置上拉触底距离

触发上拉触底事件时,滚动条距离页面底部的距离,可以在页面的.json配置文件中,设置onReachBottomDistance属性开配置上拉触底的距离,默认为50px,(不带单位)

上拉触底小案例实现步骤

 1.定义随机获取颜色的方法

  1. data: {
  2. colorList:[]
  3. },
  4. getColors() {
  5. }

2.在页面加载时获取初始数据

  1. success:({data:res}) => {
  2. this.setData({
  3. colorList:[...this.data.colorList,...res.data]
  4. })
  5. }

3.渲染UI 结构并美化页面效果

4.在上拉触底时调用获取随机颜色的方法

  1. onReachBottom() {
  2. this.getColors()
  3. }

5.添加loading 提示效果

  1. wx.showLoading({
  2. title: '数据加载中...',
  3. })

6.对上拉触底进行节流处理

生命周期函数

生命周期:(时间段)是一个对象从创建-> 运行-> 销毁的过程。

生命周期函数:(时间点)是小程序框架提供的内置函数,会伴随生命周期自动按次序执行。它允许在特定的时间点,执行某些特定的操作。

应用的生命周期函数

特指小程序从启动->运行->销毁的过程

需要在app.js中声明

  1. App({
  2. //初始化完成时,执行此函数,全局只触发一次
  3. onLaunch:function(options){},
  4. //小程序启动或从后台切换到前台时触发
  5. onShow:function(options){},
  6. //从前台切换到后台时触发
  7. onHide:function(){}
  8. )}
页面的生命周期函数

特指小程序在每个页面的加载->渲染->销毁的过程

需要在页面的.js文件中声明

  1. Page({
  2. //监听页面加载,一个页面只调用一次
  3. onLoad:function(options){},
  4. //监听页面显示
  5. onShow:function(){},
  6. //监听页面初次渲染完成,一个页面只调用一次
  7. onReady:function(){},
  8. //监听页面隐藏
  9. onHide:function(){},
  10. //监听页面卸载,只调用一次
  11. onUnload:function(){}
  12. )}

WXS脚本

(weixin Script)是小程序独有的一套脚本语言。在wxml中无法调用在.js文件中定义的函数,到那时可以调用wxs中定义的函数。

语法类似于JavaScript,但是存在很大区别。

  • wxs有自己的数据类型

    • number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、regexp正则

  • 不支持es6及以上的语法形式

    • 不支持:let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...

    • 支持:var 定义变量、普通function 函数等类似于ES5 的语法

  • wxs遵循CommonJS规范

    • module对象

    • require() 函数

    • module.exports 对象

内嵌wxs脚本(内联式)

编写在wxml文件中的<wxs>标签内,必须提供module属性,指定当前wxs的模块名称,方便再wxml中访问模块中的成员

  1. <view> {{m1.toLower(country)}} </view>
  2. <wxs module="m1">
  3. module.exports.toUpper = function(str) {
  4. return str.toUpperCase()
  5. }
  6. </wxs>
外联wxs脚本

编写在utils文件下,以.wxs后缀结尾

  1. function toLower(str) {
  2. return str.toLowerCase()
  3. }
  4. module.exports = {
  5. toLower : toLower
  6. }

使用的时候必须为<wxs>标签添加module和src属性

mdule:指定模块的名称

src:指定要引入的脚本的路径(相对路径)

  1. <view> {{m2.toLower(country)}} </view>
  2. <wxs src="../../utils/tools.wxs" module="m2"/>
  1. //外联脚本
  2. function toLower(str) {
  3. return str.toLowerCase()
  4. }
  5. module.exports = {
  6. toLower : toLower
  7. }

wxs的特点

  1. 与JavaScript 不同

  2. 不能作为组件的事件回调

  3. wxs 的运行环境和其他JavaScript 代码是隔离的

      ①wxs 不能调用js 中定义的函数

      ②wxs 不能调用小程序提供的API

  4. 在iOS 设备上,WXS会比JavaScript 快2 ~ 20 倍。但在android 设备上,二者的运行效率无差异。

小程序组件化开发

创建组件

在项目的根目录上新建components文件夹,新建test文件夹—>新建component,输入组件的名称,会自动生成四个文件。

局部组件

在页面的.json文件中引入组件(以键值对的形式)

  1. "usingComponents": {
  2. "my-test1":"/componets/test/test"
  3. }

然后在.html中使用

<my-test1></my-test1>

全局组件

过程和局部组件类似,只不过声明组件的位置在app.json中,在所有的.html文件中都可以使用声明过的组件。(全局引用)

当使用频率高时使用全局引用,反之则使用局部引用。

组件和页面的区别
  • 组件的.json文件在需要声明"component":true属性

  • 组件的.js文件中调用的是Component()函数

  • 组件的事件处理函数需要定义到methods节点中

自定义组件

组件样式隔离

自定义组件只对当前组件生效,既可以防止外界的样式影响组件内部的样式,也可以防止组件的样式破坏外界的样式。

注意:只有class选择器有样式隔离效果,id、属性、标签选择器都不受样式隔离的影响,所以在组件和引用组件的页面尽量不要使用以上三种选择器。

修改组件的样式隔离

可以在组件的.js文件下新增如下配置

  1. Component({
  2. options:{
  3. styleIsolation:'isolated'
  4. }
  5. })

或者.json文件中新增

styleIsolation:'isolated'

styleIsolation的可选值

自定义组件的数据、方法和属性
data数据

定义用于组件模板渲染的私有数据

methods方法

定义事件处理函数和自定义方法(建议以_开头)

properties属性

用来接收外界传递到组件中的数据,可以使用setData 为properties 中的属性重新赋值

  • 完整定义属性的方式

    1. max:{
    2. type:Number,
    3. //属性值的数据类型
    4. value:10
    5. //默认属性值
    6. }
  • 简化定义的方式

    1. max:Number
    2. //不需要指定属性的默认值,可以使用简化方式
data 和properties 的区别
  1. data存储组件的私有数据

  2. properties存储外界传递到组件中的数据

  3. 二者都是可读可写(不同于vue中的prop只能读取不能更改值)使用setData为properties中的属性重新赋值。

数据监听器

observers类似于Vue重点watch侦听器

监听器支持监听对象中单个或多个属性的变化

  1. component({
  2. observers: {
  3. '对象.属性A,对象.属性B': function(属性A的新值,属性B的新值){
  4. //触发此监听器的3种情况:
  5. //【为属性A赋值】使用setData设置this.data.对象.属性A 时触发
  6. //【为属性B赋值】使用setData 设置this.data.对象.属性B 时触发
  7. //【直接为对象赋值】使用setData 设置this.data.对象 时触发
  8. }
  9. }
  10. })
纯字段数据

不用于界面渲染的data字段

有助于提高页面性能

使用:在Component 构造器的options 节点中,指定pureDataPattern为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段

组件的生命周期

组件全部的生命周期函数

Created组件刚刚被创建时执行

Attached 在组件实例进入页面节点树时执行

Ready 在组件在视图层布局完成后执行

Moved 在组件实例被移动到结点数的另一个位置时执行

Detached 在组件实例被从页面节点树移除时执行

Error 每当组件方法抛出错误时执行

最重要的生命周期函数有3 个,分别是created、attached、detached。特点如下:

  • 组件实例刚被创建好的时候,created 生命周期函数会被触发

    • 还不能调用setData

    • 通常在这个生命周期函数中,只应该用于给组件的this 添加一些自定义的属性字段

  • 组件完全初始化完毕、进入页面节点树后,attached 生命周期函数会被触发

    • this.data已被初始化完毕

    • 绝大多数初始化的工作在这个时机进行(例如发请求获取初始数据)

  • 组件离开页面节点树后,detached 生命周期函数会被触发

    • 退出一个页面时,会触发页面内每个自定义组件的detached 生命周期函数

    • 清理性质的工作

生命周期函数可以直接定义在Component的,在lifetimes字段内进行声明(优先级最高)

组件所在页面的生命周期
  • Show 组件所在页面被展示时执行

  • Hide 组件所在页面被隐藏时执行

  • Resize 组件所在页面尺寸变化时执行

组件所在页面的生命周期函数,需要定义在pageLifetimes 节点中

  1. pageLifetimes: {
  2. show() { },
  3. hide() { },
  4. resize() { }
  5. }

父子组件之间的通信

  • 属性绑定

    • 父向子的指定属性设置数据,仅限JSON兼容的数据

  • 事件绑定

    • 子向父传递数据,可传递任何数据

  • 获取组件实例

    • 父组件通过this.selectComponent()获取子组件实例对象,可以访问子组件的任意数据和方法

属性绑定
  • 属性绑定用于实现父向子传值,而且只能传递普通类型的数据,不能传递方法

  • 子组件在properties节点中声明对应的属性并使用

事件绑定

实现子向父传值,可以传递任何类型的数据

实现子向父传值,可以传递任何类型的数据

  • 在父组件的js中定义一个函数

  • 在父组件的wxml中通过自定义事件的形式,将之前定义的函数传递给子组件

  • 在子组件的js中,调用this.triggerEvent('自定义事件名称', { /* 参数对象*/ }),将数据发送到父组件

  • 在父组件的js 中,通过e.detail 获取到子组件传递过来的数据

获取组件实例

在父组件里调用this.selectComponent("id或class选择器") ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/416843
推荐阅读
相关标签
  

闽ICP备14008679号