create-weapp-vite 1.2.1 → 1.3.0

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

@@ -0,0 +1,97 @@
+import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index'
+import { hello } from '@/utils/util'
+
+const firstGrid = [
+  {
+    label: '微信',
+    image: 'https://tdesign.gtimg.com/mobile/demos/wechat.png',
+  },
+  {
+    label: '朋友圈',
+    image: 'https://tdesign.gtimg.com/mobile/demos/times.png',
+  },
+  {
+    label: 'QQ',
+    image: 'https://tdesign.gtimg.com/mobile/demos/qq.png',
+  },
+  {
+    label: '企业微信',
+    image: 'https://tdesign.gtimg.com/mobile/demos/wecom.png',
+  },
+  {
+    label: '收藏',
+    icon: 'star',
+  },
+  {
+    label: '刷新',
+    icon: 'refresh',
+  },
+  {
+    label: '下载',
+    icon: 'download',
+  },
+  {
+    label: '复制',
+    icon: 'queue',
+  },
+]
+Page({
+  data: {
+    mode: 'light',
+    hello: {
+      title: 'Hello weapp-vite + TDesign',
+      description: '集成 TDesign Miniprogram 与 Tailwind CSS，帮助你快速搭建企业级交互界面。',
+      docs: 'https://vite.icebreaker.top',
+      links: [
+        {
+          text: '复制文档链接',
+          url: 'https://vite.icebreaker.top',
+        },
+        {
+          text: 'TDesign 小程序组件',
+          url: 'https://tdesign.tencent.com/miniprogram/overview',
+          variant: 'ghost',
+        },
+      ],
+    },
+  },
+  switchMode() {
+    if (this.data.mode === 'light') {
+      this.setData({
+        mode: 'dark',
+      })
+    }
+    else {
+      this.setData({
+        mode: 'light',
+      })
+    }
+  },
+  async copy(e: WechatMiniprogram.BaseEvent) {
+    if (e.mark?.url) {
+      await wx.setClipboardData({
+        data: e.mark.url,
+      })
+      // eslint-disable-next-line no-console
+      console.log(`复制成功: ${e.mark.url}`)
+    }
+  },
+  handleSelected(e: WechatMiniprogram.CustomEvent) {
+    // eslint-disable-next-line no-console
+    console.log(e.detail)
+  },
+  onLoad() {
+    // eslint-disable-next-line no-console
+    console.log(hello())
+  },
+  handleAction() {
+    ActionSheet.show({
+      theme: ActionSheetTheme.Grid,
+      selector: '#t-action-sheet',
+      context: this,
+      items: firstGrid,
+      align: 'center',
+      description: '',
+    })
+  },
+})

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

@@ -0,0 +1,24 @@
+<view class="min-h-screen {{ mode === 'light'?'bg-gray-100 text-slate-800':'bg-gray-900 text-slate-200' }} transition-colors duration-500">
+  <view class="flex flex-col items-center pt-20 space-y-10">
+    <HelloWorld
+      title="{{hello.title}}"
+      description="{{hello.description}}"
+      docs="{{hello.docs}}"
+      links="{{hello.links}}"
+    />
+    <view bind:tap="switchMode" class="flex items-center">
+      当前模式 {{mode}} 切换模式
+      <view class="{{ mode === 'light' ? 'i-mdi-moon-waxing-crescent':'i-mdi-weather-sunny text-white' }} text-2xl"></view>
+    </view>
+    <view class="underline" mark:url="https://vite.icebreaker.top" bind:tap="copy">
+      https://vite.icebreaker.top
+    </view>
+    <view class="underline" mark:url="https://tw.icebreaker.top" bind:tap="copy">
+      https://tw.icebreaker.top
+    </view>
+    <view>
+      <t-button theme="primary" ghost bind:tap="handleAction">TDesign Button</t-button>
+    </view>
+  </view>
+  <t-action-sheet id="t-action-sheet" bind:selected="handleSelected" />
+</view>

package/templates/tdesign/src/sitemap.json

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

package/templates/tdesign/src/theme.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://vite.icebreaker.top/theme.json",
+  "light": {},
+  "dark": {}
+}

package/templates/tdesign/src/utils/util.ts

@@ -0,0 +1,3 @@
+export function hello() {
+  return 'world'
+}

package/templates/tdesign/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="weapp-vite/client" />

package/templates/tdesign/tailwind.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from 'tailwindcss'
+import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
+
+export default {
+  content: [
+    // 添加你需要提取的文件目录
+    'src/**/*.{wxml,js,ts}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    iconsPlugin({
+      collections: getIconCollections(['mdi']),
+    }),
+  ],
+  corePlugins: {
+    // 小程序不需要 preflight 和 container，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
+    preflight: false,
+    container: false,
+  },
+} satisfies Config

