小程序学习2 自定义组件

xinzheng新政

已于 2024-03-15 13:20:04 修改

阅读量440

点赞数 4

文章标签：小程序学习

于 2024-03-12 11:42:54 首次发布

本文链接：https://blog.csdn.net/xinzhengLUCK/article/details/136643582

版权

组件 | 微信开放文档

miniprogram_npm/tdesign-miniprogram/swiper/swiper

小程序中miniprogram_npm是什么

在小程序中，miniprogram_npm是一个用于管理和引用npm包的机制。它允许开发者在小程序中直接使用npm包，而无需手动下载和引入。通过miniprogram_npm，开发者可以方便地使用第三方库和工具来增强小程序的功能。

使用miniprogram_npm的步骤如下：

在小程序项目的根目录下执行npm init命令，生成package.json文件，用于管理项目的依赖。
使用npm install命令安装需要的npm包，安装后的包会被保存在项目的miniprogram_npm目录下。
在小程序代码中使用require()函数引入需要的npm包，然后就可以使用该包提供的功能了。

需要注意的是，引入的npm包需要进行适配，以使其能够在小程序环境中正常运行。有些npm包可能需要进行一些额外的配置或修改才能在小程序中使用。

快速开始 | Lin UI

....

微信开发者工具中安装TDesign组件库_tdesign-miniprogram-CSDN博客

TDesign

出现上图所示的结果后，可以看到小程序IDE工具的目录结构里多出了一个文件夹 miniprogram_npm（之后所有通过 npm 引入的组件和 js 库都会出现在这里），打开后可以看到 lin-ui 文件夹，也就是我们所需要的组件。

【微信小程序】组件的生命周期及自定义组件_小程序组件的生命周期-CSDN博客

ESLint

ESLint是一个用于静态代码分析的工具，它可以帮助开发者在编写JavaScript代码时发现并修复常见的错误和潜在的问题。ESLint可以根据预定义的规则或自定义的规则对代码进行检查，并提供了丰富的插件和配置选项，以满足不同项目的需求。

ESLint的主要功能包括：

语法检查：ESLint可以检查代码是否符合JavaScript语法规范，例如缺少分号、括号不匹配等。
代码风格检查：ESLint可以根据预定义的代码风格规则（如Airbnb、Google等）或自定义的规则检查代码的风格是否一致，例如缩进、命名规范等。
潜在问题检查：ESLint可以检查代码中可能存在的潜在问题，例如未使用的变量、未定义的变量等。
提示和建议：ESLint可以提供一些提示和建议，帮助开发者编写更好的代码，例如优化建议、最佳实践等。

使用ESLint可以提高代码质量和可维护性，减少潜在的bug和错误。它可以与各种编辑器、构建工具和持续集成工具集成，方便开发者在开发过程中实时检查代码。

mock

Mock是一种在软件开发中常用的测试技术，它用于模拟或替代真实的对象，以便进行单元测试。通过使用Mock对象，我们可以模拟外部依赖或者不可控的环境，使得测试更加可控和可靠。

Mock对象通常是通过使用特定的框架或库来创建和管理的。在创建Mock对象时，我们可以定义它的行为和返回值，以模拟真实对象的行为。通过这种方式，我们可以在测试中隔离被测对象与外部依赖的交互，使得测试更加独立和可重复。

Mock对象可以用于各种测试场景，例如：

模拟网络请求或数据库操作，以避免对真实资源的依赖和影响。
模拟外部服务或组件，以确保被测系统在与其交互时的正确性。
模拟异常情况或边界条件，以验证被测系统的健壮性和容错性。

使用Mock的好处包括：

提高测试效率：通过模拟外部依赖，可以减少测试所需的时间和资源。
提高测试覆盖率：可以更容易地模拟各种场景和边界条件，从而增加测试覆盖率。
提高测试可靠性：通过隔离外部依赖，可以更好地控制测试环境，减少测试结果的不确定性。

swiper.wxml

<wxs src="./index.wxs" module="this" />
<wxs src="../common/utils.wxs" module="_" />

<import src="../common/template/image.wxml" />

