create-weapp-vite 1.2.1 → 1.3.0

package/templates/wevu-tdesign/src/app.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onHide, onLaunch, onShow } from 'wevu'
+
+defineAppJson({
+  pages: [
+    'pages/index/index',
+  ],
+  window: {
+    navigationBarTitleText: 'Wepp-Vite + WeVU Template',
+    navigationBarBackgroundColor: '#4c6ef5',
+    navigationBarTextStyle: 'white',
+  },
+  style: 'v2',
+  componentFramework: 'glass-easel',
+  sitemapLocation: 'sitemap.json',
+})
+
+onShow(() => {
+  console.log('[weapp-vite-wevu-template] app show')
+})
+
+onHide(() => {
+  console.log('[weapp-vite-wevu-template] app hide')
+})
+
+onLaunch(() => {
+  console.log('[weapp-vite-wevu-template] app launch')
+})
+</script>
+
+<style>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>

package/templates/wevu-tdesign/src/components/HelloWorld/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+  }>(),
+  {
+    title: 'Hello WeVU',
+    subtitle: '',
+  },
+)
+</script>
+
+<template>
+  <view class="rounded-[24rpx] bg-gradient-to-br from-[#4c6ef5] to-[#7048e8] p-[24rpx]">
+    <text class="block text-[40rpx] font-bold text-white">
+      {{ props.title }}
+    </text>
+    <text v-if="props.subtitle" class="mt-[8rpx] block text-[26rpx] text-white/85">
+      {{ props.subtitle }}
+    </text>
+  </view>
+</template>

package/templates/wevu-tdesign/src/pages/index/index.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import Dialog from 'tdesign-miniprogram/dialog/index'
+import Toast from 'tdesign-miniprogram/toast/index'
+
+import { computed, getCurrentInstance, ref, watch } from 'wevu'
+
+import HelloWorld from '@/components/HelloWorld/index.vue'
+
+definePageJson({
+  navigationBarTitleText: '首页',
+})
+
+const mpContext = getCurrentInstance()
+
+const count = ref(0)
+const message = ref('Hello WeVU!')
+const todos = ref([
+  '用 Vue SFC 写页面/组件',
+  '用 wevu API（ref/computed/watch）写逻辑',
+  '用 v-for / v-if / @tap / v-model 写模板',
+])
+const checkedTodos = ref<Array<string | number>>([])
+const newTodo = ref('')
+
+const doubled = computed(() => count.value * 2)
+const todoOptions = computed(() =>
+  todos.value.map((todo, index) => ({
+    label: todo,
+    value: index,
+  })),
+)
+const checkedCount = computed(() => checkedTodos.value.length)
+
+function showToast(options: Parameters<typeof Toast>[0]) {
+  if (!mpContext) {
+    return
+  }
+  Toast({
+    selector: '#t-toast',
+    ...options,
+    context: mpContext as any,
+  })
+}
+
+function increment() {
+  count.value += 1
+  showToast({
+    theme: 'success',
+    message: `+1，当前：${count.value}`,
+    duration: 1200,
+  })
+}
+
+async function reset() {
+  if (!mpContext) {
+    count.value = 0
+    return
+  }
+
+  try {
+    await Dialog.confirm({
+      context: mpContext as any,
+      selector: '#t-dialog',
+      title: '重置计数器',
+      content: `当前计数为 ${count.value}，确定要重置吗？`,
+      confirmBtn: '重置',
+      cancelBtn: '取消',
+    })
+    count.value = 0
+    showToast({ theme: 'success', message: '已重置', duration: 1200 })
+  }
+  catch {
+    showToast({ theme: 'warning', message: '已取消', duration: 1000 })
+  }
+}
+
+watch(count, (newValue, oldValue) => {
+  console.log(`[wevu] count changed: ${oldValue} -> ${newValue}`)
+})
+
+function onMessageChange(e: WechatMiniprogram.CustomEvent<{ value: string }>) {
+  message.value = e.detail.value
+}
+
+function onNewTodoChange(e: WechatMiniprogram.CustomEvent<{ value: string }>) {
+  newTodo.value = e.detail.value
+}
+
+function addTodo() {
+  const value = newTodo.value.trim()
+  if (!value) {
+    showToast({ theme: 'warning', message: '请输入内容', duration: 1000 })
+    return
+  }
+  todos.value.push(value)
+  newTodo.value = ''
+  showToast({ theme: 'success', message: '已添加', duration: 1000 })
+}
+
+function onTodoChange(e: WechatMiniprogram.CustomEvent<{ value: Array<string | number> }>) {
+  checkedTodos.value = e.detail.value
+}
+</script>
+
+<template>
+  <view class="box-border min-h-screen bg-[#f6f7fb] px-[32rpx] pb-[64rpx] pt-[48rpx] text-[#1c1c3c]">
+    <HelloWorld :title="message" :subtitle="`count=${count}, doubled=${doubled}`" />
+
+    <view
+      class="mt-[24rpx] rounded-[24rpx] bg-white p-[32rpx] shadow-[0_12rpx_32rpx_rgb(44_44_84_/_10%)]"
+    >
+      <t-cell-group title="计数器" theme="card">
+        <t-cell title="当前计数" :note="`${count}`" />
+        <t-cell title="双倍" :note="`${doubled}`" />
+      </t-cell-group>
+
+      <view class="mt-[24rpx] flex gap-[16rpx]">
+        <t-button block size="large" theme="primary" style="flex: 1" @tap="increment">
+          +1
+        </t-button>
+        <t-button block size="large" theme="danger" variant="outline" style="flex: 1" @tap="reset">
+          重置
+        </t-button>
+      </view>
+
+      <view class="mt-[24rpx]">
+        <t-input
+          label="标题"
+          placeholder="输入标题…"
+          clearable
+          :value="message"
+          @change="onMessageChange"
+        />
+      </view>
+
+      <view class="mt-[24rpx]">
+        <t-input
+          label="新增待办"
+          placeholder="输入一条待办…"
+          clearable
+          :value="newTodo"
+          @change="onNewTodoChange"
+        />
+        <view class="mt-[16rpx]">
+          <t-button block size="large" theme="primary" variant="dashed" @tap="addTodo">
+            添加
+          </t-button>
+        </view>
+      </view>
+
+      <view class="mt-[24rpx]">
+        <t-cell-group :title="`Checklist（已完成 ${checkedCount}/${todos.length}）`" theme="card">
+          <t-checkbox-group :options="todoOptions" :value="checkedTodos" @change="onTodoChange" />
+        </t-cell-group>
+      </view>
+    </view>
+
+    <t-toast id="t-toast" />
+    <t-dialog id="t-dialog" />
+  </view>
+</template>

package/templates/wevu-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/wevu-tdesign/src/theme.json

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

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

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

package/templates/wevu-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,vue}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    iconsPlugin({
+      collections: getIconCollections(['mdi']),
+    }),
+  ],
+  corePlugins: {
+    // 小程序不需要 preflight 和 container，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
+    preflight: false,
+    container: false,
+  },
+} satisfies Config

package/templates/wevu-tdesign/tsconfig.app.json

@@ -0,0 +1,62 @@
+{
+  "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",
+    "components.d.ts",
+    "typed-components.d.ts"
+  ]
+}

package/templates/wevu-tdesign/tsconfig.json

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

package/templates/wevu-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"
+  ]
+}