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

2024-01-11 06:36
文章标签 使用 程序 组件 微信 基本 滚动条 弹窗 wxs

本文主要是介绍微信小程序基本使用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;
}

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

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

相关文章

C++ Sort函数使用场景分析

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序
阅读更多...
Java String字符串的常用使用方法

Java String字符串的常用使用方法

《JavaString字符串的常用使用方法》String是JDK提供的一个类,是引用类型,并不是基本的数据类型,String用于字符串操作,在之前学习c语言的时候,对于一些字符串,会初始化字符数组表... 目录一、什么是String二、如何定义一个String1. 用双引号定义2. 通过构造函数定义三、St
阅读更多...
Python Faker库基本用法详解

Python Faker库基本用法详解

《PythonFaker库基本用法详解》Faker是一个非常强大的库,适用于生成各种类型的伪随机数据,可以帮助开发者在测试、数据生成、或其他需要随机数据的场景中提高效率,本文给大家介绍PythonF... 目录安装基本用法主要功能示例代码语言和地区生成多条假数据自定义字段小结Faker 是一个 python
阅读更多...
Pydantic中Optional 和Union类型的使用

Pydantic中Optional 和Union类型的使用

《Pydantic中Optional和Union类型的使用》本文主要介绍了Pydantic中Optional和Union类型的使用,这两者在处理可选字段和多类型字段时尤为重要,文中通过示例代码介绍的... 目录简介Optional 类型Union 类型Optional 和 Union 的组合总结简介Pyd
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
使用Python自建轻量级的HTTP调试工具

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建
阅读更多...
使用Python实现一键隐藏屏幕并锁定输入

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Linux中的计划任务(crontab)使用方式

Linux中的计划任务(crontab)使用方式

《Linux中的计划任务(crontab)使用方式》：本文主要介绍Linux中的计划任务(crontab)使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言1、linux的起源与发展2、什么是计划任务（crontab）二、crontab基础1、cro
阅读更多...
kotlin中const 和val的区别及使用场景分析

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2