小程序--自定义组件

一、创建自定义组件

        .js中注册Component函数

        .json使用"component": true

Component({})
{
  "component": true
}

二、使用自定义组件

        全局配置、页面配置均可,全局配置就写在app.json中,页面配置就写在页面对应的json中。

        配置之后,在页面中以组件形式引入。

<page-search />
{
  "usingComponents": {
    "page-search":"/components/my_search/my_search"
  }
}

三、自定义组件样式

        小程序的样式是默认隔离(默认情况下页面的样式无法影响自定义组件的样式)的,允许外部文件修改组件样式的方法:

        1、设置addGlobalClass

                .js 文件中传入 options: { addGlobalClass: true }

                注意:尽量不要使用标签、ID、属性选择器(会影响到全局)。

// components/my-nav/my-nav.js
Component({
  // 小程序组件默认样式是隔离,addGlobalClass设置为true可允许外部修改样式
  options: {
    addGlobalClass: true
  }
})
// 组件内容
<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class">
    自定义标题
  </view>
</view>
// 组件样式
.navigation-bar {
  background-color: #fff;
  height: 88rpx;
  /* 顶部刘海预留 */
  padding-top: 100rpx;
  display: flex;
  justify-content: center;
}
.navigation-bar-title {
  font-weight: 600;
}
// 使用组件的页面
<app-nav></app-nav>

.navigation-bar {
  background-color: gold !important;
}
.nav_title {
  color: #fff !important;
}
// 使用组件的js
{
  "navigationStyle": "custom"
}

        2、设置externalClasses

        .js 文件中传入 externalClasses: [ xxx, yyy]

// components/my-nav/my-nav.js
Component({
  externalClasses: ["custom-class"],
})
// 使用组件的页面
<app-nav custom-class="nav_title"></app-nav>

.navigation-bar {
  background-color: gold !important;
}
.nav_title {
  color: #fff !important;
}

四、自定义插槽

        小程序默认只能使用一个slot,需要多个插槽或需要使用具名插槽的时候,需要传入multipleSlots: true

        创建插槽:在组件的任一位置使用<slot />占位,slot一定要是闭合标签

// components/my-nav/my-nav.js
Component({
  options: {
    // 只要使用到具名插槽,都需要将multipleSlots设置为true
    multipleSlots: true
  },
})
<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class">
    <slot name="left"></slot>自定义标题<slot name="right"></slot>
  </view>
</view>
<app-nav custom-class="nav_title">
  <text slot="left">◀</text>
  <text slot="right">▶</text>
</app-nav>

五、组件生命周期

        1、created

        组件创建时触发,相当于vue的created,但是由于无法使用this.setData({}),所以,一般不用。 

        2、attached

        组件初始完毕时触发,相当于vue的mounted,最常使用。

<view class="navigation-bar custom-class" style="padding-top: {{statusBarHeight}}px;">
  <view class="navigation-bar-title title-class">
    <slot name="left"></slot>自定义标题<slot name="right"></slot>
  </view>
</view>
// components/my-nav/my-nav.js
Component({
  options: {
    multipleSlots: true
  },
  data: {
    statusBarHeight: 0
  },
  // 生命周期
  lifetimes: {
    created(){},
    attached() {
      const { statusBarHeight } = wx.getSystemInfoSync()
      console.log(wx.getSystemInfoSync())
      console.log(statusBarHeight)
      this.setData({
        statusBarHeight: statusBarHeight
      })
    }
  }
})

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ncnn之三(补充):window环境下vs2022安装ncnn+protobuf

启动VS2022 下面的 x64 Native Tools Command Prompt for VS2022 protobuf git clone gitgithub.com:protocolbuffers/protobuf.git# 或者 下载 https://github.com/google/protobuf/archive/v3.11.2.zip cmake -G"NMake Makefiles" -DCMAKE_BUILD_TYPERelease -D…

node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

文章目录 ⭐前言⭐ 功能设计与实现💖 node上传文件写入file_map映射表💖 vue3前端上传文件回显⭐ 效果⭐结束⭐前言 大家好,我是yma16,本文分享关于 node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染。 技术选型 前端:vite+vue3+antd 后端:node koa 数据库…

如何实现系统的高可用

一、SLA 当回答系统高可用时&#xff0c;就是回答这几个问题&#xff1a; 1、如何 评估系统高可用&#xff1f; 2、如何监控系统高可用&#xff1f; 3、如何保证系统高可用&#xff1f; 监控系统的内容&#xff1a; 基础设施监控有监控报警指标&#xff0c;分两部分内容&am…

CryptoPunks NFT 概览与数据分析

作者&#xff1a;stellafootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;CryptoPunks NFT Collection Dashboard CryptoPunks 于 2017 年推出&#xff0c;是 NFT 热潮的先驱&#xff0c;拥有 10,000 个独特的角色&#xff0c;这些角色已成为…

学习python的第二天

已经隔了8天没学习了&#xff0c;期间虽然有在开发那个业绩管理系统&#xff0c;但是很多时间都在网易云里emo&#xff0c;逛着被她拉黑的主页&#xff0c;用老版本app看她的听歌排行&#xff0c;魔怔了&#xff0c;她爱听的歌我都听遍了&#xff1b;她的排行榜一更新&#xff…

