create-weapp-vite 2.3.3 → 2.3.5

package/templates/plugin/plugin/pages/native-playground/index.ts

@@ -0,0 +1,20 @@
+import { getFeatureCards, getPluginShowcaseSummary, getScoreTone } from '../../utils/showcase'
+
+Page({
+  data: {
+    cards: getFeatureCards(),
+    currentCard: getFeatureCards()[0],
+    currentIndex: 0,
+    meterTone: 'success',
+    pluginSummary: getPluginShowcaseSummary(),
+  },
+  nextCard() {
+    const nextIndex = (this.data.currentIndex + 1) % this.data.cards.length
+    const currentCard = this.data.cards[nextIndex]
+    this.setData({
+      currentCard,
+      currentIndex: nextIndex,
+      meterTone: getScoreTone(currentCard.score),
+    })
+  },
+})

package/templates/plugin/plugin/pages/native-playground/index.wxml

@@ -0,0 +1,30 @@
+<view class="page">
+  <view class="hero">
+    <text class="hero__eyebrow">plugin native page</text>
+    <text class="hero__title">原生 `Page` 继续可用</text>
+    <text class="hero__desc">
+      这个页面保持原生小程序组织方式，但同样可以 import 插件内部的 TS 数据模块，并挂载 Vue SFC 组件。
+    </text>
+  </view>
+
+  <view class="panel">
+    <text class="panel__title">当前聚焦能力</text>
+    <text class="panel__line">{{ currentCard.title }}</text>
+    <text class="panel__line">{{ currentCard.summary }}</text>
+    <text class="panel__line">{{ pluginSummary }}</text>
+    <native-meter
+      label="{{ currentCard.kindLabel }}"
+      value="{{ currentCard.score }}"
+      tone="{{ meterTone }}"
+    />
+    <button class="panel__button" bindtap="nextCard">
+      查看下一项能力
+    </button>
+  </view>
+
+  <hello-showcase
+    title="原生页中组合插件 Vue SFC 组件"
+    note="说明原生入口和 Vue SFC 入口可以在同一个插件工程里并存。"
+    entries="{{ cards }}"
+  />
+</view>

package/templates/plugin/plugin/plugin.json

@@ -0,0 +1,11 @@
+{
+  "publicComponents": {
+    "hello-component": "components/hello-component/index",
+    "native-meter": "components/native-meter/index"
+  },
+  "pages": {
+    "hello-page": "pages/hello-page/index",
+    "native-playground": "pages/native-playground/index"
+  },
+  "main": "index.js"
+}

package/templates/plugin/plugin/utils/showcase.ts

