微信小程序封装 金额输入组件

微信小程序封装金额输入组件通常是为了复用和优化用户体验。在微信小程序中，开发者可以创建一个自定义组件，专门用于处理金额输入的功能，比如限制只能输入数字、小数点，并添加货币符号等。以下是步骤概览：

1. **创建组件**：首先，你需要在`pages`文件夹下创建一个新的文件夹，如`components`，然后新建一个文件`amountInput.wxml`, `amountInput.wxss` 和 `amountInput.js` 来分别存放结构、样式和逻辑代码。

<!-- amountInput.wxml -->
<view class="input-wrap">
  <input type="number" placeholder="请输入金额" maxlength="10" bindinput="handleInputChange" />
  <span class="currency">元</span>
</view>

// amountInput.js
Page({
  data: {
    inputValue: ''
  },
  handleInputChange(e) {
    const { detail } = e;
    let inputVal = detail.value.replace(/[^\d.]|(\.[^0-9]+)/g, '');
    this.setData({ inputValue: parseFloat(inputVal.toFixed(2)) });
  }
})

/* amountInput.wxss */
.input-wrap {
  display: flex;
}

2. **封装方法**：在`amountInput.js`里，定义组件的行为，如输入验证和值的更新。

3. **在其他页面引用**：在需要使用的地方通过`import`导入并作为 `<view>` 元素的一部分使用。

4. **暴露接口**：如果需要外部传递数据给这个组件，可以在组件内部暴露事件或属性供外部使用。