<view class="class {{prefix}}-class {{classPrefix}}" style="{{_._style([style, customStyle])}}">
  <swiper
    class="{{classPrefix}}-host"
    autoplay="{{autoplay}}"
    current="{{current}}"
    interval="{{interval}}"
    duration="{{duration}}"
    circular="{{loop}}"
    vertical="{{direction == 'vertical'}}"
    easing-function="{{easingFunction}}"
    previous-margin="{{previousMargin}}"
    next-margin="{{nextMargin}}"
    snap-to-edge="{{snapToEdge}}"
    display-multiple-items="{{displayMultipleItems}}"
    style="height: {{_.addUnit(height)}}"
    bindchange="onChange"
  >
    <swiper-item
      wx:for="{{list}}"
      wx:key="index"
      class="{{_.cls(classPrefix + '__item', [['preview', this.isPrev(current, index, list)], ['next', this.isNext(current, index, list)]])}}"
      data-index="{{index}}"
      bind:tap="onTap"
      aria-hidden="{{navCurrent !== index}}"
      aria-role="image"
      aria-label="{{_.isObject(item) ? item.ariaLabel : ''}}"
    >
      <template
        is="image"
        data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: _.isObject(item) ? item.value : item, mode: 'aspectFill', dataset: index, ...imageProps, bindload: 'onImageLoad' }}"
      />
    </swiper-item>
  </swiper>
  <t-swiper-nav
    wx:if="{{navigation}}"
    t-class="{{prefix}}-class-nav"
    type="{{navigation.type || 'dots'}}"
    current="{{navCurrent || 0}}"
    total="{{list.length || 0}}"
    direction="{{direction || 'horizontal'}}"
    pagination-position="{{paginationPosition || 'bottom'}}"
    min-show-num="{{navigation.minShowNum || 2}}"
    show-controls="{{navigation.showControls || false}}"
    bind:nav-btn-change="onNavBtnChange"
  />
  <slot name="nav" />
</view>

这段代码是一个小程序中的swiper组件的使用示例。swiper组件是用来实现轮播图效果的，可以在其中放置多个swiper-item来展示不同的内容。以下是对代码中一些重要部分的介绍：

<wxs>标签：用于引入外部的wxs文件，可以在小程序中使用wxs模块中定义的函数和变量。
<import>标签：用于引入外部的wxml文件，可以在小程序中使用引入文件中定义的模板。
<view>标签：视图容器，用于包裹swiper组件和其他内容。
<swiper>标签：swiper组件，用于实现轮播图效果。
class属性：用于设置视图容器的样式类。
autoplay属性：是否自动切换轮播图。
current属性：当前所在的轮播图索引。
interval属性：自动切换的时间间隔。
duration属性：切换动画的时长。
circular属性：是否采用衔接滑动。
vertical属性：是否垂直滚动。
easing-function属性：切换动画的缓动函数。
previous-margin和next-margin属性：前后两个轮播图之间的边距。
snap-to-edge属性：是否将滑动距离对齐到边界。
display-multiple-items属性：同时显示的轮播图数量。
style属性：设置swiper组件的样式，这里设置了高度。
bindchange属性：绑定切换事件的回调函数。
<swiper-item>标签：swiper组件中的每个轮播项，可以在其中放置需要展示的内容。
wx:for属性：用于遍历list数组，生成多个swiper-item。
wx:key属性：指定遍历时的唯一标识。
class属性：设置每个swiper-item的样式类。
data-index属性：设置每个swiper-item的索引值。
bind:tap属性：绑定点击事件的回调函数。

【微信小程序入门到精通】— 轮播图你会了么？快速拿下 swiper 和 swiper-item-CSDN博客

小程序中swiper 和swiper-nav有什么区别

在小程序中，swiper和swiper-nav都是用于实现轮播图的组件，但它们有一些区别。

Swiper（轮播图）： Swiper是小程序中常用的轮播图组件，可以实现图片、文字等内容的自动轮播。它具有以下特点：