@@ -0,0 +1,102 @@
+import dayjs from 'dayjs'
+
+export type PluginFeatureKind = 'vue-sfc' | 'native-ts' | 'scss'
+
+export interface PluginFeatureCard {
+  id: string
+  title: string
+  summary: string
+  kind: PluginFeatureKind
+  kindLabel: string
+  score: number
+}
+
+const featureCards: PluginFeatureCard[] = [
+  {
+    id: 'vue-page',
+    title: '插件页面支持 Vue SFC',
+    summary: '页面直接使用 <script setup lang="ts">、definePageJson 与 wevu 响应式状态。',
+    kind: 'vue-sfc',
+    kindLabel: 'Vue SFC',
+    score: 96,
+  },
+  {
+    id: 'public-component',
+    title: '插件公开组件也可以是 Vue SFC',
+    summary: '宿主通过 plugin:// 引用 Vue SFC 组件，运行时仍保持小程序组件语义。',
+    kind: 'vue-sfc',
+    kindLabel: 'Vue SFC',
+    score: 91,
+  },
+  {
+    id: 'native-meter',
+    title: '插件原生组件支持 TypeScript',
+    summary: '原生 Component 入口可以写成 index.ts，并保留属性类型约束与默认值。',
+    kind: 'native-ts',
+    kindLabel: 'Native TS',
+    score: 88,
+  },
+  {
+    id: 'scss-pipeline',
+    title: '插件样式可直接走 SCSS 管线',
+    summary: '无论是原生组件的独立 .scss，还是 Vue SFC 的 <style lang="scss"> 都可正常编译。',
+    kind: 'scss',
+    kindLabel: 'SCSS',
+    score: 93,
+  },
+]
+
+const pluginNpmBuildStamp = dayjs('2026-03-19T12:34:00').format('YYYY/MM/DD HH:mm')
+
+/**
+ * 返回用于展示的插件能力卡片。
+ */
+export function getFeatureCards() {
+  return featureCards.map(card => ({ ...card }))
+}
+
+/**
+ * 返回按类别筛选后的插件能力卡片。
+ */
+export function getFeatureCardsByKind(kind: PluginFeatureKind | 'all') {
+  if (kind === 'all') {
+    return getFeatureCards()
+  }
+  return featureCards
+    .filter(card => card.kind === kind)
+    .map(card => ({ ...card }))
+}
+
+/**
+ * 返回能力类别的中文标签。
+ */
+export function getFeatureKindLabel(kind: PluginFeatureKind) {
+  const labelMap: Record<PluginFeatureKind, string> = {
+    'vue-sfc': 'Vue SFC',
+    'native-ts': 'Native TS',
+    'scss': 'SCSS',
+  }
+  return labelMap[kind]
+}
+
+/**
+ * 根据得分返回展示组件使用的色调。
+ */
+export function getScoreTone(score: number) {
+  if (score >= 92) {
+    return 'success'
+  }
+  if (score >= 80) {
+    return 'neutral'
+  }
+  return 'danger'
+}
+
+/**
+ * 返回插件能力总览文案。
+ */
+export function getPluginShowcaseSummary() {
+  const total = featureCards.length
+  const average = Math.round(featureCards.reduce((sum, item) => sum + item.score, 0) / total)
+  return `插件共暴露 ${total} 个示例切面，平均完成度 ${average}%，npm(dayjs) 构建标记 ${pluginNpmBuildStamp}`
+}

package/templates/plugin/project.config.json

@@ -0,0 +1,48 @@
+{
+  "description": "项目配置文件",
+  "miniprogramRoot": "dist/",
+  "pluginRoot": "dist-plugin/",
+  "compileType": "plugin",
+  "libVersion": "3.13.2",
+  "srcMiniprogramRoot": "dist/",
+  "appid": "touristappid",
+  "setting": {
+    "es6": true,
+    "postcss": false,
+    "compileWorklet": false,
+    "minified": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "enhance": false,
+    "packNpmManually": true,
+    "packNpmRelationList": [
+      {
+        "packageJsonPath": "./package.json",
+        "miniprogramNpmDistDir": "./dist"
+      }
+    ],
+    "minifyWXSS": true,
+    "minifyWXML": true,
+    "localPlugins": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "disableUseStrict": false,
+    "useCompilerPlugins": false
+  },
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

package/templates/plugin/project.private.config.json

@@ -0,0 +1,8 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "libVersion": "3.15.0",
+  "projectname": "weapp-vite-plugin-template",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

package/templates/plugin/shared/shared-data.ts

@@ -0,0 +1,12 @@
+let loadCount = 0
+
+export const SHARED_ANSWER = 42
+
+/**
+ * Returns a string that identifies how many times this shared module has been evaluated.
+ * Plugin and miniprogram each log the value to verify their bundles do not reuse code.
+ */
+export function getSharedLoadMessage(consumer: string) {
+  loadCount += 1
+  return `[shared:${consumer}] load #${loadCount}`
+}

package/templates/plugin/src/app.json

@@ -0,0 +1,11 @@
+{
+  "pages": [
+    "pages/index/index"
+  ],
+  "plugins": {
+    "hello-plugin": {
+      "version": "dev",
+      "provider": "touristappid"
+    }
+  }
+}

package/templates/plugin/src/app.ts

@@ -0,0 +1,5 @@
+// app.js
+App({
+  onLaunch() {
+  },
+})

package/templates/plugin/src/pages/index/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "hello-showcase": "plugin://hello-plugin/hello-component",
+    "native-meter": "plugin://hello-plugin/native-meter"
+  }
+}

