微信小程序模块化、组件传值、添加data,menthods类型等记录-持续更新_小言_互联网的博客

微信小程序模块化、组件传值、添加data,menthods类型等记录-持续更新

2023-02-06 12:05 366人阅读评论(0)

组件模块化

基本概括

模块化一般分为二种，页面和模块。页面由模块构成。
我们拆分模块化可能是这样子的
- modules（页面模块)
  - pageA
    - A1模块
    - A2模块
  - pageB
    - B1模块
    - B2模块
- pages(页面)
  - pageA
  - pageB
在小程序当中
- 我们使用Page注册小程序中的一个页面@官方文档-page说明
- 使用Component创建自定义组件@官方文档-Component说明
- 所以我们创建页面使用Page，创建模块使用Component

页面使用模块化组件

其实，小程序官网已经给出示例了，这里就不废话了，直接看他的代码片段就可以
- https://developers.weixin.qq.com/s/GqVTnvmq7g1m

组件父子传值

父亲给儿子值

小程序官方代码片段
- https://developers.weixin.qq.com/s/GqVTnvmq7g1m
父亲需要做的
- 就是像vue一样传递参数给儿子就可以，其他什么不用管了

vue时候
<Son :name="name" :age="age"/>

微信小程序
<Son name="{
  { name }}" age="{
  { age }}"/>

儿子需要做的
- 就是需要添加properties属性，并未其添加对应的属性说明即可

//小程序

// Son.js
Component({
   
    //...
    
    //书写将要接收的值
    properties:{
   
        name:{
   
            // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            type:String,
            // 属性初始值（可选），如果未指定则会根据类型选择一个
            value: '',
            // 属性被改变时执行的函数（可选）
            //	其实也可以不在这里写，在observers对象（监听data和properties变化）当中书写也可以
            observer: function (newVal, oldVal) {
    } 
        },
        age:{
   
            type:number,
            value:0
        }
    }
    
    //...
})

//然后就可以正常使用了

//Son.wxml

<view>
   
    <text>名称是：{
   {
    name }}</text>
    <text>年龄是： {
   {
    age }}</text>
</view>

儿子给父亲值

方式1: triggerEvent
方式2: 双向绑定

方式1：triggerEvent

资料
- @小程序官方示例
- @小程序官方文档-组件间通信
父亲需要做的
- 通过bind:自定义事件名=回调函数传递给儿子
- 注意，父亲通过triggerEvent接收的参数不单单是子组件传递过来的数据，还有很多其他的数据，子组件传递过来的数据仅仅是在其中的detail字段里面
- 输出查看儿子传递过来的数据，可以看到，儿子传递过来的name数据被微信小程序放在了detail对象当中

// Father.wxml
<Son  bind:changething="getChangeParams"/>

// Father.js
Page({
   
	//...
    
	methods:{
   
		
		changething(e){
   
			console.log(e)；
            //注意查看上面输出截图
		}
	},
	
    //...
})

儿子需要做的
- 通过this.triggerEvent调用

// Son.wxml
<view>
    <text bind:tap="handleChange">点击我触发事件</text>
</view

// Son.js

Component({
   
    //...
    
    methods:{
   
        handleChange(){
   
            // 参数1为触发的事件名
            // 参数2为detail对象（也就是我们需要传递给父组件的值）
            // 参数3为触发发事件的选项（可选)
            const data = {
   name:'我是子组件传递的数据'}
            this.triggerEvent('changething'，data)
        }
    },
    
    //...
})

方式2：双向绑定

todo todo todo todo todo todo todo todo todo todo

获取组件实例对象和组件自定义返回结果

学习学习~

获取组件示例对象同时调用组件实例

@官方文档-获取组件实例
小程序的组件实例调用比较简单，不需要像vue一样defineExpose
步骤
1. 父组件为子组件标注id属性（当然，其他的也可以） selector 语法参考文档https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html
```
 <componentA id="abcdef"/>
```
1. 父组件通过this.selectComponent("#xxx")即可获取到组件的实例对象并通过实例对象调用子组件当中的方法
```
// 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 wx://component-export 影响）
const childremA = this.selectComponent('#abcdef');
 
// 调用实例方法
childremA.sayHello();
```
代码片段
- https://developers.weixin.qq.com/s/XfjprNmK7oFJ

组件自定义返回结果

@官方文档-自定义的组件实例获取结果
看官方文档吧，这里不赘叙了

为Component/Page指明Data类型,Method类型(ts)

感觉小程序ts挺乱的吧…话不多说

Page页面指明

types.ts（类型文件）


//定义data当中应该有的数据
export interface Data{
   
    name:string,
    age:string,
}

//定义应该有的方法
//export type SayHello = () => void;
export interface Methods {
   
    sayHello:() => void;
}

index.ts(每一个page都有的入口文件)

import {
   Data,Methods} from "./types";

Page<Data,Methods>({
   
	data:{
   
		name:'梦洁'，
		age:18,
        sex:'知',//多了，ts检测报错
	},
	sayHello(){
   
		
	}
})

Component组件指明

和Page有一点不一样，因为Component多了一个properties不过这个properties可以要，也可以不要
types.ts（类型文件)

import MethodOption = WechatMiniprogram.Component.MethodOption;
import PropertyOption = WechatMiniprogram.Component.PropertyOption;
//定义data当中应该有的数据
export interface Data{
   
    name:string,
    age:string,
}

//定义Properties属性
export interface ListParams {
   
    page:number
    pageSize:number
}

export interface Props extends PropertyOption{
   
    params: {
   
        type: ObjectConstructor,
        value: ListParams | any
    }
}

//定义methods有的方法
//export type SayHello = () => void;
export interface Methods extends MethodOption {
   
    sayHello:() => void;
}

index.ts(每一个Component都有的入口文件)

import {
   Data,Props,Methods} from "./types";

//如果不需要Properties说明，则第二个参数需要为 ‘{}’
Component<Data,Props,Methods>{
   
    data:{
   
        name:'梦洁'，
		age:18,
        sex:'知',//多了，ts检测报错
    },
    
    properties:{
   
        params:{
   
            //目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            type: Object,
            value: (() => {
   
                page:1,
                pageSize:10
            }),
        }
    },
    
    methods:{
   
        sayHello(){
   
            
        }
    }
}

外部样式类

@官方文档-外部样式类
启用来源于一个t-design吧，要设置search的背景颜色，发现没有props，但是有external-classes,所以就来学习学习

有时，组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。这个特性可以用于实现类似于 view 组件的 hover-class 属性：页面可以提供一个样式类，赋予 view 的 hover-class ，这个样式类本身写在页面中而非 view 组件的实现中。

注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。(意思就是你在组件内部通过这个类名设置了样式，又在外部通过暴露的类名设置了样式，当样式发生重叠的时候，优先使用谁的不确定，但是可以使用important来强制)

代码示例：

组件

/* 组件 custom-component.js */
Component({
   
  externalClasses: ['my-class']
})

<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

页面

<!-- 页面的 WXML -->
<custom-component my-class="red-text" />

/* 页面的 */
.red-text {
   
  color: red;
}

参考文章

转载：https://blog.csdn.net/u014582342/article/details/128892949

查看评论

小言_互联网的博客