​LeetCode解法汇总105. 从前序与中序遍历序列构造二叉树

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给定两个整…

(十五)devops持续集成开发——jenkins流水线构建策略配置及触发器的使用

前言 本节内容我们主要介绍在Jenkins流水线中&#xff0c;其构建过程中的一些构建策略的配置&#xff0c;例如通过远程http构建、定时任务构建、轮询SCM构建、参数化构建、Git hook钩子触发构建等&#xff0c;可根据不同的需求完成不同构建策略的配置。 正文 Throttle build…

如何使用CanaryTokenScanner识别Microsoft Office文档中的Canary令牌和可疑URL

关于CanaryTokenScanner CanaryTokenScanner是一款功能强大的Canary令牌和可疑URL检测工具&#xff0c;该工具基于纯Python开发&#xff0c;可以帮助广大研究人员快速检测Microsoft Office和Zip压缩文件中的Canary令牌和可疑URL。 在网络安全领域中&#xff0c;保持警惕和主动…

Failure [DELETE_FAILED_INTERNAL_ERROR]的解决办法

1.接上ADB 找到包名。 2 adb uninstall --user 0 com.subpos.client

2.20 day2 QT

自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面 #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {//窗口相关设置this->setWindowTitle("登入页面"); //设置 窗口 标题this->setWindowIcon(QIcon("D:…

ubuntu制作windows的u盘启动盘

概要&#xff1a; 本篇演示在ubuntu22.04中制作windows10的u盘启动盘 一、下载woeusb 1、下载woeusb 在浏览器中输入https://github.com/woeusb/woeusb/releases访问woeusb 点击红色矩形圈出来的部分&#xff0c;下载woeusb 2、安装wimtools wimtools是woeusb的一个必须的…

CentOS安装Docker(超详细)

文章目录 1.CentOS安装Docker1.1.卸载&#xff08;可选&#xff09;1.2.安装docker1.3.启动docker1.4.配置镜像加速 2.CentOS安装DockerCompose2.1.下载2.2.修改文件权限2.3.Base自动补全命令&#xff1a; 3.Docker镜像仓库3.1.简化版镜像仓库3.2.带有图形化界面版本3.3.配置Do…

Git基本指令

从远程拉代码 git clone gitgitlab-internal.wedobest.com.cn:dengyanhui/gittest.git添加所有文件到待上传列表 git add .提交 git commit -m message推送 git push获取现在的状态 git status更新本地代码 git pullgit拉取某一分支代码 git clone -b develop XXX本地删除…

【Oracle】玩转Oracle数据库(三):数据库的创建和管理

前言 嘿&#xff0c;各位数据库小能手们&#xff01;今天我们要进入数据库的创世纪&#xff0c;探索Oracle数据库的创建和管理&#xff01;&#x1f527;&#x1f4bb; 在这篇博文【Oracle】玩转Oracle数据库&#xff08;三&#xff09;&#xff1a;数据库的创建和管理中&#…

Redis面试题关于持久化的问题

什么是Redis持久化&#xff1f;Redis有哪几种持久化方式&#xff1f;优缺点是什么&#xff1f; 持久化就是把内存的数据写到磁盘中去&#xff0c;防止服务宕机了内存数据丢失。 Redis 提供了两种持久化方式:RDB&#xff08;默认&#xff09; 和AOF RDB&#xff1a; rdb是Red…

【LeetCode】无权图的最短路精选7题——单源、多源

目录 无权图的单源最短路问题&#xff1a; 1. 迷宫中离入口最近的出口&#xff08;中等&#xff09; 2. 最小基因变化&#xff08;中等&#xff09; 3. 单词接龙&#xff08;困难&#xff09; 4. 为高尔夫比赛砍树&#xff08;困难&#xff09; 无权图的多源最短路问题&a…

开源CMS Drupal本地快速部署并实现无公网ip环境远程访问

文章目录 前言1. Docker安装Drupal2. 本地局域网访问3 . Linux 安装cpolar4. 配置Drupal公网访问地址5. 公网远程访问Drupal6. 固定Drupal 公网地址 前言 Dupal是一个强大的CMS&#xff0c;适用于各种不同的网站项目&#xff0c;从小型个人博客到大型企业级门户网站。它的学习…

蓝桥杯嵌入式第12届真题(完成) STM32G431

蓝桥杯嵌入式第12届真题(完成) STM32G431 题目 程序 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body**************************…

【业务功能篇135】多线程+countDownLatch执行大数据量定时任务

对于业务中存在一些功能需求&#xff0c;业务逻辑复杂且数据量大&#xff0c;过程处理也就比较繁琐&#xff0c;如果直接在单线程同步执行&#xff0c;效率就比较低了&#xff0c;所以我们需要利用多线程&#xff0c;开启多个线程去把任务分线程异步执行&#xff0c;这些效率就…

【java】小学生数学练习题目生成系统

本文章主要是CSDN-问答板块&#xff0c;有题主提出的问题&#xff0c;我这边将完整代码提供出来&#xff0c;仅供大家参考学习&#xff01; 一、效果截图 二、直接上代码 package com.example.dingtalk.question;import javax.script.ScriptEngine; import javax.script.Scrip…