package/templates/plugin/src/pages/index/index.ts

@@ -0,0 +1,46 @@
+import { getSharedLoadMessage } from '@/shared/shared-data'
+
+interface PluginFeatureCard {
+  id: string
+  title: string
+  summary: string
+  kindLabel: string
+  score: number
+}
+
+interface HelloPlugin {
+  answer: number
+  getFeatureCards: () => PluginFeatureCard[]
+  getShowcaseSummary: () => string
+  sayHello: () => string
+}
+
+const plugin = requirePlugin('hello-plugin') as HelloPlugin
+
+Page({
+  data: {
+    featureCards: [] as PluginFeatureCard[],
+    hostMessage: '',
+    pluginMessage: '',
+    pluginAnswer: 0,
+    pluginSummary: '',
+    showcaseProgress: 78,
+  },
+  onLoad() {
+    this.setData({
+      featureCards: plugin.getFeatureCards(),
+      hostMessage: getSharedLoadMessage('miniprogram'),
+      pluginMessage: plugin.sayHello(),
+      pluginAnswer: plugin.answer,
+      pluginSummary: plugin.getShowcaseSummary(),
+    })
+  },
+  boostShowcase() {
+    const nextValue = this.data.showcaseProgress >= 96
+      ? 72
+      : this.data.showcaseProgress + 6
+    this.setData({
+      showcaseProgress: nextValue,
+    })
+  },
+})

package/templates/plugin/src/pages/index/index.wxml

@@ -0,0 +1,46 @@
+<view class="page">
+  <view class="hero">
+    <text class="hero__eyebrow">weapp-vite plugin demo</text>
+    <text class="hero__title">插件能力混合演示</text>
+    <text class="hero__desc">
+      宿主页面直接消费插件导出的 TS API，同时挂载插件公开组件，验证 plugin 场景下的多种编译入口。
+    </text>
+  </view>
+
+  <view class="panel">
+    <text class="panel__title">宿主拿到的插件信息</text>
+    <text class="panel__line">plugin.answer = {{ pluginAnswer }}</text>
+    <text class="panel__line">{{ hostMessage }}</text>
+    <text class="panel__line">{{ pluginMessage }}</text>
+    <text class="panel__line">{{ pluginSummary }}</text>
+  </view>
+
+  <view class="nav-grid">
+    <navigator class="nav-card" url="plugin://hello-plugin/hello-page">
+      <text class="nav-card__title">插件 Vue SFC 页面</text>
+      <text class="nav-card__desc">`script setup lang="ts"` + `lang="scss"` + wevu 响应式</text>
+    </navigator>
+    <navigator class="nav-card nav-card--alt" url="plugin://hello-plugin/native-playground">
+      <text class="nav-card__title">插件原生 TS 页面</text>
+      <text class="nav-card__desc">原生 `Page` + `ts` + 独立 `.scss` + 组件组合</text>
+    </navigator>
+  </view>
+
+  <hello-showcase
+    title="宿主直接渲染插件公开 Vue SFC 组件"
+    note="组件数据来自插件导出的 TS 模块，宿主只负责绑定。"
+    entries="{{ featureCards }}"
+  />
+
+  <view class="panel">
+    <text class="panel__title">宿主直接渲染插件公开原生组件</text>
+    <native-meter
+      label="Plugin Native Meter"
+      value="{{ showcaseProgress }}"
+      tone="success"
+    />
+    <button class="panel__button" bindtap="boostShowcase">
+      切换插件原生组件进度
+    </button>
+  </view>
+</view>

package/templates/plugin/src/pages/index/index.wxss

