组件 WXML 模板：

组件模板的写法与页面模板相同。

模板数据绑定：

与普通的 WXML 模板类似，可以使用数据绑定。

<!-- custom-component.wxml -->
<view>{{transferVal}}{{personalVal}}
</view>// custom-component.js
Component({properties: {transferVal: {type: String,value: '我是引用自定义组件的页面传递过来的数据'}},data: {personalVal: '我是自定义组件的内部数据'},
})<!--index.wxml-->
<custom-component transfer-val="{{pageVal}}" />

组件模板的 slot：

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。

默认情况下，一个组件的 wxml 中只能有一个 slot 。

<!-- 自定义组件 sort-tabs.wxml -->
<view><view>这里是组件的内部节点</view><slot></slot>
</view><!-- 引用自定义组件的页面 index.wxml -->
<view><sort-tabs><!-- 这部分内容将被放置在 sort-tabs 组件 <slot> 的位置上 --><view>这里是插入到自定义组件 slot 位置的内容</view></sort-tabs>
</view>

需要使用多 slot 时，可以在组件 js 中声明启用，然后就可以在这个组件的 wxml 中使用多个 slot 了，以不同的 name 来区分；在使用自定义组件时，用 slot 属性来将节点插入到不同的 slot 上。

// 自定义组件 sort-tabs.js
Component({options: {multipleSlots: true // 在 options 选项中启用多 slot 支持}
})<!-- 自定义组件 sort-tabs.wxml -->
<view class="wrapper"><slot name="before"></slot><view>这里是组件的内部细节</view><slot name="after"></slot>
</view><!-- 引用自定义组件的页面 index.wxml -->
<view><sort-tabs><!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 --><view slot="before">这里是插入到组件 slot name="before"中的内容</view><!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --><view slot="after">这里是插入到组件 slot name="after"中的内容</view></sort-tabs>
</view>

组件 WXSS 样式：

组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。

组件和引用组件的页面不能使用 id 选择器、属性选择器和标签名选择器，推荐使用 class 选择器。
组件和引用组件的页面中使用后代选择器在一些极端情况下会有非预期的表现，要避免使用。
子元素选择器只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color 等会从组件外继承到组件内。除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
组件可以指定它所在节点的默认样式，使用 :host 选择器。
/* 组件 sort-tabs.wxss */
:host {color: yellow;
}
<sort-tabs>这段文本是黄色的</sort-tabs>

组件样式隔离：

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响，除非以下两种情况：

app.wxss 或页面的 wxss 中使用了标签名选择器或一些其他特殊选择器来直接指定样式，这些选择器会影响到页面和全部组件，通常情况下这是不推荐的做法。
指定特殊的样式隔离选项 styleIsolation：可以在页面或自定义组件的 json 文件中配置 styleIsolation，也可以在 js 中声明。

styleIsolation 选项支持以下取值：
- isolated：默认值。表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响。
- apply-shared：表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。
- shared：表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。
如果这个 Component 构造器用于构造页面，则默认值为 shared，且还有以下几个额外的样式隔离选项可用：
- page-isolated：表示在这个页面禁用 app.wxss ，同时页面的 wxss 不会影响到其他自定义组件。
- page-apply-shared：表示在这个页面禁用 app.wxss ，同时页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面。
- page-shared：表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。
```
// json
{"styleIsolation": "isolated"
}// js
Component({options: {styleIsolation: 'isolated'}
})
```

外部样式类：

可以在 Component 中用 externalClasses 定义段定义若干个外部样式类，在组件中接收外部传入的样式类。

在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，要避免这种情况。

<!-- 自定义组件 custom-component.wxml -->
<view class="external-class">这段文本的颜色由组件外的 class 决定</view>
/* 自定义组件 custom-component.js */
Component({externalClasses: ['external-class']
})<!-- 引用自定义组件的页面 index.wxml -->
<custom-component external-class="text-color"></custom-component>
/* 引用自定义组件的页面 index.wxss */
.text-clolr {color: red;
}

引用页面或父组件的样式：

即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式。

例如，如果在引用组件的页面 wxss 中定义了：

.blue-text {color: blue;
}

在这个组件中可以使用 ~ 来引用这个类的样式：

<view class="~blue-text"> 这段文本是蓝色的 </view>

如果在一个组件的父组件 wxss 中定义了：

.red-text {color: red;
}

在这个组件中可以使用 ^ 来引用这个类的样式：

可以连续使用多个 ^ 来引用祖先组件中的样式。

<view class="^red-text"> 这段文本是红色的 </view>

虚拟化组件节点：

默认情况下，自定义组件本身的那个节点是一个普通的节点，使用时可以在这个节点上设置 class style 、动画、 flex 布局等，就如同普通的 view 组件节点一样。

<!-- 页面的 WXML -->
<view style="display: flex"><!-- 默认情况下，这是一个普通的节点 --><custom-component style="color: blue; flex: 1">蓝色、满宽的</custom-component>
</view>

但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，这种情况下，可以将这个自定义组件设置为“虚拟的”。

Component({options: {virtualHost: true},
})<!-- 页面的 WXML -->
<view style="display: flex"><!-- 如果设置了 virtualHost ，节点上的样式将失效 --><custom-component style="color: blue">不是蓝色的</custom-component>
</view>

《十》微信小程序中自定义组件的组件模板和样式相关推荐

微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
微信小程序中使用Vant Weapp组件库
介绍 Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源. 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序 ...
微信小程序中使用Vant Weapp组件--以card为例
一.构建环境: Vant Weapp官网文档: https://youzan.github.io/vant-weapp/#/quickstart 1.方法一注意要在微信小程序根目录下安装:用cmd命令 ...
PhP加载时显示动画,在微信小程序中如何使用loading组件显示载入动画
这篇文章主要介绍了微信小程序loading组件显示载入动画用法,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可以参考下本文实例讲 ...
微信小程序之自定义表单组件(radio)
背景: 最近在做项目的时候遇到一个问题,那就是微信的官方表单组件的可扩展性不强,无法达到设计稿所要求的效果,所以想到了用自定义组件的方法自定义一个表单组件. (自定义组件其实往往用在需要复用的地方,比 ...

《十》微信小程序中自定义组件的组件模板和样式