微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化

这篇具有很好参考价值的文章主要介绍了微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.自定义组件

1.创建组件

①在项目的根目录中,鼠标右键,创建 components -> test 文件夹

②在新建的 components -> test 文件夹上,鼠标右键,点击"新建 Component "

③键入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为 js , json ,. wxml 和. wxss

注意,为了保证目录结构的清晰,建议把不同的组件存放到单独目录中,例如:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

2.引用组件

组件的引用方式分为"局部引用"和"全局引用",顾名思义:

.局部引用:组件只能在当前被引用的页面内使用

.全局引用:组件可以在每个小程序页面中使用

3.局部引用组件

在页面的 json 配置文件中引用组件的方式,叫做"局部引用"。示例代码如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

显示效果如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

4.全局引用组件

在app。json全局配置文件中引用组件的方式,叫做“全局引用”,示例代码如下

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

5.全局引用 VS 局部引用

根据组件的使用频率和范围,来选择合适的引用方式:

.如果某组件在多个页面中经常被用到,建议进行"全局引用"

.如果某组件只在特定的页面中被用到,建议进行"局部引用"

6.组件和页面的区别

从表面来看,组件和页面都是由 js 、 json 、. wxml 和. wxss 这四个文件组成的。但是,组件和页面的 js 与 json 文件有明显的不同:

.组件的. json 文件中需要声明" component ": true 属性

.组件的 js 文件中调用的是 Component ()函数

.组件的事件处理函数需要定义到 methods 节点中

二.样式

1.组件样式隔离

默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的 UI 结构,如图所示:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

.组件 A 的样式不会影响组件 C 的样式

.组件 A 的样式不会影响小程序页面的样式

.小程序页面的样式不会影响组件 A 和 C 的样式

好处:

防止外界的样式影响组件内部的样式

防止组件的样式破坏外界的样式

2.组件样式隔离的注意点

📌.app.wxss中的全局样式对组件无效

📌.只有 class 选择器会有样式隔离效果, id 选择器、属性选择器、标签选择器不受样式隔离的影响

例如:在app.json中写入时:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档
微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

标签选择器会改变样式。

建议:

在组件和引用组件的页面中建议使用 class 选择器,不要使用 id 、属性、标签选择器!

3.修改组件的样式隔离选项

默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 stylelsolation 修改组件的样式隔离选项,用法如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

4.stylesolation的可选值

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

三.数据,方法和属性

1.data数据

在小程序组件中,用于组件模板渲染的私有数据,需要定义到data节点中,示例如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

2.methods方法

在小程序组件中,事件处理函数和自定义方法需要定义到methods节点中,示例代码如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

3.properties属性

在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据,示例代码如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档
微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

页面.wxml中写入:

<my-test1 max="9"></my-test1>

当我们判断当按钮按倒9的时候还能否自增的话,需要if进行判断。

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

4.data和 properties 的区别

在小程序的组件中, properties 属性和 data 数据的用法相同,它们都是可读可写的,只不过:

. data 更倾向于存储组件的私有数据

. properties 更倾向于存储外界传递到组件中的数据

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档
微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

二者指向同一个

5.使用 setData 修改 properties 的值

由于 data 数据和 properties 属性在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染,或使用 setData 为 properties 中的属性重新赋值,示例代码如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

四.数据监听器

1.什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中,数据监听器的基本语法格式如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

2.数据监听器的基本用法

组件的UI结构如下:

<view> {{n1}} + {{n2}} = {{sum}} </view>
<button  bindtap="addN1">n1+1</button>
<button  bindtap="addN2">n2+1</button>

组件的js文件代码:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

实例效果:

data: {
    n1: 0,
    n2: 0,
    sum: 0
  },
methods: {
    addN1(){
      this.setData({
        n1: this.data.n1 +1
      })
    },
    addN2(){
      this.setData({
        n2: this.data.n2 +1
      })
    },

  },
  observers:{
    'n1,n2' : function (newN1,newN2) {
      this.setData({
        sum : newN1 + newN2
      })
    }
  }

界面效果如下:

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

3.监听对象属性的变化

数据监听器支持监听对象中单个多个属性的变化,实例语法如下:文章来源地址https://www.toymoban.com/news/detail-616693.html

微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化,微信小程序,微信小程序,小程序,开发语言,前端,Powered by 金山文档

到了这里,关于微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序- component 自定义组件及引用

    一、自定义组件 1、根目录下创建一个 Components 文件夹 2、在 Components 文件夹中创建一个文件夹(文件夹名称为组件名称),例如组件名称为Myheader  3、点击Myheader 文件夹,右键选择 新建Component, 并命名为Myheader   4、在 Myheader.wxml 和 Myheader.scss 中写对应的内容 二、引用自定

    2024年02月04日
    浏览(42)
  • 【微信小程序】创建动态组件和引用的方法

    实战内容:创建微信小程序动态组件并在其他页面中引用该组件 欢迎关注收藏订阅专栏!!! 提示:该项目只用于个人实战,不应用于任何商业用途。 创建动态组件 局部引用组件 全局引用组件 我是先选择官方的基础模板进行创建一个 微信小程序 , 在项目创建成功后,在

    2024年02月09日
    浏览(37)
  • 微信小程序switch开关组件修改样式(大小,颜色)

    以上尺寸根据你的具体情况来调整

    2024年02月11日
    浏览(60)
  • 微信小程序原生button组件使用并修改样式

     想使用原生button组件,但是想使用不同样式 注意type使用得type必须和修改时选择器样式(button[type=default])一样,才能对其修改样式,否则样式不会被修改 如果是多端适配,需要使用type为default再修改样式  

    2024年02月14日
    浏览(57)
  • 微信小程序 修改三方组件中的自带样式

    众所周知,微信小程序会引用诸如vant,weiui等三方组件,当我们想要对组件自带样式进行修改的时候该怎么做呢? 1.在调试器中找到想要修改样式的组件的class类名,在对应的wxss中添加样式,此时样式未生效; 2.官方文档中提到可以在externalclass中添加一个类名暴露给父组件,

    2024年02月12日
    浏览(54)
  • 微信小程序修改原生组件样式(uni-app)

    微信小程序修改原生组件样式 全局修改,直接将修改的样式写在全局的样式文件中; 特殊情况:修改swiper指示点样式时,需要包裹在swiper的样式选择器下才生效。 直接将下列代码放在全局样式中是不会生效的,需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

    2024年02月05日
    浏览(76)
  • 微信小程序自定义字体样式、字体修改、第三方字体设置

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(79)
  • 微信小程序修改radio的样式,以及获取radio选择的值(自定义radio样式)

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年01月15日
    浏览(51)
  • 微信小程序Vant Weapp-Card 商品卡片自定义修改样式

          商品卡片,用于展示商品的图片、价格等信息。       官方文档给出的配置项对大多数人来说都太官方,这是官方给出的。       高级用法               可以通过插槽添加定制内容。         在官方文档中给出的示例配置中,你根本无法调整中部宽度。  van-card

    2024年03月24日
    浏览(61)
  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法,是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式,再用普通的动态class判断改变就可以了。 例如:改变背景颜色 参考:微信小程序如何动态修改page标签的css样式 设置id时需要注意下:id 的设置要求是字母

    2024年02月05日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包