微信小程序基本使用2:wxs,组件的使用以及弹窗、滚动条

2024-01-11 06:36

本文主要是介绍微信小程序基本使用2:wxs,组件的使用以及弹窗、滚动条,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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选择器 属性选择器 标签选择器 不受样式隔离限制

  1. 方式一:

    在组件中的json文件下配置

    {"component": true,"usingComponents": {},"styleIsolation": "isolated"
    }
    
  2. 方式二:

    在组件的js文件中配置

    options:{styleIsolation : "isolated"
    }
    

属性值:

  • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
  • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
  • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-sharedshared 的自定义组件。(这个选项在插件中不可用。)

组件传值

组件要接收调用者传来的值,并显示到页面上,实现步骤:

在组件的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字段;纯数据字段 有助于提升页面的更新性能

实现步骤:

  1. 定义纯数据字段规则

    options与data同级

    options:{// 定义纯数据字段规则pureDataPattern : /^_/ ,   // 指定所有以_开头的为纯数据字段
    },
    

    如果初始化数据以下划线开头,就是纯数据字段

  2. 定义初始化数据

    // js
    data: {_n : true,m : false
    }
    
  3. 组件引用

    组件的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
errorObject Error每当组件方法抛出错误时执行2.4.1

组件所在页面的生命周期函数

生命周期参数描述最低版本
show组件所在的页面被展示时执行2.2.3
hide组件所在的页面被隐藏时执行2.2.3
resizeObject 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>

多插槽

实现步骤:

  1. 在组件的配置文件中开启多插槽支持

    组件的js文件

    options:{multipleSlots: true  // 在组件定义时的选项中启用多slot支持
    }
    
  2. 定义插槽

    组件的wxml文件,需要给<slot></slot>标签name属性

    <view><slot name="before"></slot><view>------分割线---------</view><slot name="after"></slot>	
    </view>
    
  3. 调用页面

    使用时需要使用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) {// 确认执行}}
})

加载提示

属性类型默认值必填说明
titlestring提示的内容
maskbooleanfalse是否显示透明蒙层,防止触摸穿透
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

eg:

wx.showLoading({title: '加载中',
})
setTimeout(function () {wx.hideLoading()
},2000)

注意:需要手动关闭

选项对话框

属性类型默认值必填说明
alertTextstring警示文案
itemListArray.<string>按钮的文字数组,数组长度最大为 6
itemColorstring#000000按钮的文字颜色
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
wx.showActionSheet({itemList: ['A', 'B', 'C'],success (res) {// 输出选择的下标console.log(res.tapIndex)},fail (res) {console.log(res.errMsg)}
})

滚动条

onPageScroll:页面滚动触发事件的处理函数

属性类型说明
scrollTopNumber页面在垂直方向已滚动的距离(单位px)

wx.pageScrollTo:将页面滚动到目标位置,支持选择器和滚动距离两种方式定位

属性类型默认值必填说明
scrollTopnumber滚动到页面的目标位置,单位 px
durationnumber300滚动动画的时长,单位 ms
selectorstring选择器
offsetTopnumber偏移距离,需要和 selector 参数搭配使用,可以滚动到 selector 加偏移距离的位置,单位 px
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

案例:回到顶部按钮的实现

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;
}

这篇关于微信小程序基本使用2:wxs,组件的使用以及弹窗、滚动条的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/593469

相关文章

Python使用FFmpeg实现高效音频格式转换工具

《Python使用FFmpeg实现高效音频格式转换工具》在数字音频处理领域,音频格式转换是一项基础但至关重要的功能,本文主要为大家介绍了Python如何使用FFmpeg实现强大功能的图形化音频转换工具... 目录概述功能详解软件效果展示主界面布局转换过程截图完成提示开发步骤详解1. 环境准备2. 项目功能结

SpringBoot使用ffmpeg实现视频压缩

《SpringBoot使用ffmpeg实现视频压缩》FFmpeg是一个开源的跨平台多媒体处理工具集,用于录制,转换,编辑和流式传输音频和视频,本文将使用ffmpeg实现视频压缩功能,有需要的可以参考... 目录核心功能1.格式转换2.编解码3.音视频处理4.流媒体支持5.滤镜(Filter)安装配置linu

Redis中的Lettuce使用详解

《Redis中的Lettuce使用详解》Lettuce是一个高级的、线程安全的Redis客户端,用于与Redis数据库交互,Lettuce是一个功能强大、使用方便的Redis客户端,适用于各种规模的J... 目录简介特点连接池连接池特点连接池管理连接池优势连接池配置参数监控常用监控工具通过JMX监控通过Pr

apache的commons-pool2原理与使用实践记录

《apache的commons-pool2原理与使用实践记录》ApacheCommonsPool2是一个高效的对象池化框架,通过复用昂贵资源(如数据库连接、线程、网络连接)优化系统性能,这篇文章主... 目录一、核心原理与组件二、使用步骤详解(以数据库连接池为例)三、高级配置与优化四、典型应用场景五、注意事

使用Python实现Windows系统垃圾清理

《使用Python实现Windows系统垃圾清理》Windows自带的磁盘清理工具功能有限,无法深度清理各类垃圾文件,所以本文为大家介绍了如何使用Python+PyQt5开发一个Windows系统垃圾... 目录一、开发背景与工具概述1.1 为什么需要专业清理工具1.2 工具设计理念二、工具核心功能解析2.

Linux系统之stress-ng测压工具的使用

《Linux系统之stress-ng测压工具的使用》:本文主要介绍Linux系统之stress-ng测压工具的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、理论1.stress工具简介与安装2.语法及参数3.具体安装二、实验1.运行8 cpu, 4 fo

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

Java使用MethodHandle来替代反射,提高性能问题

《Java使用MethodHandle来替代反射,提高性能问题》:本文主要介绍Java使用MethodHandle来替代反射,提高性能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录一、认识MethodHandle1、简介2、使用方式3、与反射的区别二、示例1、基本使用2、(重要)

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、