feat: uniapp h5兼容

MellowCo · Jul 24, 2022 · 37569bf · 37569bf
1 parent f9b589e
commit 37569bf
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/examples/uniapp_vue2/.hbuilderx/launch.json b/examples/uniapp_vue2/.hbuilderx/launch.json
@@ -0,0 +1,11 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+            "type": "uniCloud",
+            "default": {
+                "launchtype": "local"
+            }
+        }
+    ]
+}
diff --git a/src/index.ts b/src/index.ts
@@ -62,30 +62,43 @@ export interface PresetMiniOptions extends PresetOptions {
   transform?: boolean
 
   /**
-   * taro h5 rem transform
-   * @default false
+   * 平台
+   * @default 'uniapp'
    */
-  isTaroH5?: boolean
-
+  platform?: 'taro' | 'uniapp'
   /**
    * taro h5 rem 换算尺寸标准
    * @default 750
    */
   designWidth?: number
+  /**
+   * 是否为h5
+   * @default false
+   */
+  isH5?: boolean
 }
 
 const rpxRE = /^-?[\.\d]+rpx$/
 
 function taroRpxTransform(size: string, designWidth: number) {
-  return `${Math.ceil((((parseInt(size, 10) / 40) * 640) / designWidth) * 100000) / 100000}`
+  return `${Math.ceil((((parseInt(size, 10) / 40) * 640) / designWidth) * 100000) / 100000}rem`
+}
+
+/**
+ * uniapp postcss rpx 转换规则
+ * pkg: @dcloudio/vue-cli-plugin-uni/packages/postcss 37行
+ */
+function uniAppRpxTransform(size: string) {
+  return `%?${size}?%`
 }
 
 export const presetWeapp = (options: PresetMiniOptions = {}): Preset<Theme> => {
   options.dark = options.dark ?? 'class'
   options.attributifyPseudo = options.attributifyPseudo ?? false
   options.transform = options.transform ?? true
-  options.isTaroH5 = options.isTaroH5 ?? false
+  options.isH5 = options.isH5 ?? false
   options.designWidth = options.designWidth ?? 750
+  options.platform = options.platform ?? 'uniapp'
 
   return {
     name: 'unocss-preset-weapp',
@@ -103,16 +116,19 @@ export const presetWeapp = (options: PresetMiniOptions = {}): Preset<Theme> => {
       if (options.variablePrefix && options.variablePrefix !== 'un-')
         VarPrefixPostprocessor(options.variablePrefix, css)
 
-      if (options.isTaroH5) {
-        // taro h5换算rem尺寸
+      if (options.isH5) {
         css.entries.forEach((i) => {
           const value = i[1]
-          if (value && typeof value === 'string' && rpxRE.test(value))
-            i[1] = `${taroRpxTransform(value.slice(0, -3), options.designWidth!)}rem`
+          if (value && typeof value === 'string' && rpxRE.test(value)) {
+            if (options.platform === 'taro')
+              i[1] = `${taroRpxTransform(value.slice(0, -3), options.designWidth!)}`
+            else
+              i[1] = `${uniAppRpxTransform(value.slice(0, -3))}`
+          }
         })
       }
     },
-    preflights: preflights(options.isTaroH5),
+    preflights: preflights(options.isH5, options.platform),
     prefix: options.prefix,
   }
 }

diff --git a/src/preflights.ts b/src/preflights.ts
@@ -3,7 +3,8 @@ import { entriesToCss } from '@unocss/core'
 import type { Theme } from './theme'
 
 const wxPrefix = 'page'
-const h5Prefix = '*'
+const taroPrefix = '*'
+const uniappPrefix = 'uni-page-body'
 
 // export const preflights: Preflight[] = [
 //   {
@@ -18,17 +19,21 @@ const h5Prefix = '*'
 // ]
 
 /**
- * taro h5替换prefix
- * @param isTaroH5
+ * h5替换prefix
  */
-export default function (isTaroH5: boolean): Preflight[] {
+export default function (isH5: boolean, platform: string): Preflight[] {
   return [
     {
       layer: 'preflights',
       getCSS(ctx: PreflightContext<Theme>) {
         if (ctx.theme.preflightBase) {
           const css = entriesToCss(Object.entries(ctx.theme.preflightBase))
-          return `${isTaroH5 ? h5Prefix : wxPrefix},::before,::after{${css}}::backdrop{${css}}`
+          const preflights = `,::before,::after{${css}}::backdrop{${css}}`
+
+          if (isH5)
+            return `${platform === 'uniapp' ? uniappPrefix : taroPrefix}${preflights}`
+          else
+            return `${wxPrefix}${preflights}`
         }
       },
     },