微信小程序基本使用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-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字段；纯数据字段 有助于提升页面的更新性能

实现步骤：

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot+Vue药品ADR不良反应智能监测系统源码

SpringBoot+Vue药品ADR不良反应智能监测系统源码

药品不良反应&#xff08;Adverse Drug Reaction&#xff0c;ADR&#xff09;是指合格药品在正常用法用量下出现的与用药目的无关的有害反应&#xff0c;不包括超说明书用药、药品质量问题等导致的不良后果。 ADR智能监测系统开发环境 ❀技术架构&#xff1a;B/S ❀开发语言&…
阅读更多...
补充一：C#中的Queue

补充一：C#中的Queue

队列是一种基本的数据结构&#xff0c;按照先进先出&#xff08;FIFO&#xff09;的原则组织元素。在队列中&#xff0c;新元素从队尾入队&#xff0c;而从队头出队&#xff0c;确保了先进入队列的元素首先被处理。这使得队列特别适合模拟排队、任务调度等场景。 在编程中&…
阅读更多...
深度剖析Redis：从基础到高级应用

深度剖析Redis：从基础到高级应用

目录 引言 1、 Redis基础 1.1 Redis数据结构 1.1.1 字符串&#xff08;String&#xff09; 1.1.2 列表&#xff08;List&#xff09; 1.1.3 集合&#xff08;Set&#xff09; 1.1.4 散列&#xff08;Hash&#xff09; 1.1.5 有序集合&#xff08;Sorted Set&#xff09;…
阅读更多...
常见类型的yaml文件如何编写？--kind: Job|CronJob

常见类型的yaml文件如何编写？--kind: Job|CronJob

本次介绍两个关联度很高的类型&#xff0c;Job和CronJob。 Job基本说明 在 Kubernetes 中&#xff0c;Job 是一种用于运行一次性任务的资源对象。它用于确保在集群内部执行某个任务&#xff0c;即使任务运行失败或其中一个 Pod 发生故障时&#xff0c;也会进行重试。Job 可以…
阅读更多...
CRM系统进行市场营销，这些功能可以派上用场。

CRM系统进行市场营销，这些功能可以派上用场。

现如今的企业想要做好营销&#xff0c;不仅仅依赖于一句玄之又玄的slogan亦或是电子邮件的狂轰乱炸。要想做好市场活动营销需要一个前提——那就是CRM管理系统发挥作用的地方。但CRM系统关于营销的功能太多了——对于不太了解的人来说很容易不知所措。那么&#xff0c;CRM系统做…
阅读更多...
如何上传苹果ipa安装包？

如何上传苹果ipa安装包？

目录 引言 摘要 第二步&#xff1a;打开appuploader工具 第二步&#xff1a;打开appuploader工具&#xff0c;第二步&#xff1a;打开appuploader工具 第五步&#xff1a;交付应用程序&#xff0c;在iTunes Connect中查看应用程序 总结 引言 在将应用程序上架到苹果应用…
阅读更多...
PTA——换硬币

PTA——换硬币

将一笔零钱换成5分、2分和1分的硬币&#xff0c;要求每种硬币至少有一枚&#xff0c;有几种不同的换法&#xff1f; 输入格式: 输入在一行中给出待换的零钱数额x∈(8,100)。 输出格式: 要求按5分、2分和1分硬币的数量依次从大到小的顺序&#xff0c;输出各种换法。每行输出…
阅读更多...
四道面试题

四道面试题

一.网络的七层模型 网络的七层模型&#xff0c;也被称为OSI七层协议模型&#xff0c;是一种用于理解和描述网络通信过程的概念模型。这个模型将网络通信过程划分为七个层次&#xff0c;从低到高分别是&#xff1a;物理层、数据链路层、网络层、传输层、会话层、表示层和应用层…
阅读更多...
DUET: Cross-Modal Semantic Grounding for Contrastive Zero-Shot Learning论文阅读

DUET: Cross-Modal Semantic Grounding for Contrastive Zero-Shot Learning论文阅读

文章目录 摘要1.问题的提出引出当前研究的不足与问题属性不平衡问题属性共现问题 解决方案 2.数据集和模型构建数据集传统的零样本学习范式v.s. DUET学习范式DUET 模型总览属性级别对比学习正负样本解释&#xff1a; 3.结果分析VIT-based vision transformer encoder.消融研究消…
阅读更多...
【XR806开发板试用】+ FreeRtos开发环境搭建

【XR806开发板试用】+ FreeRtos开发环境搭建

