小程序(三)

十三、自定义组件

(二)数据方法声明位置

在js文件中

A、数据声明位置:data中

B、方法声明位置methods中,这点和普通页面不同

Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {isChecked: false},/*** 组件的方法列表*/methods: {//更新复选框的值updateValue(){this.setData({isChecked:!this.data.isChecked})console.log(this.data.isChecked)}}
})

(三)Properties

Properties是指组件的对外属性,主要用来接受组件使用者传递给组件内部的数据,和data一同用于组件的模版渲染。

注意:

  1. 设置属性类型需要使用type属性,属性类型是必填项,value属性为默认值。
  2. 属性类型只可以为五种,分别是:String、Number、Boolean、Object、Array。也可以为null表示不限制类型。

我们现在要将数据传递给组件,然后再组件中显示:

  • 在组件中声明要接收的数据和默认值
  properties: {firstValue:{value:'我是默认值',//我是默认值style: String},age:{value:23,style: Number}},
  • 在组件中使用
<view>{{firstValue}}、{{age}}</view>
  • 在页面中使用并传递数据
<my_view firstValue="杨大炮" age="23"></my_view>

(四)插槽(slot)

在使用基础组件时,可以在组件中间书写基础组件,这些基础组件会根据在组件中声明的slot位置,插入组件进行显示。

插槽分为默认插槽和具名插槽。如果要开启具名插槽需要再组件js中开启配置项:

options:{multipleSlots:true   },

然后多个插槽需要增加name属性以区分,在页面中使用时,使用slot属性来确定插入位置。

下面例子:

  • 开启具名插槽(见上)
  • 声明插槽位置:
<text>我是组件中的内容</text>
<view>占位</view>
<slot name="topSlot"></slot>
<text>我是组件中的内容</text>
<view>占位</view>
<slot name="bottomSlot"></slot>
  • 页面中使用,并插入组件
<my_view>
<text slot="topSlot">长安陌上无穷树,</text>
<view></view>
<text slot="bottomSlot">唯有垂杨管别理。</text>
</my_view>

(五)自定义组件数据监视

要在js文件中使用observers属性声明要监视的属性:

  • key:要监视的属性名、value:一个函数,会传入一个参数,参数值是最新改变的值。
observers:{'people.name':function(newValue){//监视器可以监视对象内部,或者数组内部的数据变化console.log(newValue);},num: function(newValue){//监视数据时会传入变化后的数据。console.log(newValue);}
},

数据:

data: {people:{name:"陈大炮",age: 22},num: 23},

可见,监视属性也可以监视对象属性的变化。监视多个属性可以如上声明多个key:value,也可以如下面方式。

  • 如果要统一监视多个属性
observers:{'people.name, num':function(newValue,newValueTwo){//监视器可以监视对象内部,或者数组内部的数据变化console.log(newValue,newValueTwo);},
  • 监视对象中所有属性
observers:{'people.**':function(newPeople){//参数传入的是新的对象console.log(newPeople);},

(六)子组件向父组件传递数据

子组件通过triggerEvent方法将自定义事件名,和要传递的数据,页面组件(父组件)使用bind触发子组件传递的事件,则子组件传递的数据就会被放在父组件的event对象的detail属性中。

1、组件中绑定点击事件,触发后将自定义事件传递到父组件

<button type="primary" bind:tap="sendData">发送数据</button>

2、sendData方法如下:

sendData(){
//第一个参数是要发送给父组件的自定义事件名字
//第二个参数是要发送的数据this.triggerEvent('giveData',this.data.people);}  

3、在父组件中绑定自定义事件,并自定义方法处理得到的子组件状态

<scanme bind:giveData="getData"></scanme>

4、getData方法逻辑如下:

getData(event){//得到的子组件状态保存在event.detail中,detail是自定义事件的属性值console.log(event.detail);}

(七)获取子组件对象

获取子组件对象后,就可以获取子组件对象的所有数据和方法,非常的奈斯!父组件通过调用this.selectComponent方法获取子组件对象。

1、给子组件定义class属性或者id属性

<scanme bind:giveData="getData" class="son"></scanme>

2、通过函数获取子组件对象

<button bind:tap="getMySon" type="warn" plain>获取我的Son</button>
getMySon(){let mySon = this.selectComponent(".son");//this.selectComponent("#son");//也可以使用ID选择器console.log(mySon);}

(八)组件的生命周期

生命周期常用的有:created、attached、detached;show、

hide(关于组件所在页面的生命周期)

lifetimes:{//创建组件之后执行的函数created(){//这里不能调用setData函数,但是可以声明组件要使用的属性,供后续生命周期函数使用var smallName = "";this.setData({smallName:"天下无双,谁与争锋!"}) //无效,但属性仍存在},//组件准备完毕,挂在到页面后执行的函数//1、这里可以使用setData函数,并且可以使用created函数中声明的属性attached(){this.setData({'people.name':this.data.smallName,})},//组件被销毁,会调用该函数detached(){console.log("我是你的组件,我被你销毁了,啊啊!");},//组件所在页面从后台切前台的时候被调用show(){console.log("我被人从后台切到前台了!");},//组件被从前台切到后台,或者切换到其他tabBar页面时会被调用!hide(){console.log("我被人从后台切到前台了!");}}
  • 如何模拟组件被销毁?
<scanme wx:if="{{isShow}}"> </scanme>
<!--通过函数改变isShow的值即可,控制销毁还是重建!-->
<button bind:tap="destroyComponent">销毁组件</button>

(九)使用Component开发页面(Page)

Pages文件夹中的页面中js中Page可以用Component来代替,这样也可以开发页面,使用组件开发页面可以实现更强大的功能!

1、若用此方式,配置项中要和组件的配置项一致,同时json文件中一定要有usingComponent配置项

2、js文件中声明的方法要跟Component一样放在methods配置项中

3、可以使用Properties配置项来接收从其他页面跳转过来时的数据

  • Component({methods:{//方法应该放在此处},data:{isShow: true //控制组件的生死!},//使用properties来接收从其他页面跳转过来的数据properties:{name:String,age: Number,},//监视页面,当数据发生变化时,从控制台展示数据observers:{"name,age":function(newName,newAge){console.log(newName,newAge);}}})

    (十)组件逻辑的复用

如果我们创建的很多组件中都有相同的逻辑,将一样的逻辑多次书写,不仅会造成内容的重复,造成代码冗余,更重要的是咱们累呀!哈哈!

使用behavior可以实现组件代码复用;这里假设我们要在组件scanyou中使用组件scanme的逻辑。

一个behavior中可以包含多个属性、方法、声明周期函数等(一句话,组件js中有的,这里都可以有)

1、将要复用的代码提取到behavior.js文件(该文件需要自己创建)中

const behavior =Behavior({data: {people:{name:"陈大炮",age: 22},num: 23},
observers:{},/*** 组件的方法列表*/methods: {sendData(){this.triggerEvent('giveData',this.data.people);}   },lifetimes:{//创建组件之后执行的函数created(){//这里不能调用setData函数,但是可以声明组件要使用的属性,供后续生命周期函数使用var smallName = "";this.setData({smallName:"天下无双,谁与争锋!"}) //无效,但属性仍存在},//组件准备完毕,挂在到页面后执行的函数//1、这里可以使用setData函数,并且可以使用created函数中声明的属性attached(){this.setData({'people.name':this.data.smallName,})},//组件被销毁,会调用该函数detached(){console.log("我是你的组件,我被你销毁了,啊啊!");},//组件所在页面从后台切前台的时候被调用show(){console.log("我被人从后台切到前台了!");},//组件被从前台切到后台,或者切换到其他tabBar页面时会被调用!hide(){console.log("我被人从后台切到前台了!");}}
});
//暴露
export default behavior;

2、导入到要使用的组件中

import behavior from "./behavior";// components/scanme/scanme.js
Component({//使用behaviors:[behavior]
})

3、注意点:

        (1)当组件内properties、data中单层属性或者方法与behaviors属性、方法发生冲突时,以组件内部属性值为主(就近原则

        (2)当有对象属性发生冲突时,会组合对象中的属性,成为一个新的对象。

        (十一)引入外部样式

当页面使用某个组件,想要将自己的样式应用到组件上时,需要用到外部样式!

1、在组件js文件中声明,接受到外部样式后的命名:

  //2、使用外部样式,当组件被使用时通过open-class传入外部样式externalClasses:['open-class']

2、在父组件(页面组件)中将自己的样式传入(类名):

<scanme open-class="out-div"> </scanme>

3、在组件中要用到样式之地使用open-class作为类名即可:

<text class="open-class">{{people.name}}</text>

问题:当自己样式和外部样式发生冲突应该如何抉择?

解答:没有规定,需要声明优先级来解决,这里将外部优先级提高:

        两个冲突样式:

/* components/scanme/scanme.wxss */
.in-color{color: yellow  !important/*这里给内部样式声明了优先级*/
}/**index.wxss**/.out-div{color:green
}

故,上面例子,如果两者同时应用了,则以声明优先级的in-color类对应的属性为主!

(十二)使用npm引入外部包

前情提要:小程序现在支持通过npm下载的第三方包(前提是开发者要遵循小程序npm包开发标准),但是下载后的npm包在node_modules中的内容不会被小程序编译,上传,使用,故在使用npm下载完包后,还要多出一步构建的步骤:

1、初始化npm对项目的构建:

npm init -y
  • 完成后,项目中会多出如下三个文件:package.json 、package-lock.json 、node_modules

2、使用npm安装vant-webapp组件(该组件仅举例,其支持小程序)

 npm i @vant/weapp -S --production

3、点击工具栏构建按钮,构建:

  • 构建完成后,会在项目根目录下生成文件夹miniprogram_npm,其中是构建后的项目包。

(十三)复杂项目下目录结构的整理

当我们的小程序项目大小达到一定规模之后,一定需要对文件夹进行整理,将核心代码放到一个文件夹中等等。这时候我们就需要在project.config.json中进行配置:

首先我们需要将相关文件夹都放在miniprogram中,然后把如下文件夹都移进去作为项目的源码。

这时,小程序当然会报错!因为我们变换结构之后,没有告诉项目,新的项目结构逻辑。

  • 更改配置文件project.json如下:
"miniprogramRoot": "miniprogram/", 
"setting": {"packNpmManually": true,    "packNpmRelationList": [{"packageJsonPath": "./package","miniprogramNpmDistDir": "./miniprogram"}]

后两项配置意思为指定npm包json路径,和项目构建后npm包存放位置。packNpmManually意味开启自定义npm包路径。miniprogramRoot指定跟路径所在位置。

(十四)使用组件库(vant)

该组件库是有赞团队开发的使用于小程序的组件库。上面已经将该库引入并npm构建完毕了!

A、图片组件

下面我们参考文档中图片组件内容进行演示​​​​​​​Vant Weapp - 轻量、可靠的小程序 UI 组件库

1、引入

"usingComponents": {"van-image": "@vant/weapp/image/index"
}

2、使用

<!-- 这里注意,src以项目跟路径为/,则要使用静态图片不需要./直接/即可 -->
<van-image width="333" height="250" src="/static/suolong.jpg" />

3、圆角

<van-image width="333" height="250" 
round
src="/static/suolong.jpg" />

4、利用插槽使用加载中组件

 "van-loading": "@vant/weapp/loading/index"

         4.1、在组件中添加属性,并使用加载组件:

<van-image width="333" height="250" 
round
use-loading-slot
src="/static/suolong.jpg" >
<van-loading slot="loading" type="spinner" size="20" vertical />
</van-image>

5、绑定点击事件

<van-image width="333" height="250" 
src="/static/suolong.jpg" 
bind:click="showMeInto">
</van-image>
showMeInto(){console.log("我最喜欢02了!")}

B、按钮组件

使用步骤略过,这里重点介绍如何使用外部样式引入,参考:Vant Weapp - 轻量、可靠的小程序 UI 组件库

1、首先关闭最新小程序样式,因为小程序最新样式无法完全覆盖。app.js中删除如下选项:

 "style": "v2",

 2、根据文档使用custom-class传入页面需要组件实现的属性:

<van-button type="primary" custom-class="me">主要按钮</van-button>
.me{background-color: yellow;
}

这样就可以应用外部属性了。

注意:若要在组件中使用vant则需要关闭组件的样式隔离,在js文件中将:

  // 解除样式隔离options:{styleIsolation:'shared'},

因为解除了样式隔离,所以要注意,不要让组件被页面同名样式污染

3、可以使用全局变量来应用样式:

首先在app.wxss中声明全局变量:

page{--color: green;
}

在局部样式中使用:

  color: var(--color) !important;

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

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

相关文章

在RK3588开发板使用FFMpeg 结合云服务器加SRS实现摄像头数据推流到云端拱其他设备查看

今天测试了一把在开发板把摄像头数据推流到云端服务器&#xff0c;然后给其他电脑通过val软件拉取显示摄像头画面&#xff0c;浅浅记录一下大概步骤 1.开发板端先下载ffmpeg apt install ffmpeg2.云服务器先安装SRS的库 云服务器我使用ubuntu系统&#xff0c;SRS是个什么东西&…

优雅处理Python 使用xlrd 读取 Excel 报错:xlrd.compdoc.CompDocError

在用python xlrd库读取excel时&#xff0c;有时候会遇到 xlrd.compdoc.CompDocError报错。 其实注释掉库种raise的那几行&#xff0c;可以是可以&#xff0c;但是要修改库文件&#xff0c;并不好。 最好的方式是&#xff1a; wb open_workbook(fpath, formatting_infoTrue…

Mujoco210 和 Mujoco-py 在 Ubuntu22.04 下的安装

mujoco和mujoco-py的关系:mujoco是一个物理引擎,主要应用于强化学习和最优化控制领域。mujoco-py是mujoco编程的 Python 接口,由OpenAI Gym开发,可以使用mujoco_py方便地调用mujoco的API。 mujoco官网: https://mujoco.org/ 1.安装 Mujoco210 1. 从 Github下载 Mujoco …

怎么开发付费视频系统_轻松拥有知识付费平台

在信息爆炸的时代&#xff0c;我们每天都在被海量的内容所包围。但你有没有想过&#xff0c;如何将这些内容变得更加有价值&#xff0c;更加个性化&#xff0c;甚至能够为你带来经济收益&#xff1f;今天&#xff0c;就让我带你走进一个全新的领域——付费视频系统&#xff0c;…

电解制氢电源-零排放氢源生成器

电解制氢电源&#xff1a;氢能源的制造者 氢能作为一种清洁、高效的能源&#xff0c;正逐渐成为我国能源战略的重要组成部分。电解制氢电源作为氢能产业链的核心环节&#xff0c;对于实现氢能产业的可持续发展具有重要意义。 电解制氢电源是一种利用电能将水分解为氢气和氧气的…

RustGUI学习(iced)之小部件(八):如何使用svg部件显示矢量图形?

前言 本专栏是学习Rust的GUI库iced的合集,将介绍iced涉及的各个小部件分别介绍,最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个,目前处于发展中(即版本可能会改变),本专栏基于版本0.12.1. 概述 这是本专栏的第八篇,主要讲述svg矢量图形部件的使用,会结合实…

Django项目之电商购物商城 -- 新增收货地址

Django项目之电商购物商城 – 新增收货地址 在项目中新增收货地址我们需要根据前端的设置来写 在这里我们看到新增收货地址的方法发送的是一个ajax请求 , 使用的是post方法 , 其路由为addresses/create 分析完毕后开始写视图以及路由 一. 设置视图以及路由 因为新增地址依…

vue数据大屏并发请求

并发? 处理并发 因为js是单线程的&#xff0c;所以前端的并发指的是在极短时间内发送多个数据请求&#xff0c;比如说循环中发送 ajax , 轮询定时器中发送 ajax 请求. 然后还没有使用队列, 同时发送 的. 1. Promise.all 可以采用Promise.all处理并发&#xff0c; 当所有pro…

JavaScript字符串对象的常用方法

JavaScript字符串对象是指通过String构造函数创建的字符串实例。下面是一些常用的字符串方法的详细解析与案例说明&#xff1a; charAt(index)&#xff1a;返回指定索引位置的字符。 var str "Hello World"; console.log(str.charAt(0)); // "H"concat(…

传输层协议——UDP协议

目录 一、传输层 二、再谈端口号 端口号的划分 知名端口号 pidof netstat命令 三、UDP协议 1、UDP协议格式 2、UDP协议特点 3、UDP协议的缓冲区 四、基于UDP的应用层协议 一、传输层 上一篇文章我们所讲到的HTTP协议和HTTPS协议&#xff0c;是属于应用层协议。我们…

vue3.x + echarts 5.x + ant-design-vue 4.x + monaco-editor v3 新增版本切换功能

前言 1. 因为vue架构中&#xff0c;大多数包都是通过npm / yarn 等工具直接安转到node_modules 使用 2. 多个版本切换时&#xff0c;不可能全部安装echarts版本 3. 所以思路围绕如何通过cdn动态引入echarts一、添加工具代码 loadScript 路径 utils/loadScript.js export de…

PYTHON做题复盘

1、关于递归的代码 #会返回None的错误代码while len(string)<1:return Trueelse:if string[0]!string[-1]:return Falseelse:string string[1:-1]#正确while len(string) > 1:if string[0] ! string[-1]:return Falseelse:string string[1:-1]return True 错误原因&am…

【NodeMCU实时天气时钟温湿度项目 2】WIFI模式设置及连接

第一专题内容&#xff0c;请参考 【NodeMCU实时天气时钟温湿度项目 1】连接点亮SPI-TFT屏幕和UI布局设计-CSDN博客 第三专题内容&#xff0c;请参考 【NodeMCU实时天气时钟温湿度项目 3】连接SHT30传感器&#xff0c;获取并显示当前环境温湿度数据&#…

MySQL数据库变量使用

#MySQL变量的定义和使用 #一、标识符命名规范 #1.以字母或下划线开头&#xff0c;不能以数字开头 #2.不允许使用关键字和保留字 #3.只允许使用_和&#xffe5;作为标识符&#xff0c;不允许使用其他符号 #变量的定义方法 #set在update中使用过set&#xff0c;update声明修改表&…

致鸿物流器材有限公司揭示2024数字物流供应链与技术装备展新动态

参展企业介绍 广东致鸿物流器材有限公司&#xff0c;前身为广州致鸿物流器材有限公司&#xff0c;成立于2002年初&#xff0c;是一家在中国仓储笼行业成立多年的专业仓储笼制造公司&#xff0c;公司员工约400名&#xff0c;日产仓储笼制造规模近8000个&#xff0c;在全国范围内…

华为OD机试 - 手机App防沉迷系统(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

自动驾驶学习2-毫米波雷达

1、简介 1.1 频段 毫米波波长短、频段宽,比较容易实现窄波束,雷达分辨率高,不易受干扰。波长介于1~10mm的电磁波,频率大致范围是30GHz~300GHz 毫米波雷达是测量被测物体相对距离、相对速度、方位的高精度传感器。 车载毫米波雷达主要有24GHz、60GHz、77GHz、79GHz四个频段。 …

积鼎CFDPro颗粒流仿真 | 基于拉格朗日粒子追踪方法,模拟复杂颗粒的流动现象

颗粒流仿真是通过数值模拟手段模拟由大量固体颗粒构成的系统的动态行为&#xff0c;能够详尽刻画颗粒间的碰撞、扩散、堆积、破碎、混合等微观交互&#xff0c;以及与流体介质的相互作用&#xff0c;从而预测颗粒流在各种工况下的宏观表现。颗粒流仿真能够揭示隐藏的风险因素&a…

Java内存模型详解

一、JMM规范 可见性&#xff1a;volatile变量&#xff1b;锁原子性&#xff1a;synchronized和Lock等锁机制有序性&#xff1a;happens-before原则 Java内存模型&#xff08;Java Memory Model&#xff0c;JMM&#xff09;是Java虚拟机&#xff08;JVM&#xff09;的一个关键部…

前端开发如何切换node版本安装依赖

在前端开发当中经常遇到node版本不对应导致的安装依赖报错&#xff0c;可以通过切换node版本来实现 在macOS上切换Node.js版本&#xff0c;通常可以使用nvm&#xff08;Node Version Manager&#xff09;或n这样的包来管理。以下是使用nvm的步骤&#xff1a; 安装nvm&#xf…