WXS
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。
可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。
wsx 在IOS设备上性能是JavaScript的2-20倍
内嵌式
<view>
<view>{{m1.toUpper(message)}}</view>
</view>
<wxs module="m1">
module.exports.toUpper = function(str){
return str.toUpperCase();
}
</wxs>
module=“属性值”
关联式
<view>
<view>{{m2.toLower(message)}}</view>
</view>
<wxs src="/utils/tools.wxs" module="m2"/>
在utils下创建文件tools.wxs
// wxs
function toLower(str){
return str.toLowerCase();
}
module.exports = {
toLower : toLower
// 起别名 : 方法名
}
在wxs文件中直接写方法,最后通过module.exports暴露出来
组件Components
组件相当于是自定义标签
组件创建:创建文件夹 – > 右键文件夹创建component
局部
局部配置只能在配置的页面上使用,单独在页面的JS文件中配置
在需要引用组件的页面的JSON文件中配置
{
"usingComponents": {
"my-com" : "/components/test1/test1"
}
}
wxml文件中引用
<view>
<my-com></my-com>
</view>
引用组件的页面会显示组件的wxml文件中的内容
全局
全局配置所有页面都可以用,在App.js中配置:
在windows同级下编写一下代码
"usingComponents": {
"my-com" : "/components/test1/test1"
}
组件的样式隔离
app.wxss 中的全局样式 对组件无效的
只有class选择器会有样式的隔离效果 id选择器 属性选择器 标签选择器 不受样式隔离限制
-
方式一:
在组件中的json文件下配置
{ "component": true, "usingComponents": {}, "styleIsolation": "isolated" }
-
方式二:
在组件的js文件中配置
options:{ styleIsolation : "isolated" }
属性值:
isolated
表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);apply-shared
表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;shared
表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了apply-shared
或shared
的自定义组件。(这个选项在插件中不可用。)
组件传值
组件要接收调用者传来的值,并显示到页面上,实现步骤:
在组件的js文件properties属性列表中定义参数名
properties: {
max : {
type : Number, // 定义参数类型
value : 20 // 默认值,若页面上没传参数,默认值为20
}
}
组件的wxml文件
<view class="classA">
<view>接收到的参数是:{{max+1}}</view>
</view>
引用组件的页面(组件的调用者)
<view>
<my-com max="10" ></my-com> // 传参的参数名="参数值"
</view>
调用页面上显示11,如果没传,则显示默认值 20 +1 = 21
组件的properties
在小程序 properties 和 data 的数据用法相同 都是可以读写的 但是
-
data更倾向于私有数据
-
properties 更倾向于存储对外接收到的数据
-
本质上没有区别
组件方法
组件方法与页面方法不同在于组件方法都需要定义在methods中
组件数据监听器
数据的监听 用于监听和响应任何的属性和数据字段的变化 ,从而执行特定的操作
eg:sum = a + b ; sum随着a和b的变化而发生改变
组件的wxml文件
<view>
{{a}} + {{b}} = {{sum}}
</view>
<button type="default" size="mini" bind:tap="addA" >A++</button>
<button type="default" size="mini" bind:tap="addB" >B++</button>
组件的js文件
/**
* 组件的初始数据
*/
data: {
sum : 0,
a : 0,
b : 0,
},
/**
* 组件的方法列表
*/
methods: {
addA(){
this.setData({
a : this.data.a +1
});
},
addB(){
this.setData({
b : this.data.b +1
});
}
},
// 监听器
observers:{
'a,b':function(a,b){
this.setData({
sum : a + b
})
}
}
监听器使用observers定义,与methods同级,写需要监听的数据'a,b'
,函数中写需要执行的操作;如果需要监听对象的属性,写对象名.属性名
纯数据字段
不需要渲染到页面的data字段;纯数据字段 有助于提升页面的更新性能
实现步骤:
-
定义纯数据字段规则
options与data同级
options:{ // 定义纯数据字段规则 pureDataPattern : /^_/ , // 指定所有以_开头的为纯数据字段 },
如果初始化数据以下划线开头,就是纯数据字段
-
定义初始化数据
// js data: { _n : true, m : false }
-
组件引用
组件的wxml文件
<rich-text nodes="<h1>{{_n}}</h1>"/> <rich-text nodes="<h1>{{m}}</h1>"/>
页面上会显示false,不会显示纯数据字段true
组件的生命周期函数
组件的生命周期
生命周期 | 参数 | 描述 | 最低版本 |
---|---|---|---|
created | 无 | 在组件实例刚刚被创建时执行 | 1.6.3 |
attached | 无 | 在组件实例进入页面节点树时执行 | 1.6.3 |
ready | 无 | 在组件在视图层布局完成后执行 | 1.6.3 |
moved | 无 | 在组件实例被移动到节点树另一个位置时执行 | 1.6.3 |
detached | 无 | 在组件实例被从页面节点树移除时执行 | 1.6.3 |
error | Object Error | 每当组件方法抛出错误时执行 | 2.4.1 |
组件所在页面的生命周期函数
生命周期 | 参数 | 描述 | 最低版本 |
---|---|---|---|
show | 无 | 组件所在的页面被展示时执行 | 2.2.3 |
hide | 无 | 组件所在的页面被隐藏时执行 | 2.2.3 |
resize | Object Size | 组件所在的页面尺寸变化时执行 | 2.4.0 |
routeDone | 无 | 组件所在页面路由动画完成时执行 | 2.31.2 |
注意:自定义 tabBar 的 pageLifetime 不会触发。
eg:组件的js文件
lifetimes:{
attached:function(){
console.log("在组件实例进入页面节点树时执行");
},
detached : function(){
console.log("在组件实例被从页面节点树移除时执行");
}
},
pageLifetimes:{
show: function() {
// 页面被展示
console.log("页面被展示");
},
hide: function() {
// 页面被隐藏
console.log("页面被隐藏");
},
resize: function(size) {
// 页面尺寸变化
console.log("页面尺寸变化");
}
}
组件插槽
与Vue中的插槽相似
单插槽
实现步骤:
在组建的wxml文件中定义插槽
<view>
<slot></slot>
</view>
调用组件的页面中
<my-com>
<component-tag-name>
<view>这是插槽的内容</view>
</component-tag-name>
</my-com>
多插槽
实现步骤:
-
在组件的配置文件中开启多插槽支持
组件的js文件
options:{ multipleSlots: true // 在组件定义时的选项中启用多slot支持 }
-
定义插槽
组件的wxml文件,需要给
<slot></slot>
标签name属性<view> <slot name="before"></slot> <view>------分割线---------</view> <slot name="after"></slot> </view>
-
调用页面
使用时需要使用
slot=""
说明是那个插槽<my-test2> <view slot="after">after</view> <view slot="before">before</view> </my-test2>
弹窗
页面提示
icon的合法值:
合法值 | 说明 |
---|---|
success | 显示成功图标,此时 title 文本最多显示 7 个汉字长度 |
error | 显示失败图标,此时 title 文本最多显示 7 个汉字长度 |
loading | 显示加载图标,此时 title 文本最多显示 7 个汉字长度 |
none | 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持 |
wx.showToast({
title: '提示',
icon: "success",
mask: true, // 不允许点击页面
duration : 5000 // 持续时间
})
模态对话框
带有取消和确定按钮的弹窗
wx.showModal({
title: '提示',
content: '确认要取消么',
complete: (res) => {
if (res.cancel) {
// 取消执行
}
if (res.confirm) {
// 确认执行
}
}
})
加载提示
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 提示的内容 | |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
eg:
wx.showLoading({
title: '加载中',
})
setTimeout(function () {
wx.hideLoading()
},2000)
注意:需要手动关闭
选项对话框
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
alertText | string | 否 | 警示文案 | |
itemList | Array.<string> | 是 | 按钮的文字数组,数组长度最大为 6 | |
itemColor | string | #000000 | 否 | 按钮的文字颜色 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success (res) {
// 输出选择的下标
console.log(res.tapIndex)
},
fail (res) {
console.log(res.errMsg)
}
})
滚动条
onPageScroll:页面滚动触发事件的处理函数
属性 | 类型 | 说明 |
---|---|---|
scrollTop | Number | 页面在垂直方向已滚动的距离(单位px) |
wx.pageScrollTo:将页面滚动到目标位置,支持选择器和滚动距离两种方式定位
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
scrollTop | number | 否 | 滚动到页面的目标位置,单位 px | |
duration | number | 300 | 否 | 滚动动画的时长,单位 ms |
selector | string | 否 | 选择器 | |
offsetTop | number | 否 | 偏移距离,需要和 selector 参数搭配使用,可以滚动到 selector 加偏移距离的位置,单位 px | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
案例:回到顶部按钮的实现
js文件:定义方法
data: {
no_scroll: true
},
goTop() {
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
}
},
onPageScroll(e){
if(e.scrollTop > 300){
this.setData({
no_scroll:false
})
}else{
this.setData({
no_scroll:true
})
}
}
wxml文件:
<view hidden="{{no_scroll}}" bind:tap="goTop" class="fix_bo">
↑
</view>
wxss文件:
.fix_bo{
width: 77rpx;
height: 77rpx;
opacity: .4;
border-radius: 100%;
background-color: black;
position: sticky;
bottom: 80rpx;
left: 87%;
color: white;
font-size: larger;
text-align: center;
line-height: 77rpx;
}