微信小程序笔记_this.selectcomponent

1.JSON配置

2.WXML语法

2.1.数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

数据绑定使用 Mustache 语法（双大括号）将变量包起来；

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

<view wx:for="{{list}} " wx:for-index="index" wx:for-item="itemName">
  {{item}}
</view>
1
2
3

2.2.逻辑语法

2.3.条件逻辑

2.4.列表渲染

2.5.模板

template页面模板

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

// 定义模板
<template name="msgItem" >
  <view wx:for="{{list}}">
    <text> {{item.aaa}} </text>
  </view>
</template>

// 使用模板
<template is="msgItem" data="{{list}}"/>
1
2
3
4
5
6
7
8
9

slot组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

普通自定义模板：

<!-- 组件模板,文件夹命名为component-tag-name  -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

组件 wxml 的 slot:

比如下拉刷新组件，页面模板可能头部和底部不需要刷新，中间列表部分才需要刷新，那么在刷新组件模板里就可以在顶部写一个<slot name="header"></slot>插槽,在页面模板里的头部包一个<view slot="header">头部内容</view>，底部同理。

比如长列表滚动组件，页面模板可能头部和底部不需要滚动，中间列表部分才需要滚动，只需在组件头部和底部添加插槽即可；

<!-- 组件模板，文件夹名为component-tag-name -->
<view class="wrapper">
  <slot name="before"></slot> // 显示：这里是插入到组件slot name="before"中的内容
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot> // 显示：这里是插入到组件slot name="after"中的内容
</view>
1
2
3
4
5
6

<!-- 引用组件的页面模板 -->
<!-- 需要先在json里面注册组件component-tag-name -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>
1
2
3
4
5
6
7
8
9
10

2.6.共同属性

3.小程序的宿主环境

3.1.数据驱动

​ 小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面。

3.2.生命周期

​ 页面初次加载的时候，微信客户端就会给Page实例派发onLoad事件，Page构造器参数所定义的onLoad方法会被调用，onLoad在页面没被销毁之前只会触发1次，在onLoad的回调中，可以获取当前页面所调用的打开参数option，关于打开参数我们放在这一节的最后再展开阐述。
页面显示之后，Page构造器参数所定义的onShow方法会被调用，一般从别的页面返回到当前页面时，当前页的onShow方法都会被调用。
在页面初次渲染完成时，Page构造器参数所定义的onReady方法会被调用，onReady在页面没被销毁前只会触发1次，onReady触发时，表示页面已经准备妥当，在逻辑层就可以和视图层进行交互了。

onLoad(Object query)

页面加载时触发。一个页面只会调用一次（小程序初始化完成时触发，全局只触发一次），可以在 onLoad 的参数中获取打开当前页面路径中的参数。

参数：

onShow()

小程序启动，或从后台进入前台显示时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。详见生命周期

onHide()

页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload()

页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

3.3.事件

常见的事件类型：前面加bind

4.JS语法

4.1.自定义组件

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

properties里定义的是组件对外要开发的属性，在data里定义的是在组件里自己使用的私有的数据。

4.2.事件

1.什么是事件

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

2.bindtap和catchtap的区别

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

一般采用bandtap或者是catchtap进行事件绑定，

bindtap是冒泡事件，catchtap是非冒泡事件

3.事件携带的参数

currentTarget

事件绑定的当前组件。

例子：（还包含了自定义data-属性）

<view class="service-item" catchtap="toService" data-url="/pages/setting/list/index" data-status="123">
        <view class="service-item-title">
          <sc-icon name="setting" class="icon-left" size="34rpx" color="#2A2B2F"></sc-icon>
          <label>设置</label>
        </view>
        <sc-icon name="circle-right" color="#A8A8A8" size="28rpx"></sc-icon>
      </view>
1
2
3
4
5
6
7

