微信小程序遮罩层帮我写一个

微信小程序的遮罩层通常用于显示加载、提示信息等场景，当需要暂时隐藏界面内容时会弹出。下面是一个简单的微信小程序遮罩层组件示例，你可以将其添加到你的项目里：

<!-- app.json -->
{
  "pages": [
    "pages/index/index",
    "components/view-mask/view-mask"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat Mini Program",
    "navigationBarTextStyle": "black"
  }
}

<!-- view-mask.wxml -->
<view class="mask" @click="closeMask">
  <view class="mask-content">
    <text>正在加载...</text>
  </view>
</view>

<!-- view-mask.wxss -->
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mask.open {
  opacity: 1;
}

<!-- view-mask.js -->
Page({
  data: {
    maskVisible: false,
  },
  showMask() {
    this.setData({ maskVisible: true });
  },
  closeMask: function() {
    this.setData({ maskVisible: false });
  },
})

在这个例子中，`view-mask`组件负责显示和关闭遮罩层，通过`showMask`方法开启遮罩，并在页面上点击遮罩时关闭它。记得将这个组件引入到你需要的地方，并根据实际需求调整样式。