可以设置自动播放、循环播放等属性。
可以通过设置indicator-dots属性来显示轮播图的指示点。
可以通过设置indicator-color属性来自定义指示点的颜色。
可以通过设置autoplay属性来控制是否自动播放。
可以通过设置interval属性来控制轮播图切换的时间间隔。

Swiper-nav（导航轮播图）： Swiper-nav是小程序中的导航轮播图组件，它可以实现带有导航功能的轮播图。它具有以下特点：

可以设置导航按钮的样式和位置。
可以通过设置indicator-dots属性来显示轮播图的指示点。
可以通过设置indicator-color属性来自定义指示点的颜色。
可以通过设置autoplay属性来控制是否自动播放。
可以通过设置interval属性来控制轮播图切换的时间间隔。

总结： Swiper主要用于展示图片、文字等内容的自动轮播，而Swiper-nav则是在Swiper的基础上增加了导航功能，可以实现带有导航按钮的轮播图。

wxs文件是什么

wxs文件是一种用于描述Windows Installer安装程序的XML格式文件。它是Windows Installer XML (WiX) 工具集的一部分，用于创建和编辑安装程序。WXS文件包含了安装程序的组件、文件、注册表项、快捷方式等信息。

WXS文件使用一种类似于HTML的标记语言来定义安装程序的结构和行为。通过编写WXS文件，开发人员可以指定要安装的文件、创建注册表项、创建快捷方式等操作。WXS文件还可以定义自定义的安装界面、升级策略、安装条件等。

WXS文件需要使用WiX工具集进行编译，生成最终的安装程序。WiX工具集提供了一系列命令行工具和库，可以将WXS文件转换为MSI（Microsoft Installer）格式的安装程序。

.d.ts 文件是什么

.d.ts文件是TypeScript的声明文件，用于描述JavaScript库、框架或模块的类型信息。在TypeScript中，通过声明文件可以为JavaScript代码提供静态类型检查和智能提示的支持。声明文件通常以.d.ts为后缀名，并包含了对应JavaScript代码的类型定义、接口、类、函数等信息。

声明文件可以定义全局变量、全局函数、全局对象、模块等的类型信息，使得在TypeScript使用这些JavaScript库时能够获得更好的开发体验。通过引入声明文件，TypeScript编译器可以根据声明文件中的类型信息进行类型检查，提供代码补全和错误等功能。

声明文件可以由开发者手动编写，也可以通过工具自动生成。一些流行的JavaScript库和框架已经提供了官方的声明文件，也社区维护的第三方声明文件库（如DefinitelyTyped），可以便地引入和使用。

swiper.d.ts

import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Swiper extends SuperComponent {
    externalClasses: string[];
    options: {
        multipleSlots: boolean;
    };
    properties: import("./type").TdSwiperProps;
    observers: {
        navCurrent(v: any): void;
    };
    $nav: any;
    relations: RelationsOptions;
    data: {
        prefix: string;
        classPrefix: string;
    };
    lifetimes: {
        ready(): void;
    };
    methods: {
        updateNav(currentValue: any): void;
        onTap(e: any): void;
        onChange(e: any): void;
        onNavBtnChange(e: any): void;
        doNavBtnChange(dir: any, source: any): void;
        onImageLoad(e: any): void;
    };
}

这段代码是一个名为Swiper的类的定义，它继承自SuperComponent类。Swiper类有以下属性和方法：

属性：

externalClasses: 字符串数组类型，用于指定外部样式类。
options: 对象类型，包含一个布尔类型的属性multipleSlots，用于指示是否支持多个插槽。
properties: 类型为import(“./type”).TdSwiperProps的属性，用于定义组件的属性。
observers: 对象类型，包含一个函数类型的属性navCurrent，用于观察navCurrent属性的变化。

方法：

$nav: 任意类型，用于存储导航相关的数据。
relations: 对象类型，用于定义组件之间的关系。
data: 对象类型，包含两个字符串类型的属性prefix和classPrefix。
lifetimes: 对象类型，包含一个函数类型的属性ready，用于在组件实例被创建并插入到页面中时执行。
methods: 对象类型，包含多个函数类型的属性，用于定义组件的方法。

