样式问题

微信小程序中WXSS无法使用本地图片

1. 使用网络图片

   .bg {
     background-image: url('https://your-server.com/path/to/image.png');
     background-size: 100% 100%;
   }

2. 使用 base64 图片

   .bg {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');
     background-size: 100% 100%;
   }

3. 使用 <image> 组件模拟背景（需要处理层级）

   <!-- WXML -->
   <view class="container">
     <image src="/static/fz12.png" class="bg-image"></image>
     <view class="content">页面内容</view>
   </view>

   /* WXSS */
   .container {
     position: relative;
     width: 100%;
     height: 200rpx;
   }
   .bg-image {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
   }
   .content {
     position: relative;
     z-index: 1;
   }

4. 行内样式

   <view style="background-image: url('https://your-server.com/path/to/image.png'); background-size: 100% 100%;">
     页面内容
   </view>

其他

rpx 是小程序新增的自适应单位，小程序规定，任何型号的手机的屏幕宽度都为 750rpx。

统一使用 rpx 作为单位，rpx 以 750 作为基准（750rpx = 100vw）

---

不支持 * 选择器。使用 Page 选择器（页面）代替

---

在调整组件样式时，建议：

1. 使用外层的 view 包裹组件进行调整。
2. 使用组件暴露出的 style 属性进行调整（如果提供的话）。

---

在封装组件的时候，如果组件的根节点使用了 flex 布局，会导致在小程序端该组件无法正常显示。其原因如下：

H5 端结构类似于：

<view>
  <item />
</view>

而在小程序端接口类似于：

<view>
  <view class="item-wrp">
    <item />
  </view>
</view>

小程序会自动包裹一层，导致 flex 失效。

解决方案：在封装组件时，尽量将结构节点统一封装进组件中。