处理手机号

利用wxs脚本实现11位手机号添加“-”，如：123-4567-8901

在utils文件夹中新建wxs文件

tools.wxs

编写脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function handlePhoneNumber(str){
	//判断手机号是否为11位，不为11位就不处理
	if(str.length!==11) return str
	//开始处理，首先分割每个字符并存放在数组中
	var arr=str.split('')
	//在第三位，删除0个元素，插入"-"
    arr.splice(3,0,'-')
    //在第八位，删除0个元素，插入"-"
    arr.splice(8,0,'-')
    //合并数组
    return arr.join('')
}
//将函数共享
module.exports={
	handlePhoneNumber:handlePhoneNumber
}

调用脚本

1
2
3
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
... 
<view>{{tools.handlePhoneNumber(item.phone)}}</view>

自定义小程序组件

创建组件

  1. 在项目根目录中右键，新建components文件夹
  2. 右键components文件夹，新建一个组件文件夹
  3. 新建的组件文件夹上右键，点击新建components，输入文件名后生成4个文件

image-20221115192246230

引用组件

局部引用

只能在当前被引用的页面内使用，在页面的json文件中进行配置

1
2
3
4
5
{
	"usingComponents":{
    	"my-test":"/components/test/test"
    }
}
1
<my-test></my-test>

全局引用

组件可以在每个小程序页面中使用，在app.json中做类似上面的操作

组件和页面的区别

  1. 组件.json文件中需要声明"component":true
  2. 组件.js文件中调用的是Component()函数，页面为Page()函数
  3. 组件的事件处理函数需要定义到methods节点中，页面只需要定义在与data节点平级的位置

自定义组件的样式

组件样式隔离，三者相互独立，互不影响

image-20221115193752060

  • 全局的app.wxss对组件的样式无影响
  • 只有class选择器会有样式隔离，属性选择器、id选择器、标签选择器不受隔离

修改组件的样式隔离选项

1
2
3
4
5
6
7
8
//在组件的js文件中
option:{
	styleIsolation:isolated
}
//在组件json文件中新增
{
	“styleIsolation”:"isolated"
}

styleIsolation可选值

  • isolated：启用样式隔离
  • apply-shared：页面样式可以影响组件样式，但组件样式不会影响页面样式
  • shared：双向影响

methods节点

建议在methods中的自定义方法在开头用下划线”_“与事件处理函数进行区分

properties节点

用于接收外界传递到组件中的数据

1
2
3
4
5
6
7
8
9
properties: {
    //完整版定义
    max:{
      type:Number, //设置数据类型
      value:10  //默认值
    },
    //简化版定义
    max: Number
  },
1
2
 //wxml
<my-test max="1"></my-test>

data和properties的区别

在小程序中都是可读可写，本质上没有任何区别，使用方法类似this.data/properties.item

  • data倾向于存储私有数据
  • properties倾向于存储外界传入的数据

数据监听器

用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。作用类似于vue中的watch侦听器。

基本语法格式

1
2
3
4
5
6
7
8
9
10
11
Components({
	observers:{
    	'字段A','字段B':function(字段A新值,字段B新值){
        	//do something
        },
        //使用通配符
        '字段.**':function(object){
			//object是个对象
        }
    }
})

纯数据字段

纯数据字段指那些不用于界面渲染的data字段。

应用场景

  • data字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。

好处

  • 纯数据字段有助于提高页面更新的性能。

使用规则

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

1
2
3
options:{
	pureDataPattern:/pattern/
}

组件生命周期

在lifetime节点中定义，旧方法是直接定义

  • created 在组件实例刚刚被创建时执行
    • 还不能调用setData
    • 只能用于给组件的this添加一些自定义的属性字段
  • attached 在组件实例刚刚进入页面节点树时执行
    • this.data已被初始化完毕
    • 绝大多数初始化工作都在这个时机进行（如发起获取数据的网络请求）
  • ready 在组件在视图层布局完成后执行
  • moved 在实例被移动到节点树另一个位置时执行
  • detached 在组件实例从当前页面节点树移除时执行
    • 退出一个页面时触发
    • 适合做清理性质的工作
  • error(Oberject Error) 每当组件方法抛出错误时执行