typescript是什么语言

TypeScript是一种开源的编程语言，它是JavaScript的一个超集。它添加了静态类型和面向对象的特性，使得开发者能够更好地进行代码组织、重构和调试。TypeScript通过在编译时进行类型检查，可以帮助开发者在开发过程中发现潜在的错误，并提供更好的代码提示和自动补全功能。此外，TypeScript还支持最新的ECMAScript标准，并且可以与现有的JavaScript代码无缝集成。

swiper.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-swiper`;
let Swiper = class Swiper extends SuperComponent {
    constructor() {
        super(...arguments);
        this.externalClasses = [
            `${prefix}-class`,
            `${prefix}-class-nav`,
            `${prefix}-class-image`,
            `${prefix}-class-prev-image`,
            `${prefix}-class-next-image`,
        ];
        this.options = {
            multipleSlots: true,
        };
        this.properties = props;
        this.observers = {
            navCurrent(v) {
                this.updateNav(v);
            },
        };
        this.$nav = null;
        this.relations = {
            '../swiper-nav/swiper-nav': {
                type: 'child',
            },
        };
        this.data = {
            prefix,
            classPrefix: name,
        };
        this.lifetimes = {
            ready() {
                const { current } = this.properties;
                this.setData({ navCurrent: current });
            },
        };
        this.methods = {
            updateNav(currentValue) {
                var _a;
                if (this.data.navigation)
                    return;
                const $nav = (_a = this.getRelationNodes('./swiper-nav')) === null || _a === void 0 ? void 0 : _a[0];
                if (!$nav)
                    return;
                const { direction, paginationPosition, list } = this.properties;
                $nav.setData({
                    current: currentValue,
                    total: list.length,
                    direction,
                    paginationPosition,
                });
            },
            onTap(e) {
                const { index } = e.currentTarget.dataset;
                this.triggerEvent('click', { index });
            },
            onChange(e) {
                const { current, source } = e.detail;
                this.setData({
                    navCurrent: current,
                });
                this.triggerEvent('change', { current, source });
            },
            onNavBtnChange(e) {
                const { dir, source } = e.detail;
                this.doNavBtnChange(dir, source);
            },
            doNavBtnChange(dir, source) {
                const { current, list, loop } = this.data;
                const count = list.length;
                let nextPos = dir === 'next' ? current + 1 : current - 1;
                if (loop) {
                    nextPos = dir === 'next' ? (current + 1) % count : (current - 1 + count) % count;
                }
                else {
                    nextPos = nextPos < 0 || nextPos >= count ? current : nextPos;
                }
                if (nextPos === current)
                    return;
                this.setData({
                    current: nextPos,
                });
                this.triggerEvent('change', { current: nextPos, source });
            },
            onImageLoad(e) {
                this.triggerEvent('image-load', { index: e.target.dataset.custom });
            },
        };
    }
};
Swiper = __decorate([
    wxComponent()
], Swiper);
export default Swiper;

这段代码是一个JavaScript模块，其中定义了一个名为Swiper的类。这个类继承自SuperComponent类，并且使用了装饰器来修饰类的属性和方法。

装饰器是一种特殊的语法，可以用来修改类的行为。在这段代码中，使用了一个名为__decorate的函数来应用装饰器。

具体来说，这段代码做了以下几件事情：

导入了名为SuperComponent和wxComponent的模块。
导入了名为config的模块，并从中获取了prefix属性。
定义了一个名为Swiper的类，该类继承自SuperComponent类。
在Swiper类中定义了一个名为externalClasses的属性，它是一个数组，包含了一些字符串。
Swiper类还有一个constructor构造函数，用于初始化对象的属性。

问题1： var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

这段代码是一个变量声明语句，其中包含了多个变量的初始化操作。让我逐一解释一下：

var c = arguments.length：这行代码将变量 c 初始化为 arguments.length 的值。arguments 是一个特殊的对象，它包含了函数调用时传递的所有参数。arguments.length 表示传递给函数的参数个数。
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,d：这是一个条件表达式，用于初始化变量 r。

根据条件判断，如果 c 小于 3，则将 target 赋值给 r；

否则，判断 desc 是否为 null，如果是，则将 Object.getOwnPropertyDescriptor(target, key) 的返回值赋值给 desc；

否则，将 desc 的值赋给 r。

d：这是一个未初始化的变量 d。

在给定的代码中，变量d的作用是存储Object.getOwnPropertyDescriptor(target, key)的返回值。根据代码逻辑，如果变量c小于3，则将target赋值给变量r；否则，如果desc为null，则通过Object.getOwnPropertyDescriptor(target, key)获取target对象中指定属性的属性描述符，并将其赋值给desc；最后，将d赋值为desc。因此，变量d用于存储获取到的属性描述符。

d的作用是不是在满足条件后将d的值赋值给desc?

是的，变量d的作用是在满足条件后将其值赋给变量desc。根据给出的代码，变量c表示参数的个数，变量r用于存储根据条件判断后的结果。如果参数个数小于3，则将target赋值给r；如果desc为null，则通过Object.getOwnPropertyDescriptor(target, key)获取属性描述符并赋值给desc；否则将desc的值赋给r。最后，如果满足条件，则将d的值赋给desc。

问题2： JavaScript 中标点符号的作用

在JavaScript中，标点符号具有不同的作用和功能。以下是一些常见的标点符号及其作用：

分号 (;)：用于分隔语句。在JavaScript中，每个语句通常以分号结尾，表示语句的结束。
逗号 (,)：用于分隔多个表达式或变量。逗号可以用于在一行中同时声明多个变量，或者在函数调用中传递多个参数。
圆括号 (())：用于控制表达式的优先级和分组。圆括号可以改变表达式的计算顺序，并且在函数调用时用于传递参数。
方括号 ([])：用于访问数组中的元素。通过在方括号内指定索引值，可以获取或修改数组中特定位置的元素。
大括号 ({})：用于创建对象字面量和代码块。大括号可以用于定义对象的属性和方法，也可以用于创建代码块，例如if语句、循环等。
小括号 (())：用于函数定义和调用。小括号可以包裹函数的参数列表，在函数调用时用于传递参数。
冒号 (:)：用于对象字面量中的属性定义。冒号用于分隔属性名和属性值。
点号 (.)：用于访问对象的属性和方法。通过对象名后面跟随点号，可以访问对象的属性和调用对象的方法。
等号 (=)：用于赋值操作。等号将右侧的值赋给左侧的变量或属性。
加号 (+)：用于数字相加和字符串拼接。加号可以用于对数字进行加法运算，也可以用于将字符串连接起来。

一个简单的html的案例，其中使用script和javascript定义的几个变量以及一个三元表达式，其变量值在html中使用{{}}的方式呈现出来

<!DOCTYPE html>
<html>
<head>
    <title>Variable Example</title>
</head>
<body>
    <h1>Variable Example</h1>

    <script>
        // 定义变量
        var name = "John";
        var age = 25;
        var isStudent = true;

        // 使用三元表达式判断是否为学生
        var studentStatus = isStudent ? "Yes" : "No";

        // 在HTML中使用{{}}呈现变量的值
        document.write("<p>Name: {{name}}</p>");
        document.write("<p>Age: {{age}}</p>");
        document.write("<p>Is Student: {{studentStatus}}</p>");

        document.write("<p>num1的值为：" + num1 + "</p>");
        document.write("<p>num2的值为：" + num2 + "</p>");
        document.write("<p>比较结果为：" + result + "</p>");    
    </script>

</body>
</html>

document.write

document.write是JavaScript中的一个方法，它可以将指定的内容直接写入到HTML文档中。通过使用document.write，我们可以在网页加载时动态地向网页添加内容。

使用document.write的语法如下：

document.write(content);

其中，content是要写入到HTML文档中的内容，可以是文本、HTML标签或JavaScript代码。

需要注意的是，document.write会在页面加载时直接将内容写入到HTML文档中，如果在页面加载完成后再使用document.write，它会覆盖整个文档。因此，在实际开发中，我们一般会将document.write与其他DOM操作方法结合使用，以实现更灵活的页面内容更新。

在HTML中，除了使用`document.write`来动态生成内容外，还有其他方式可以展现变量的值。以下是一些常见的展现变量值的方法：

使用innerHTML属性：可以通过获取HTML元素的引用，然后使用innerHTML属性将变量的值赋给该元素的内容。例如：

var name = "John";
var age = 25;
var isStudent = true;

document.getElementById("name").innerHTML = name;
document.getElementById("age").innerHTML = age;
document.getElementById("studentStatus").innerHTML = isStudent ? "Yes" : "No";

在HTML中，需要为对应的元素添加id属性，例如：

<p id="name"></p>
<p id="age"></p>
<p id="studentStatus"></p>

2 使用textContent属性：与innerHTML类似，可以通过获取HTML元素的引用，然后使用textContent属性将变量的值赋给该元素的文本内容。例如：

var name = "John";
var age = 25;
var isStudent = true;

document.getElementById("name").textContent = name;
document.getElementById("age").textContent = age;
document.getElementById("studentStatus").textContent = isStudent ? "Yes" : "No";

在HTML中，需要为对应的元素添加id属性，例如：

<p id="name"></p>
<p id="age"></p>
<p id="studentStatus"></p>

3 使用模板字符串：可以使用ES6中的模板字符串来动态生成HTML内容，并将变量的值插入到模板字符串中。例如：

var name = "John";
var age = 25;
var isStudent = true;

var html = `
    <p>Name: ${name}</p>
    <p>Age: ${age}</p>
    <p>Is Student: ${isStudent ? "Yes" : "No"}</p>
