小程序组件

当然，下面是一个简单的示例来展示如何在微信小程序中创建一个自定义组件，并将其引入到页面中。这个示例将包括组件的创建、样式定义以及如何在页面中使用该组件。

1. 创建自定义组件

假设我们要创建一个名为 my-component 的组件。

组件目录结构

/components/my-component/
├── my-component.js
├── my-component.json
├── my-component.wxml
└── my-component.wxss

my-component.json

{
  "component": true
}

my-component.js

Component({
  properties: {
    // 这里可以定义组件的属性
    title: {
      type: String,
      value: "默认标题",
    },
  },
  data: {
    // 组件内部数据
  },
  methods: {
    // 组件方法
  },
});

my-component.wxml

<view class="container">
  <text>{{title}}</text>
</view>

my-component.wxss

.container {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
}

.container text {
  font-size: 16px;
  color: #333;
}

2. 在页面中引入和使用组件

假设我们有一个页面 pages/index/index，我们需要在这个页面中使用 my-component 组件。

index.json

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

index.wxml

<view class="page-container">
  <my-component title="这是标题"></my-component>
</view>

index.wxss

.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

3. 页面逻辑 (可选)

如果你需要在页面中处理一些逻辑，可以在 index.js 中进行定义：

index.js

Page({
  data: {
    // 页面数据
  },
  onLoad: function () {
    // 页面加载时执行
  },
});

4. 实现计算属性

在微信小程序中，组件本身并没有直接提供类似于 Vue.js 中的计算属性（computed properties）的内置机制。不过，你可以通过一些方法来实现类似的功能。计算属性的主要用途是根据其他数据动态计算出新的数据，并且当依赖的数据发生变化时，计算属性会自动更新。

实现计算属性的方法

1. 使用 data 和 methods 结合： 你可以在组件的 data 中定义一个属性，并在 methods 中编写一个方法来计算该属性的值。每当依赖的数据发生变化时，手动调用该方法更新 data。

2. 使用 observers： 微信小程序提供了 observers 属性，可以监听某些数据的变化，并在变化时执行相应的逻辑。这可以用来模拟计算属性的行为。

3. 使用 getters 和 setters： 你可以在组件的 properties 中定义 getter 和 setter 方法来实现计算属性。

Component({
  properties: {
    firstName: {
      type: String,
      value: "",
    },
    lastName: {
      type: String,
      value: "",
    },
  },

  data: {
    fullName: "",
  },

  methods: {
    updateFullName: function () {
      const { firstName, lastName } = this.properties;
      this.setData({
        fullName: `${firstName} ${lastName}`,
      });
    },
  },

  observers: {
    "firstName, lastName": function (firstName, lastName) {
      this.updateFullName();
    },
  },

  attached: function () {
    this.updateFullName();
  },
});

• data 中定义了一个 fullName 属性。
• methods 中定义了一个 updateFullName 方法，用于更新 fullName。
• observers 监听 firstName 和 lastName 的变化，并在变化时调用 updateFullName 方法。
• 在 attached 生命周期函数中初始化 fullName。

Component({
  properties: {
    firstName: {
      type: String,
      value: ''
    },
    lastName: {
      type: String,
      value: ''
    }
  },

  data: {
    _fullName: ''
  },

  methods: {
    get fullName() {
      return this.data._fullName;
    },

    set fullName(value) {
      this.setData({ _fullName: value });
    },

    updateFullName: function() {
      const { firstName, lastName } = this.properties;
      this.fullName = `${firstName} ${lastName}`;
    }
  },

  observers: {
    'firstName, lastName': function(firstName, lastName) {
      this.updateFullName();
    }
  },

  attached: function() {
    this.updateFullName();
  }
});

• data 中定义了一个 _fullName 属性。
• methods 中定义了 get fullName 和 set fullName 方法，用于获取和设置 fullName。
• updateFullName 方法用于更新 fullName。
• observers 监听 firstName 和 lastName 的变化，并在变化时调用 updateFullName 方法。
• 在 attached 生命周期函数中初始化 fullName。

总结

• 组件：/components/my-component/ 目录下包含了组件的所有文件。
• 页面：/pages/index/ 目录下的 index.json 文件中声明了要使用的组件，并在 index.wxml 文件中使用了该组件。
• 样式：组件的样式在 my-component.wxss 中定义，这些样式应该只作用于组件本身，除非使用了 :global() 选择器。

通过这种方式，你可以确保组件的样式能够正确地应用到组件上。如果样式仍然没有生效，请检查路径是否正确，以及是否有其他全局样式覆盖了组件的样式。