docs: 添加 readme 项目示例图及使用案例列表 (#65)

* docs: 更新 readme 添加「示例」及「使用案例」 * docs: 添加 esbuild 压缩 css 在支付宝 IDE 中样式兼容问题的说明 * docs: 更新 readme 使用案例列表 * docs: 更新 readme 的使用案例图 * docs: 补充 esbuild 压缩 css 的兼容性说明
eleme · Jun 27, 2023 · 48eee25 · 48eee25
1 parent 9769ea0
commit 48eee25
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,16 @@ Mor 是一套基于小程序 DSL (支付宝或微信) 的框架。他的易用
   - 📚 **类型支持**：除小程序标准文件类型外，还支持 ts、less/scss、jsonc/json5 等多种文件类型；
   - 🧰 **按需适配**：可根据需求选择性接入适配能力，小项目仅需编译功能，中等项目可结合编译和页面注入能力，大型项目推荐使用复杂小程序集成能力；
 
+## 示例
+
+以下是饿了么-美食外卖频道在微信、支付宝、抖音小程序及 H5 中的表现。
+
+<img src="https://img.alicdn.com/imgextra/i2/O1CN01pbpEfK1JHQ6ejbjIb_!!6000000001003-0-tps-2478-1383.jpg" />
+
+## 使用案例
+
+<img src="https://img.alicdn.com/imgextra/i1/O1CN013asjEz1z7XQO84kP6_!!6000000006667-0-tps-1521-3744.jpg" />
+
 ## 贡献
 
 参见 [贡献指南](https://github.com/eleme/morjs/blob/master/CONTRIBUTING.md)

diff --git a/website/docs/guides/basic/config.md b/website/docs/guides/basic/config.md
@@ -504,6 +504,21 @@ ts 编译配置, 大部分和 tsconfig 中的含义一致, 优先级高于 tscon
 
 css 压缩器自定义配置, 使用时请结合 `cssMinimizer` 所指定的压缩器来配置, 不同的压缩器对应的配置方式不同。
 
+> 注意：当 CSS 压缩器 `cssMinimizer` 为 `esbuild` 时，压缩器开启压缩时会默认将 `0.5rpx` 压缩为 `.5rpx` 的形式，而由于 `.5rpx` 的样式压缩写法在支付宝 IDE 中目前(2023.06.26)不支持，需要使用完整的 `0.5rpx` 写法，后续支付宝 IDE 产研同学兼容后将自动修复，如遇到类似问题引发的样式显示错误，可添加以下配置以关闭 minifySyntax 进行兼容
+
+```
+{
+  ...,
+  cssMinimizerOptions: {
+    minify: false,
+    minifyWhitespace: true,
+    minifyIdentifiers: true,
+    minifySyntax: false,
+    legalComments: 'inline',
+  },
+}
+```
+
 ### customEntries - 自定义入口文件配置
 
 - 类型: `object`