wip(x): 支持小红书小程序

packages/uni-mp-core/src/runtime/page.ts

@@ -88,19 +88,19 @@ export function initPageInstance(mpPageInstance: MPComponentInstance) {
   if (__X__) {
     Object.assign(mpPageInstance, {
       get width(): number {
-        if (__PLATFORM__ === 'mp-toutiao') {
+        if (__PLATFORM__ === 'mp-toutiao' || __PLATFORM__ === 'mp-xhs') {
           return __GLOBAL__.getSystemInfoSync().windowWidth
         }
         return __GLOBAL__.getWindowInfo().windowWidth
       },
       get height(): number {
         const windowInfo = __GLOBAL__.getWindowInfo()
         // 某些版本的微信小程序开发工具获取tabBar页面的screenTop不对，其数值包含了tabBar高度及底部安全区，如果有开发者问起让他使用真机测试即可。
-        // TODO 抖音小程序没有 getWindowInfo 方法，暂时无法获取 screenTop
+        // TODO 抖音小程序、小红书小程序没有 getWindowInfo 方法，暂时无法获取 screenTop
         return windowInfo.windowHeight + windowInfo.screenTop
       },
       get statusBarHeight(): number {
-        if (__PLATFORM__ === 'mp-toutiao') {
+        if (__PLATFORM__ === 'mp-toutiao' || __PLATFORM__ === 'mp-xhs') {
           return __GLOBAL__.getSystemInfoSync().statusBarHeight
         }
         return __GLOBAL__.getWindowInfo().statusBarHeight

packages/uni-mp-vite/src/plugin/index.ts

@@ -197,7 +197,7 @@ export function uniMiniProgramPlugin(
         const extname = template.filter.extname
         if (isX) {
           if (process.env.UNI_COMPILE_TARGET !== 'uni_modules') {
-            // 目前 mp-weixin（mp-qq）、mp-alipay（mp-dingtalk）、mp-toutiao（mp-lark）均支持视图层setStyle
+            // 目前 mp-weixin（mp-qq）、mp-alipay（mp-dingtalk）、mp-toutiao（mp-lark）、mp-xhs 均支持视图层setStyle
             if (template.filter.setStyle && !autoImportFilterEmitted) {
               autoImportFilterEmitted = true
               let uniViewPath = '../../lib/filters/uniView.cjs.js'

packages/uni-mp-vue/src/plugin.ts

@@ -14,6 +14,10 @@ function getStatusBarHeight() {
   } else if (typeof my !== 'undefined') {
     // @ts-expect-error
     return my.getWindowInfo().statusBarHeight
+  } else if (typeof tt !== 'undefined') {
+    return tt.getSystemInfoSync().statusBarHeight
+  } else if (typeof xhs !== 'undefined') {
+    return xhs.getSystemInfoSync().statusBarHeight
   }
 }
 // #endif

packages/uni-mp-xhs/__tests__/component.spec.ts

@@ -1,4 +1,5 @@
 import { assert } from './testUtils'
+import { transformMPBuiltInTag } from '../src/compiler/transforms/transformMPBuiltInTag'
 
 describe('mp-xhs: transform component', () => {
   test('lazy element: textarea', () => {
@@ -86,3 +87,158 @@ describe('mp-xhs: transform component', () => {
     )
   })
 })
+
+describe('mp-xhs: transform component x', () => {
+  test('checkbox prop rename', () => {
+    assert(
+      `<checkbox fore-color="#FF0000"/>`,
+      `<checkbox color="#FF0000" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+
+    assert(
+      `<checkbox fore-color="#FF0000" checked/>`,
+      `<checkbox color="#FF0000" checked style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+  })
+
+  test('radio prop rename', () => {
+    assert(
+      `<radio active-background-color="#FF0000"/>`,
+      `<radio color="#FF0000" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+
+    assert(
+      `<radio color="#FF0000"/>`,
+      `<radio color="#FF0000" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+  })
+
+  test('slider prop rename', () => {
+    assert(
+      `<slider active-background-color="#FF0000" fore-color="#00FF00"/>`,
+      `<slider active-color="#FF0000" block-color="#00FF00" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+
+    assert(
+      `<slider active-background-color="#FF0000"/>`,
+      `<slider active-color="#FF0000" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+
+    assert(
+      `<slider fore-color="#00FF00"/>`,
+      `<slider block-color="#00FF00" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+  })
+
+  test('switch prop rename', () => {
+    assert(
+      `<switch active-background-color="#FF0000"/>`,
+      `<switch color="#FF0000" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+
+    assert(
+      `<switch color="#FF0000"/>`,
+      `<switch color="#FF0000" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+  })
+
+  test('tag rename: list-view to scroll-view', () => {
+    assert(
+      `<list-view/>`,
+      `<scroll-view style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+
+    assert(
+      `<list-view scroll-y="true"/>`,
+      `<scroll-view scroll-y="true" style="{{'--status-bar-height:' + a}}"/>`,
+      `(_ctx, _cache) => { "raw js"
+  const __returned__ = { a: \`\${_ctx.u_s_b_h}px\` }
+  return __returned__
+}`,
+      {
+        isX: true,
+        nodeTransforms: [transformMPBuiltInTag],
+      }
+    )
+  })
+})

packages/uni-mp-xhs/build.json

@@ -43,5 +43,35 @@
       "@vue/shared",
       "vue"
     ]
+  },
+  {
+    "input": {
+      "src/x/runtime/index.ts": "dist-x/uni.mp.esm.js",
+      "src/x/api/index.ts": "dist-x/uni.api.esm.js"
+    },
+    "alias": {
+      "entries": [
+        {
+          "find": "@dcloudio/uni-platform",
+          "replacement": "packages/uni-mp-xhs/src/platform/index.ts"
+        },
+        {
+          "find": "@dcloudio/uni-mp-platform",
+          "replacement": "packages/uni-mp-core/src/platform/index.ts"
+        }
+      ]
+    },
+    "replacements": {
+      "__GLOBAL__": "xhs",
+      "__X__": "true",
+      "__PLATFORM__": "\"mp-xhs\"",
+      "__PLATFORM_TITLE__": "小红书小程序"
+    },
+    "external": [
+      "@dcloudio/uni-i18n",
+      "@dcloudio/uni-shared",
+      "@vue/shared",
+      "vue"
+    ]
   }
 ]

packages/uni-mp-xhs/src/compiler/options.ts

@@ -1,31 +1,41 @@
-import path from 'path'
 import type { CompilerOptions } from '@vue/compiler-core'
 import {
   type MiniProgramCompilerOptions,
   createCopyComponentDirs,
   createCopyPluginTarget,
   getNativeTags,
   transformComponentLink,
+  transformDirection,
   // transformMatchMedia,
   transformRef,
 } from '@dcloudio/uni-cli-shared'
-import type { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
+import {
+  type UniMiniProgramPluginOptions,
+  resolveMiniProgramRuntime,
+} from '@dcloudio/uni-mp-vite'
 
 import source from './project.config.json'
 import { transformOn } from './transforms/vOn'
 import { transformModel } from './transforms/vModel'
+import { transformMPBuiltInTag } from './transforms/transformMPBuiltInTag'
 
 const directiveTransforms = {
   on: transformOn,
   model: transformModel,
 }
 
+const nodeTransforms = [
+  transformRef,
+  transformComponentLink,
+  // transformMatchMedia
+]
+
+if (process.env.UNI_APP_X === 'true') {
+  nodeTransforms.push(transformMPBuiltInTag, transformDirection)
+}
+
 export const compilerOptions: CompilerOptions = {
-  nodeTransforms: [
-    transformRef,
-    transformComponentLink,
-    // transformMatchMedia
-  ],
+  nodeTransforms,
   directiveTransforms,
 }
 
@@ -77,17 +87,21 @@ export const miniProgram: MiniProgramCompilerOptions = {
   component: {
     dir: COMPONENTS_DIR,
   },
+  filter: {
+    lang: 'sjs',
+    setStyle: true,
+  },
 }
 const projectConfigFilename = 'project.config.json'
 
 export const options: UniMiniProgramPluginOptions = {
   cdn: 12,
   vite: {
     inject: {
-      uni: [path.resolve(__dirname, 'uni.api.esm.js'), 'default'],
+      uni: [resolveMiniProgramRuntime(__dirname, 'uni.api.esm.js'), 'default'],
     },
     alias: {
-      'uni-mp-runtime': path.resolve(__dirname, 'uni.mp.esm.js'),
+      'uni-mp-runtime': resolveMiniProgramRuntime(__dirname, 'uni.mp.esm.js'),
     },
     copyOptions: {
       assets: createCopyComponentDirs(COMPONENTS_DIR),
@@ -124,6 +138,7 @@ export const options: UniMiniProgramPluginOptions = {
     ...miniProgram,
     customElements,
     filter: {
+      ...miniProgram.filter,
       extname: '.sjs',
       lang: 'sjs',
       generate(filter, filename) {

packages/uni-mp-xhs/src/compiler/transforms/transformMPBuiltInTag.ts

@@ -0,0 +1,26 @@
+import { createMPBuiltInTagTransform } from '@dcloudio/uni-cli-shared'
+
+const transformMPBuiltInTagOptions = {
+  propRename: {
+    checkbox: {
+      foreColor: 'color',
+    },
+    radio: {
+      activeBackgroundColor: 'color',
+    },
+    slider: {
+      activeBackgroundColor: 'active-color',
+      foreColor: 'block-color',
+    },
+    switch: {
+      activeBackgroundColor: 'color',
+    },
+  },
+  tagRename: {
+    'list-view': 'scroll-view',
+  },
+}
+
+export const transformMPBuiltInTag = createMPBuiltInTagTransform(
+  transformMPBuiltInTagOptions
+)

packages/uni-mp-xhs/src/x/api/index.ts

@@ -0,0 +1,4 @@
+import { initUni } from '@dcloudio/uni-mp-core'
+import * as shims from '../../api/shims'
+import * as protocols from '../../api/protocols'
+export default initUni(shims, protocols)

packages/uni-mp-xhs/src/x/runtime/index.ts

@@ -0,0 +1,8 @@
+import './polyfill'
+export {
+  UTS,
+  UTSJSONObject,
+  UTSValueIterable,
+  UniError,
+} from '@dcloudio/uni-shared'
+export * from '../../runtime'

packages/uni-mp-xhs/src/x/runtime/polyfill.ts

@@ -0,0 +1,12 @@
+import {
+  UTS,
+  UTSJSONObject,
+  UTSValueIterable,
+  UniError,
+  getGlobal,
+} from '@dcloudio/uni-shared'
+const realGlobal = getGlobal()
+realGlobal.UTS = UTS
+realGlobal.UTSJSONObject = UTSJSONObject
+realGlobal.UTSValueIterable = UTSValueIterable
+realGlobal.UniError = UniError