@@ -0,0 +1,113 @@
+page {
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top right, rgb(111 233 217 / 22%), transparent 30%),
+    linear-gradient(180deg, #f4f8ff 0%, #eef2fb 100%);
+}
+
+.page {
+  padding: 32rpx 24rpx 48rpx;
+}
+
+.hero,
+.panel,
+.nav-card {
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 28rpx;
+}
+
+.hero {
+  padding: 36rpx 32rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #20365c 0%, #32518c 58%, #4b7ed1 100%);
+  box-shadow: 0 22rpx 48rpx rgb(34 58 99 / 18%);
+}
+
+.hero__eyebrow {
+  display: block;
+  margin-bottom: 12rpx;
+  font-size: 22rpx;
+  text-transform: uppercase;
+  letter-spacing: 3rpx;
+  opacity: 0.72;
+}
+
+.hero__title {
+  display: block;
+  font-size: 42rpx;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.hero__desc {
+  display: block;
+  margin-top: 18rpx;
+  font-size: 26rpx;
+  line-height: 1.7;
+  opacity: 0.92;
+}
+
+.panel {
+  padding: 28rpx;
+  margin-top: 24rpx;
+  background: rgb(255 255 255 / 88%);
+  box-shadow: 0 12rpx 30rpx rgb(62 86 124 / 10%);
+}
+
+.panel__title {
+  display: block;
+  margin-bottom: 16rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1e2c47;
+}
+
+.panel__line {
+  display: block;
+  margin-top: 10rpx;
+  font-size: 25rpx;
+  line-height: 1.7;
+  color: #52627f;
+}
+
+.panel__button {
+  margin-top: 20rpx;
+  font-size: 26rpx;
+  color: #fff;
+  background: #284a82;
+  border-radius: 999rpx;
+}
+
+.nav-grid {
+  display: flex;
+  gap: 20rpx;
+  margin-top: 24rpx;
+}
+
+.nav-card {
+  flex: 1;
+  min-height: 196rpx;
+  padding: 28rpx;
+  background: linear-gradient(180deg, #fbfdff 0%, #f3f7ff 100%);
+  box-shadow: 0 12rpx 26rpx rgb(72 97 136 / 10%);
+}
+
+.nav-card--alt {
+  background: linear-gradient(180deg, #fffdf7 0%, #fff4db 100%);
+}
+
+.nav-card__title {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1d2c47;
+}
+
+.nav-card__desc {
+  display: block;
+  margin-top: 14rpx;
+  font-size: 24rpx;
+  line-height: 1.65;
+  color: #5d6a82;
+}

package/templates/plugin/src/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+    "action": "allow",
+    "page": "*"
+  }]
+}

package/templates/plugin/stylelint.config.js

@@ -0,0 +1,5 @@
+import { icebreaker } from '@icebreakers/stylelint-config'
+
+export default icebreaker({
+  miniProgram: true,
+})

package/templates/plugin/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "references": [
+    {
+      "path": "./.weapp-vite/tsconfig.app.json"
+    },
+    {
+      "path": "./.weapp-vite/tsconfig.server.json"
+    },
+    {
+      "path": "./.weapp-vite/tsconfig.node.json"
+    },
+    {
+      "path": "./.weapp-vite/tsconfig.shared.json"
+    }
+  ],
+  "files": []
+}

package/templates/plugin/weapp-vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'weapp-vite/config'
+
+export default defineConfig({
+  weapp: {
+    srcRoot: 'src',
+    pluginRoot: 'plugin',
+    typescript: {
+      app: {
+        compilerOptions: {
+          paths: {
+            '@/*': ['./*'],
+          },
+        },
+      },
+    },
+    npm: {
+      enable: true,
+      pluginPackage: {
+        dependencies: ['dayjs'],
+      },
+    },
+  },
+})

package/templates/tailwindcss/eslint.config.js

@@ -2,5 +2,8 @@ import { icebreaker } from '@icebreakers/eslint-config'
 
 export default icebreaker({
   miniProgram: true,
-  ignores: ['CHANGELOG.md', 'README.md', '.turbo/**'],
+  tailwindcss: {
+    entryPoint: './src/app.css',
+  },
+  ignores: ['CHANGELOG.md', 'README.md', '.turbo/**', 'dist/**', '.weapp-vite/**'],
 })

package/templates/tailwindcss/package.json

@@ -32,13 +32,14 @@
     "@icebreakers/eslint-config": "catalog:",
     "@icebreakers/stylelint-config": "catalog:",
     "@iconify-json/mdi": "catalog:",