toService(event) {
    const { url,status } = event.currentTarget.dataset;
    if (url) {
      // 跳转路径
      wx.navigateTo({
        url: url,
      })
      // 跳转并携带参数
      wx.navigateTo({
        url: `/pages/order/list/index?status=${status}`
      })
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

4.4.常用事件

WXML的冒泡事件列表：

5.项目

5.1.目录

1.common：api文件里是各部分的api接口的url

2.components：公共组件，在pages里各文件的json里引入就能用了。有些在公共的app.json里已经引过了。

3.models：js文件，pages里各部分的接口调用在这个里面

4.pages:各部分的界面代码

5.template：所有的template模板都写在这

6.utils：request的封装，cache数据的缓存，计算方法等

7.app.js: App()里是公共的方法（例如登录方法），在其他页面使用getApp()可以调用app.js里的公共方法，

pages各部分：

js:调接口时，接口url和封装在models里面的对应js里和common里面的api文件里，

json：组件引用时，在页面的json文件里引入要用到的组件

5.2.标签(Vant Weapp组件)

block：并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

5.3.样式

0.要修改组件的样式需要加!important

1.flex 是 flex-grow、flex-shrink、flex-basis的缩写。

flex:1;相当于flex-grow: 1;

多个弹性元素，不设置的默认为flex-grow: 0;

设置flex-grow: 1;的元素会将父元素剩余的空间撑满，

2.均匀分布：

display: flex; // 设有该属性的元素，子元素若有固定宽度的，不固定宽度的则默认占满剩余宽度，不用额外设置 justify-content: 属性；
justify-content: space-between; // 弹性盒对象的子元素各项周围留有空白；
align-items: center; // 子元素各自都居中对齐，不设置的话子元素都顶对齐，
align-items: baseline; //元素位于容器的基线上。比如都底对齐，
flex-direction: column; // 垂直居中
height：100%；// 垂直居中又均匀分布时须设置高度
1
2
3
4
5
6

3.长文本：

overflow: hidden;//超过指定的宽度和高度也隐藏
white-space: nowrap; 所有的文本都显示在这一行
text-overflow: ellipsis; 多余的文本用省略号显示
min-width:0; // 父元素须设置宽度，
1
2
3
4

4.居右下：

position: absolute;
right: 0;
bottom: 0;
// 别忘了父级元素设置相对定位；
// 元素布局覆盖，可用绝对定位，再调上下左右距离；
1
2
3
4
5

5.display:grid; // 网络布局

display:grid;   // 网络布局
grid-template-columns:30% 30% 40%;  // 三三四 三列分
grid-template-rows:auto; // 行高度,例100rpx
// grid-row-gap: 20rpx; // 行间距
// grid-column-gap: 20rpx; // 列间距
// child 间的分隔样式
.item:not(:last-child):before {
  border-right: 1px dashed #A8A8A8;
  content: " ";
  height: 100%;
  width: 1px;
  right: 0;
  position: absolute;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

6.背景线性渐变：background: linear-gradient(0deg, #F63731 0%, #FFD7A7 100%)

5.4.事件

1.this.selectComponent(“”)获取子组件的实例对象

在父组件里调用 this.selectComponent("#id")，可以获取子组件的实例对象，这样就可以直接访问子组件的任意数据和方法。

2.this.triggerEvent()自定义组件触发事件

在对组件进行封装时，在当前页面（父）想要获取组件（子）中的某一状态，需要使用到this.triggerEvent(’ ',{}), 第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以拿到想要的属性。

<!-- 在父组件中 -->
<view class="plus-cart-view">
  <sc-stepper value="{{ cartMap[item.mallGoodsId] }}" bind:plus="plus" item="{{ item }}" bind:minus="minus" ></sc-stepper>
</view>
1
2
3
4

// 父组件方法
plus(event) { // 获取到自定义组件触发事件时提供的detail对象
  this.onPlus(event.detail)
},
minus(event) {
  this.onMinus(event.detail)
}
1
2
3
4
5
6
7

<!-- 在自定义组件中 -->
<view class="sc-stepper">
  <view class="sc-stepper-minus" catchtap="minusClick">
  </view>
  <view class="sc-stepper-value">{{currentValue}}</view>
  <view class="sc-stepper-plus" catchtap="plusClick"></view>
</view>
1
2
3
4
5
6
7

// 子组件（点击minusClick这个按钮将触发“minus”事件）
minusClick(event) {
  this.triggerEvent('minus', event)
},
plusClick(event) {
  this.triggerEvent('plus', event)
},
1
2
3
4
5
6
7

3.组件间通信

组件间的基本通信方式有以下几种。

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模板和样式 章节中介绍。

• 事件：用于子组件向父组件传递数据，可以传递任意数据。

• 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

  例子：

 // 父组件  
 // 修改
  handleEdit(event) {
    const { item } = event.currentTarget.dataset;  // 组件上由`data-`开头的自定义属性组成的集合，携带的参数
    wx.navigateTo({
      url: '/pages/address/edit/index',
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataToEditPage: function(data) {
          console.log(data) // 被打开页面传送到当前页面的数据
        },
        someEvent: function(data) { // 其他事件
          console.log(data)
        }
  	  },
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据data
        res.eventChannel.emit('acceptDataToEditPage', { data: item })
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  // 子组件
  onShow() {
    const that = this;
    const eventChannel = this.getOpenerEventChannel()
    // 监听acceptDataToEditPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    if (eventChannel && eventChannel.on) {
      eventChannel.on('acceptDataToEditPage', function (data) {
        // data是从上一个页面传递过来的数据
        const newData = data.data
        that.setData({
          ...newData,
          sex: newData.nameLabel,
          addressInfo: newData
        })
      })
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.页面间事件通信通道的方法:

[EventChannel.emit(string eventName, any args)]

// 触发一个事件（方法名，参数）

[EventChannel.on(string eventName, EventCallback fn)]

// 持续监听一个事件

[EventChannel.once(string eventName, EventCallback fn)]

// 监听一个事件一次，触发后失效

[EventChannel.off(string eventName, EventCallback fn)]

// 取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.防抖

如果短时间内大量触发同一事件，只会执行一次函数。

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// fn函数
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

节流：

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

5.this.setData

简介：setData函数主要用于将逻辑层数据发送到视图层，同时对应的改变this.data.x的值。

注意：

1.不能直接修改this.data，而不调用this.setData()，是无法改变当前页面的状态的，会导致数据不一致

2.仅支持可以JSON化的数据

3.单次设置的数据不能超过1024KB，尽量避免一次设置过多的数据

4.不要把data中的任何一项的value设为undefined，否则这一项将不能被设置，可能会有潜在的问题

8.wxs文件

每个 wxs 模块均有一个内置的 module 对象。

exports: 通过该属性，可以对外共享本模块的私有变量与函数。

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
1
2
3
4
5
6
7
8
9
10

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.bar(tools.FOO)}} </view>
1
2
3

9.页面跳转

 wx.navigateTo(OBJECT)

//保留当前页面，跳转到应用内的某个页面

 wx.redirectTo(OBJECT)

// 关闭当前页面，跳转到应用内的某个页面

 wx.switchTab(OBJECT)

// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
// (注意这种方法不能在链接后直接携带参数)

 wx.reLaunch(OBJECT)

// 关闭所有页面，打开到应用内的某个页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

1、进入A页面：A执行onLoad()–>onShow()–>onReady()；

2、A页面navigateTo B页面：A执行onHide()，B执行onLoad()–>onShow()–>onReady()；

3、B页面返回A页面：B执行onUnload()，A执行onShow()；

4、退出A页面：A执行onUnload()。
1
2
3
4
5
6
7
8
9

10.本地存储和globalData的区别

一、缓存（StorageSync）本地存储

1、小程序中的本地存储有同步功能，可用于保存用户信息(用户登录后的一些基本信息)

2、缓存的更新需要使用setStorageSync方法。

二、全局变量（globalData）

1、保存一些可能涉及安全类的数据，例如资源类，每次需要很准确的，就建议用全局变量。

2、全局变量每次关闭小程序重新打开的时候，都会进行初始化更新。