(六)、小程序基础加强
1.自定义组件-组件的创建与引用
(1).创建自定义组件
- 在项目的根目录中，鼠标右键，创建
compoents->test文件夹。 - 在新建的
components->test文件夹上，鼠标右键，点击"新建Component" - 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀分别为 .js .json .wxml .wxss。
- 注意:为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中。
(2).引用组件(全局和局部)
组件的引用方式分为: "局部引用"和 “全局引用”，顾名思义:
- 局部引用: 组件只能在当前被引用的页面内使用。
- 全局引用: 组件可以在每个小程序中使用。
(3).局部引用组件
在页面的.json配置文件中引用组件的方式，叫做"局部引用"。
home.wxss
引用组件的操作:
{ "usingComponents": { "my-test1":"/components/test/test" } }
home.wxml
使用组件的操作
<!--pages/home/home.wxml--> <text>首页</text> <my-test1></my-test1>
其他页面并不会展示这个组件的信息
(4).全局引用组件
我们只需在app.json的位置出，与window平级编写以下配置即可
"usingComponents": { "my-test1":"/components/test/test" },
(5).全局引用和局部引用的建议
- 多个页面需要使用->全局
- 单个页面需要使用->局部
(6).组件和页面的区别
从表面来看，组件和页面都是由. js 、.json、.wxml和.wxss着四个文件组成的。但是组件和页面的.js与.json文件明显不同。
- 组件的.json文件中需要声明:"
component:true"属性。 - 组件的.js文件中调用的是
Component()函数不是Page()。 - 组件的事件处理函数需要定义到methods节点中。
组件的js文件
// components/test/test.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } })
组件的.json
{ "component": true, "usingComponents": {} }
2.自定义组件-样式
(1).组件样式隔离
默认情况下，自定义组件的样式只对当前组件生效，不会影响组件之外的UI结构，如图所示:
- 组件A的样式不会影响组件C的样式。
- 组件A的样式不会影响小程序页面的样式。
- 小程序页面的样式不会影响组件A和C的样式。
(2).组件样式隔离的注意点
- app.wxss中的全局样式对组件无效
- 只有class选择器会有样式隔离效果，
id选择器、属性选择器、标签选择器不受样式隔离的影响。
建议: 在组件和引用组件的页面中建议使用class选择器，不要id、属性、标签选择器。
(3).修改组键的样式隔离选项
默认情况下，自定义组件的样式隔离性能够防止组件内外样式互相干扰的问题。但有时，我们需要在外界能够控制组件内部的样式，此时，可以通过stylesolation修改组件的样式隔离选项。
进行隔离->互不影响
1. 第一种:在组件的 .js文件中新增如下配置 Component({ // 隔离性 options:{ styleIsolation:'isolated' }, } 2. 第二种:在组件的.json文件中新增如下配置 { styleIsolation:'isolated' }
styleIsolation 参数 描述 `互相隔离` isolated 表示启用样式隔离，再定以组件内外，使用class指定的样式将不会相互影响。 `外面会影响到组件，组件不会影响到外部` apply-shared 表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面。 `组件会影响到外部，外部不会影响到组件` shared 表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置乐 apply-shared或shared的自定义组件。
3.自定义组件-数据、方法和属性
(1).data数据
在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中:
组件.wxml
<!--components/test/test.wxml--> <text>components/test/test.wxml</text> <view> <text>{{count}}</text> </view>
组件.js test.js
// components/test/test.js Component({ // 隔离性 options:{ styleIsolation:'isolated' }, /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { count:0 }, /** * 组件的方法列表 */ methods: { } })
(2).methods 方法
在小程序组件中，事件处理函数和自定义方法需要定义到methods节点中:
自定义的方法:我们要养成一个规范:以下划线开头。事件处理函数我们不以下划线开头!!!
test.js
// components/test/test.js Component({ // 隔离性 options:{ styleIsolation:'isolated' }, /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { count:0 }, /** * 组件的方法列表 */ methods: { // 1. 自增事件处理函数... addCount(){ this.setData({ count:this.data.count+1 }) this._showCount(); }, _showCount(){ // 2. 提示框的操作 wx.showToast({ title: '点击按钮:'+ this.data.count, }) } } })
test.wxml
<!--components/test/test.wxml--> <text>components/test/test.wxml</text> <view> <text>{{count}}</text> </view> <button type="primary" bindtap="addCount">按我+1</button>