获取SDK SDK可以通过官网直接下载。 下载完成之后&#xff0c;通过gzip命令解压文件 gzip -d xr806_sdk.tar.gz 获取编译链工具 还是按照官网操作指南&#xff0c;下载 gcc-arm-none-eabi-8-2019-q3-update 下载之后进行解压&#xff0c;同理。 注意修改GCC路径&#xff0c…
阅读更多...
既然所有ERP系统都很烂,那创业公司有没有机会?

既然所有ERP系统都很烂,那创业公司有没有机会?

既然所有ERP系统都烂,那创业公司有没机会? 得一点点把这问题捋顺了再回答—— 先说说“都很烂”这个判断是否准确谈谈国产ERP和国际ERP厂商&#xff0c;新创公司是否有优势&#xff1f;最后聊一下创业本身&#xff0c;如何创业、风险如何…… 一些人可能对传统的ERP系统感到…
阅读更多...
初识 Elasticsearch 应用知识，一文读懂 Elasticsearch 知识文集(2)

初识 Elasticsearch 应用知识，一文读懂 Elasticsearch 知识文集(2)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…
阅读更多...
MySQL进阶篇（三） 索引

MySQL进阶篇（三） 索引

一、插入数据 1. insert &#xff08;1&#xff09;优化方案一&#xff0c;批量插入数据 Insert into tb_test values(1,Tom),(2,Cat),(3,Jerry);&#xff08;2&#xff09;优化方案二&#xff0c;手动控制事务 start transaction; insert into tb_test values(1,Tom),(2,Cat…
阅读更多...
JS栈和堆：数据是如何存储的

JS栈和堆：数据是如何存储的

JS栈和堆&#xff1a;数据是如何存储的 背景JavaScript 是什么类型的语言JavaScript 的数据类型内存空间栈空间和堆空间再谈闭包 背景 JS有多种数据类型&#xff1a;数字型&#xff0c;字符串型&#xff0c;数组型等&#xff0c;虽然 JavaScript 并不需要直接去管理内存&#…
阅读更多...
Apache ActiveMQ RCE CNVD-2023-69477 CVE-2023-46604

Apache ActiveMQ RCE CNVD-2023-69477 CVE-2023-46604

漏洞简介 Apache ActiveMQ官方发布新版本&#xff0c;修复了一个远程代码执行漏洞&#xff0c;攻击者可构造恶意请求通过Apache ActiveMQ的61616端口发送恶意数据导致远程代码执行&#xff0c;从而完全控制Apache ActiveMQ服务器。 影响版本 Apache ActiveMQ 5.18.0 before …
阅读更多...
《系统架构设计师教程（第2版）》第4章-信息安全技术基础知识-01-信息安全基础知识

《系统架构设计师教程（第2版）》第4章-信息安全技术基础知识-01-信息安全基础知识

文章目录 1. 信息安全的概念1.1 信息安全的5个基本要是1.2 信息安全的范围1）设备安全2）数据安全3）内容安全4）行为安全1.3 信息安全的意义2. 信息存储安全2.1 信息使用的安全1）用户的标识与验证2）用户存取权限限制2.2 系统安全监控2.3 计算机病毒防治3. 网络安全3.1 网络安…
阅读更多...
linux kernel：devres模块架构分析

linux kernel：devres模块架构分析

参考文档&#xff1a; https://www.kernel.org/doc/html/latest/driver-api/driver-model/devres.html https://www.cnblogs.com/sammei/p/3498052.html devres in linux driver devres: Managed Device Resource device resource managementdevres_alloc()动态申请内存分配…
阅读更多...
好包不等待：用 pnpm 加速你的项目依赖

好包不等待：用 pnpm 加速你的项目依赖

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 好包不等待&#xff1a;用 pnpm 加速你的项目依赖 前言什么是pnpm背景和诞生原因&#xff1a;与传统 npm 安装方式的区别&#xff1a; 基础用法安装依赖&#xff1a;卸载依赖&#xff1a;安装全局依赖…
阅读更多...
2024百元蓝牙耳机测评推荐，百元超强的开放式蓝牙耳机合集

2024百元蓝牙耳机测评推荐，百元超强的开放式蓝牙耳机合集

现在的蓝牙耳机市场真的是太卷了&#xff0c;各种品牌、各种型号让人挑得眼花缭乱&#xff0c;但你知道吗&#xff1f;其实在百元价位里也有很多好货。今天&#xff0c;我就来给大家好好测评几款2024年的百元级蓝牙耳机&#xff0c;看看哪些是真正的性价比之王&#xff0c;开放…
阅读更多...
基于JAVA的康复中心管理系统 开源项目

基于JAVA的康复中心管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…
阅读更多...
最新文章

Copyright @ 2022~2023