`;

document.getElementById("output").innerHTML = html;

在HTML中，需要有一个容器元素来展示生成的HTML内容，例如：

<div id="output"></div>

这些方法都可以替代document.write来展现变量的值。选择哪种方法取决于具体的需求和场景。

updateNav(currentValue)

updateNav(currentValue) {
                var _a;
                if (this.data.navigation)
                    return;
                const $nav = (_a = this.getRelationNodes('./swiper-nav')) === null || _a === void 0 ? void 0 : _a[0];
                if (!$nav)
                    return;
                const { direction, paginationPosition, list } = this.properties;
                $nav.setData({
                    current: currentValue,
                    total: list.length,
                    direction,
                    paginationPosition,
                });
            },

这段代码是一个函数updateNav(currentValue)的实现。函数的作用是更新导航栏的状态。下面是函数的具体实现逻辑：

首先，函数会检查是否已经存在导航栏，如果已经存在则直接返回，不进行任何操作。
接下来，函数会通过this.getRelationNodes('./swiper-nav')方法获取与当前组件关联的swiper-nav组件实例，并将其赋值给变量$nav。
如果没有找到swiper-nav组件实例，则直接返回，不进行任何操作。
如果找到了swiper-nav组件实例，则从函数的参数properties中获取direction、paginationPosition和list的值。
最后，函数会调用$nav.setData()方法更新导航栏的状态，传入的参数包括当前值currentValue、列表长度list.length、方向direction和分页位置paginationPosition。

const $nav = (_a = this.getRelationNodes('./swiper-nav')) === null || _a === void 0 ? void 0 : _a[0];

这段代码是在JavaScript中定义了一个常量$nav，它的值是通过调用getRelationNodes方法获取到的与当前组件关联的swiper-nav节点数组的第一个元素。在这段代码中，还使用了空值合并运算符??来处理可能的空值情况。

其中$nav是一个变量名，||是逻辑运算符。

$符号的作用：在JavaScript中，$符号通常被用作函数或变量名的前缀，表示该函数或变量与DOM元素相关联。这种命名约定通常用于标识与DOM操作相关的代码，例如使用jQuery库时，选择器函数通常以$开头。
||逻辑运算符的作用： ||是JavaScript中的逻辑或运算符。它用于在两个表达式之间进行逻辑或操作，并返回第一个为真的表达式的值。如果第一个表达式为真，则不会计算第二个表达式。
javascript:void(0) 含义 | 菜鸟教程