常见开发问题

判断开发/生产环境

export const isDev = process.env.NODE_ENV === 'development'
export const isProd = process.env.NODE_ENV === 'production'

常见样式问题

不支持 * 选择器。

---

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

---

解决微信小程序的“幽灵边框”

::after {
  border: none;
}

---

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

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

---

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

H5 端结构类似于：

<view>
  <item />
</view>

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

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

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

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

随记

运行项目时，需要点开某个页面文件，再点击运行。

---

每次新增页面、新增插件 …… 需要重新编译一下，若小程序仍没有生效，关闭所有项目，再重新打开项目。