package/templates/tdesign/tsconfig.app.json

@@ -0,0 +1,60 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "jsx": "preserve",
+    "lib": [
+      "ES2023",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "tdesign-miniprogram/*": [
+        "./node_modules/tdesign-miniprogram/miniprogram_dist/*"
+      ]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "miniprogram-api-typings"
+    ],
+    "allowImportingTsExtensions": true,
+    "allowJs": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noUncheckedSideEffectImports": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "weapp-vite/volar"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.mts",
+    "src/**/*.cts",
+    "src/**/*.vue",
+    "src/**/*.json",
+    "src/**/*.d.ts",
+    "types/**/*.d.ts",
+    "env.d.ts"
+  ]
+}

package/templates/tdesign/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "files": []
+}

package/templates/tdesign/tsconfig.node.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": [
+      "ES2023"
+    ],
+    "moduleDetection": "force",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "noUncheckedSideEffectImports": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.*.ts",
+    "*.config.ts",
+    "config/**/*.ts",
+    "scripts/**/*.ts"
+  ]
+}

package/templates/tdesign/vite.config.ts

@@ -0,0 +1,41 @@
+import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
+import { TDesignResolver } from 'weapp-vite/auto-import-components/resolvers'
+import { defineConfig } from 'weapp-vite/config'
+
+export default defineConfig({
+  weapp: {
+    srcRoot: 'src',
+    autoImportComponents: {
+      resolvers: [TDesignResolver()],
+    },
+    // pnpm g 生成的格式
+    // https://vite.icebreaker.top/guide/generate.html
+    generate: {
+      extensions: {
+        js: 'ts',
+        wxss: 'scss',
+      },
+      dirs: {
+        component: 'src/components',
+        page: 'src/pages',
+      },
+      // 假如你想让默认生成的组件命名为 HelloWorld/index 而不是 HelloWorld/HelloWorld 可以下列选项
+      // filenames: {
+      //   component: 'index',
+      //   page: 'index',
+      // },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['legacy-js-api', 'import'],
+      },
+    },
+  },
+  plugins: [
+    UnifiedViteWeappTailwindcssPlugin({
+      rem2rpx: true,
+    }),
+  ],
+})

package/templates/vant/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/templates/vant/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "tailwindCSS.includeLanguages": {
+    "wxml": "html"
+  }
+}

package/templates/vant/README.md

@@ -0,0 +1,28 @@
+# weapp-vite-tailwindcss-vant-template
+
+`weapp-vite` 集成 `tailwindcss`, `@vant/weapp` 的模板
+
+## 使用方式
+
+### 开发
+
+- `pnpm dev`
+
+- `pnpm dev --open` 可以打包并直接启动微信开发者工具
+
+### 构建
+
+`pnpm build`
+
+### 打开微信开发者工具
+
+`pnpm open`
+
+### 生成组件/页面
+
+`pnpm g path/to/your/component`
+
+## 文档地址
+
+0. `weapp-vite`: https://vite.icebreaker.top/
+1. `weapp-tailwindcss`: https://tw.icebreaker.top/

package/templates/vant/gitignore

@@ -0,0 +1,35 @@
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+dist
+vite.config.ts.timestamp-*.mjs
+dist-web

package/templates/vant/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "weapp-vite-tailwindcss-vant-template",
+  "type": "module",
+  "version": "1.0.3",
+  "private": true,
+  "description": "原生微信小程序 weapp-vite + tailwindcss 模板",
+  "author": "ice breaker <1324318532@qq.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/weapp-vite/weapp-vite.git",
+    "directory": "templates/weapp-vite-tailwindcss-vant-template"
+  },
+  "bugs": {
+    "url": "https://github.com/weapp-vite/weapp-vite/issues"
+  },
+  "keywords": [],
+  "scripts": {
+    "dev": "weapp-vite dev",
+    "dev:open": "weapp-vite dev -o",
+    "build": "weapp-vite build",
+    "open": "weapp-vite open",
+    "g": "weapp-vite generate",
+    "postinstall": "weapp-tw patch"
+  },
+  "dependencies": {
+    "@vant/weapp": "^1.11.7"
+  },
+  "devDependencies": {
+    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@iconify-json/mdi": "^1.2.3",
+    "autoprefixer": "^10.4.23",
+    "miniprogram-api-typings": "^4.1.2",
+    "postcss": "^8.5.6",
+    "sass": "^1.97.1",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "weapp-tailwindcss": "^4.9.2",
+    "weapp-vite": "workspace:*"
+  }
+}