组件所在页面生命周期

在pageLifetimes节点中定义

  • show 组件所在页面被展示时执行
  • hide 组件所在页面被隐藏时执行
  • resize 组件所在页面尺寸变化时执行

插槽

在自定义组件的wxml结构中，可以提供一个<slot>节点（插槽），用于承载组件使用者提供的wxml结构

默认情况下只支持使用单个插槽，如果需要多个插槽，需要在options配置节点中使用multipleSlots设置为true

  • 多个插槽在定义时需要使用name属性进行区分
  • 在用户使用时需要用slot属性来指定对应的插槽

父子组件之间的通信

三种方式

  1. 属性绑定
  • 用zi于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//父组件wxml
<test count="count"></test>
<view>父 {{count}}</view>
//父组件js
data:{
	count:0
}

//子组件js
properties:{
	count:Number
}
//子组件wxml
<view>子 {{count}}</view>
  1. 事件绑定
  • 用于子组件向父组件传递数据，可以传递任意数据
1
2
3
4
//首先在父组件中定义要传递的方法
syncCount(e){
	//方法示例
}
1
2
//在父组件的wxml中为子组件绑定自定义事件事件（sync）以及对应的方法
<test count="{{count}}" bind:sync="syncCount"></test>
1
2
3
//然后在子组件js内部，调用this.triggerEvent('自定义事件名称',{参数对象})
//参数对象是指事件的参数
this.triggerEvent('sync',{value:tthis.properties.count})
1
2
3
4
5
6
//最后在父组件js中接收子组件传递过来的值
syncCount(e){
	this.setData({
    	count:e.detail.value
    })
}
  1. 获取组件实例
  • 在父组件中可通过this.selectComponent()获取子组件实例对象
  • 如此可以直接访问子组件的任意数据和方法
1
2
3
//父组件wxml
<test count="{{count}}" bind:sync="syncCount" class="child" id="c"></test>
<button bind:tap="getChild">获取子组件</button>
1
2
3
4
5
6
7
8
9
//父组件js
getChild(){
    //获取子组件对象，只能通过id选择器或者类选择器获取
	const child = this.selectComponent('.child')
    console.log(child) //可以在控制台中看到可以使用很多方法
    child.setData({  
    	count:child.properties.count+1 //实现在父组件中点击按钮，让子组件发生变化
    })
}

behaviors

behaviors是小程序中，用于实现组件代码共享的特征，类似vue.js中的”mixins”。

每个组件可以引用多个behavior，behavior之间也可以引用其它behavior。

image-20221116152758924

创建behavior

  1. 在根节点创建behaviors文件夹
  2. 在behaviors文件夹中创建js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
//behaviors共享的js文件
module.exports = Behavior ({
	data:{
        //数据
    },
    properties:{
    	//属性
    },
    methods:{
    	//方法
    }
    
})

导入并引用behavior

在组件中，使用require()方法导入需要的behavior，将导入的behavior实例对象挂载到behaviors数组节点中，即可生效。

1
2
3
4
5
6
const myBehavior = require("../../behaviors/my-behavior") //创建的js文件

Component({
	behaviors:[mybehavior],
    //其它节点
})

同名冲突处理规则

数据字段（data）重名

  • 若同名的数据字段都是对象类型，会进行对象合并；
  • 其余情况会进行数据覆盖，覆盖规则为： 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）

属性（properties）或方法（methods）重名

  1. 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
  2. 若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
  3. 在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法。

生命周期函数重名

  • 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
  • 对于同种生命周期函数和同字段 observers ，遵循如下规则：
    • behavior 优先于组件执行；
    • 被引用的 behavior 优先于 引用者 behavior 执行；
    • 靠前的 behavior 优先于 靠后的 behavior 执行；
  • 如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。