在微信小程序中编写组件的步骤如下：
创建组件文件
在微信小程序的项目目录中，新建一个文件夹用于存放组件文件，例如名为"components"。
在该文件夹中创建一个文件夹用于存放组件相关文件，例如名为"myComponent"。
在这个文件夹下，创建四个文件：`myComponent.wxml`、`myComponent.wxss`、`myComponent.js`、`myComponent.json`，分别用于定义组件的结构、样式、逻辑和配置。
编写组件文件
myComponent.wxml：编写组件的结构，可以使用标签来定义组件的模板。
myComponent.wxss：编写组件的样式，可以使用组件内部样式和外部样式。
myComponent.js：编写组件的逻辑，包括数据、事件处理等。
myComponent.json：配置组件的属性和引用路径。
注册组件
在需要使用组件的页面的json文件中，使用"usingComponents"字段来注册组件，指定组件的名称和路径，例如：
```json
{
"usingComponents": {
"my-component": "/components/myComponent/myComponent"
}
}
```
在页面中使用组件
在页面的wxml文件中，使用自定义组件的标签名来引用组件，例如：
```html
```
示例
假设我们要创建一个简单的`toast`组件，包含`img`和`title`两个属性，可以在`myComponent.wxml`中定义模板，`myComponent.wxss`中定义样式，`myComponent.js`中定义逻辑。
myComponent.wxml：
```html
```
myComponent.wxss：
```css
.toast-container {
position: fixed；
top: 20px；
right: 20px；
background-color: rgba（0, 0, 0, 0.7）；
color: fff；
padding: 10px；
border-radius: 5px；
display: flex；
align-items: center；
}
.toast-content {
margin-right: 10px；
}
```
myComponent.js：
```javascript
Component（{
properties: {
img: {
type: String,
value: ''
},
title: {
type: String,
value: ''
}
}
}）
```
myComponent.json：
```json
{
"component": true
}
```
在需要使用该组件的页面中，注册并引用组件：
index.json：
```json
{
"usingComponents": {
"my-toast": "/components/myToast/myToast"
}
}
```
index.wxml：
```html
```
index.js：
```javascript
Page（{
data: {
toastImg: 'https://example.com/success.png',
toastTitle: '操作成功'
}
}）
```
通过以上步骤，你就可以在微信小程序中创建并使用自定义组件了。