package/templates/vant/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/vant/project.config.json

@@ -0,0 +1,42 @@
+{
+  "description": "项目配置文件",
+  "miniprogramRoot": "dist/",
+  "compileType": "miniprogram",
+  "setting": {
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "coverView": false,
+    "postcss": false,
+    "minified": false,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": false,
+    "packNpmRelationList": [
+      {
+        "packageJsonPath": "./package.json",
+        "miniprogramNpmDistDir": "./dist"
+      }
+    ],
+    "ignoreUploadUnusedFiles": true,
+    "compileHotReLoad": false,
+    "skylineRenderEnable": true,
+    "packNpmManually": true,
+    "es6": true
+  },
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "srcMiniprogramRoot": "dist/",
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  },
+  "libVersion": "2.32.3",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "appid": "wx6ffee4673b257014"
+}

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

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

package/templates/vant/src/app.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://vite.icebreaker.top/app.json",
+  "pages": [
+    "pages/index/index"
+  ],
+  "window": {},
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents"
+}

package/templates/vant/src/app.scss

@@ -0,0 +1,3 @@
+@use 'tailwindcss/base';
+@use 'tailwindcss/components';
+@use 'tailwindcss/utilities';

package/templates/vant/src/app.ts

@@ -0,0 +1,6 @@
+App({
+  globalData: {},
+  onLaunch() {
+
+  },
+})

package/templates/vant/src/components/HelloWorld/HelloWorld.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://vite.icebreaker.top/component.json",
+  "component": true,
+  // 组件需要设置成 "apply-shared" 才能使用 app.wxss 里的全局样式
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index"
+  }
+}

package/templates/vant/src/components/HelloWorld/HelloWorld.scss

@@ -0,0 +1 @@
+/* Tailwind CSS utilities are applied directly in the template. */

package/templates/vant/src/components/HelloWorld/HelloWorld.ts

@@ -0,0 +1,61 @@
+interface HelloWorldLink {
+  text: string
+  url: string
+  variant?: 'ghost'
+}
+
+Component({
+  properties: {
+    title: {
+      type: String,
+      value: 'Hello weapp-vite',
+    },
+    description: {
+      type: String,
+      value: '欢迎使用 weapp-vite 模板，这里演示了如何在组件内快速放置介绍信息。',
+    },
+    docs: {
+      type: String,
+      value: '',
+    },
+    links: {
+      type: Array,
+      value: [] as HelloWorldLink[],
+    },
+  },
+  lifetimes: {
+    attached() {
+      if (!this.data.links?.length && this.data.docs) {
+        this.setData({
+          links: [
+            {
+              text: '复制文档链接',
+              url: this.data.docs,
+            },
+          ],
+        })
+      }
+    },
+  },
+  methods: {
+    async copyLink(event: WechatMiniprogram.TouchEvent) {
+      const url = event.currentTarget.dataset?.url as string | undefined
+      if (!url) {
+        return
+      }
+
+      try {
+        await wx.setClipboardData({ data: url })
+        wx.showToast({
+          title: '链接已复制',
+          icon: 'success',
+          duration: 1500,
+        })
+      }
+      catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('复制链接失败', error)
+      }
+    },
+  },
+})

package/templates/vant/src/components/HelloWorld/HelloWorld.wxml

@@ -0,0 +1,19 @@
+<view class="w-full max-w-[640rpx] mx-auto rounded-3xl p-8 bg-white/95 shadow-xl shadow-sky-200/40 flex flex-col gap-6">
+  <view class="text-3xl font-semibold text-sky-500">{{title}}</view>
+  <view class="text-lg leading-relaxed text-slate-700">{{description}}</view>
+  <view wx:if="{{links.length}}" class="flex flex-wrap gap-4">
+    <van-button
+      wx:for="{{links}}"
+      wx:key="url"
+      size="small"
+      type="{{item.variant === 'ghost' ? 'default' : 'primary'}}"
+      plain="{{item.variant === 'ghost'}}"
+      data-url="{{item.url}}"
+      bindtap="copyLink"
+      custom-class="px-5 py-2 rounded-full text-sm font-medium transition active:scale-95"
+    >
+      {{item.text}}
+    </van-button>
+  </view>
+  <view wx:if="{{links.length}}" class="text-xs text-slate-400">复制后可直接粘贴到浏览器访问</view>
+</view>

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

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://vite.icebreaker.top/page.json",
+  "usingComponents": {
+    "HelloWorld": "/components/HelloWorld/HelloWorld"
+  },
+  "navigationBarTitleText": "初始模板"
+}