-    "autoprefixer": "catalog:",
+    "@tailwindcss/postcss": "catalog:",
+    "@types/node": "catalog:",
     "eslint": "catalog:",
     "miniprogram-api-typings": "catalog:",
     "postcss": "catalog:",
     "sass": "catalog:",
     "stylelint": "catalog:",
-    "tailwindcss": "catalog:tailwind3",
+    "tailwindcss": "catalog:tailwind4",
     "typescript": "catalog:",
     "weapp-tailwindcss": "catalog:",
     "weapp-vite": "workspace:*",

package/templates/tailwindcss/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

package/templates/tailwindcss/src/app.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@config "../tailwind.config.ts";

package/templates/tailwindcss/src/pages/index/index.scss

@@ -0,0 +1 @@
+/* empty */

package/templates/tailwindcss/src/pages/profile/index.scss

@@ -0,0 +1 @@
+/* empty */

package/templates/tailwindcss/tailwind.config.ts

@@ -14,9 +14,4 @@ export default {
       collections: getIconCollections(['mdi']),
     }),
   ],
-  corePlugins: {
-    // 小程序不需要 preflight 和 container，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
-    preflight: false,
-    container: false,
-  },
 } satisfies Config

package/templates/tailwindcss/weapp-vite.config.ts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import { weappTailwindcss } from 'weapp-tailwindcss/vite'
 import { defineConfig } from 'weapp-vite'
 
@@ -32,6 +33,7 @@ export default defineConfig({
   plugins: [
     weappTailwindcss({
       rem2rpx: true,
+      cssEntries: [path.resolve(import.meta.dirname, 'src/app.css')],
     }),
   ],
 })

package/templates/tdesign/eslint.config.js

@@ -2,5 +2,8 @@ import { icebreaker } from '@icebreakers/eslint-config'
 
 export default icebreaker({
   miniProgram: true,
-  ignores: ['CHANGELOG.md', 'README.md', '.turbo/**'],
+  tailwindcss: {
+    entryPoint: './src/app.css',
+  },
+  ignores: ['CHANGELOG.md', 'README.md', '.turbo/**', 'dist/**', '.weapp-vite/**'],
 })

package/templates/tdesign/package.json

@@ -35,13 +35,14 @@
     "@icebreakers/eslint-config": "catalog:",
     "@icebreakers/stylelint-config": "catalog:",
     "@iconify-json/mdi": "catalog:",
-    "autoprefixer": "catalog:",
+    "@tailwindcss/postcss": "catalog:",
+    "@types/node": "catalog:",
     "eslint": "catalog:",
     "miniprogram-api-typings": "catalog:",
     "postcss": "catalog:",
     "sass": "catalog:",
     "stylelint": "catalog:",
-    "tailwindcss": "catalog:tailwind3",
+    "tailwindcss": "catalog:tailwind4",
     "typescript": "catalog:",
     "weapp-tailwindcss": "catalog:",
     "weapp-vite": "workspace:*",

package/templates/tdesign/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

package/templates/tdesign/src/app.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@config "../tailwind.config.ts";

package/templates/tdesign/src/pages/index/index.scss

@@ -0,0 +1 @@
+/* empty */

package/templates/tdesign/tailwind.config.ts

@@ -14,9 +14,4 @@ export default {
       collections: getIconCollections(['mdi']),
     }),
   ],
-  corePlugins: {
-    // 小程序不需要 preflight 和 container，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
-    preflight: false,
-    container: false,
-  },
 } satisfies Config

package/templates/tdesign/weapp-vite.config.ts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import { weappTailwindcss } from 'weapp-tailwindcss/vite'
 import { defineConfig } from 'weapp-vite'
 import { TDesignResolver } from 'weapp-vite/auto-import-components/resolvers'
@@ -45,6 +46,7 @@ export default defineConfig({
   plugins: [
     weappTailwindcss({
       rem2rpx: true,
+      cssEntries: [path.resolve(import.meta.dirname, 'src/app.css')],
     }),
   ],
 })