关于 AI 取名大师
借助豆包、通义千问、DeepSeek 等 AI 大模型，为您的宝宝、宠物、店铺、网名、笔名、项目、产品、服务、文章等取一个专业、有意义的名字😄。
开源地址：👉GitCode（国内友好）👈、👉GitHub👈
技术组合：Bun.js、Elysia.js、uni-app
体验地址：AI取名大师（H5版）、小程序搜索取名大师
特别注明：本系列文章仅为实战经验分享，并记录开发过程中碰到的问题😄，如有不足之处欢迎随时留言提出。
v-bind / 属性绑定
直接上代码：
<template>
<view :title />
</template>
<script setup>
let title = "标题"
</script>
这是一个再简单不过的 Vue3 示例，使用了绑定属性缩写，非常简洁清爽！编译为 h5 完全没问题，但是编译成微信小程序就会报错：
正在编译中...
✗ Build failed in 1.02s
[vite:vue] v-bind is missing expression.
2 | <view @click="create" class="inline">
3 | <slot>
4 | <wd-button :icon="icon" :size="size" :type>创建积分券</wd-button>
| ^^^^^
5 | </slot>
6 | </view>
简单说就是微信小程序环境下不支持绑定缩写😔，只能一个个修给出:title="title"的形式，心累。如果需要多端支持，写代码时就得注意。
不支持 dblclick
打包为小程序时，如果使用了
@dblclick会报错[vite:vue] v-bind is missing expression
这不是 @dblclick 自身的问题，因为打包为 H5 是完成没问题的，而是 小程序不支持 dblclick 事件，导致 Vue 在编译阶段将 @dblclick 解析为未知指令，间接触发 v-bind 报错。
我们可以通过 click 事件模拟双击，双击本质是两次 点击 之间时间间隔足够短。
<template>
<wd-text @click="onClick" size="12px" />
</template>
<script setup>
let lastTime = 0
const onClick = ()=>{
const now = Date.now()
// 250ms 是常见阈值，可以按需求调整
if(now - lastTime < 250){
//处理双击
}
lastTime = now
}
</script>
component is not supported
原始代码：
<template>
<component :is='buildSVG(bean)' />
</template>
<script setup>
const buildSVG = item=>{
let { color, svg, fill } = item.icon || {}
if(svg && svg.startsWith("<svg "))
return h('view', {class:"icon", innerHTML: svg })
return h(
item.id == 'baobao'? BabySVG:
item.id == 'dianpu'? ShopSVG:
item.id == 'chongwu'? DogSVG:
item.id == 'wangming'? VestSVG:
item.id == 'biming'? EditSVG:
item.id == 'zuopin'? CreationSVG:
item.id == 'wenzhang'? TitleSVG:
null,
{ clazz:'icon', fill: fill || color, size: props.iconSize }
)
}
</script>
由于·微信小程序·的自定义组件系统不支持 <component is="">，也不支持 Vue 的动态组件渲染。
所以只能改成条件判断。
<template>
<template v-if="inited">
<view v-if="custom" class="icon" :innerHTML="bean.icon.svg" />
<BabySVG v-if="bean.id=='baobao'" :fill="fill" :color="color" :size="size" clazz='icon' />
<ShopSVG v-else-if="bean.id=='dianpu'" :fill="fill" :color="color" :size="size" clazz='icon' />
<DogSVG v-else-if="bean.id=='chongwu'" :fill="fill" :color="color" :size="size" clazz='icon' />
<VestSVG v-else-if="bean.id=='wangming'" :fill="fill" :color="color" :size="size" clazz='icon' />
<EditSVG v-else-if="bean.id=='biming'" :fill="fill" :color="color" :size="size" clazz='icon' />
<CreationSVG v-else-if="bean.id=='zuopin'" :fill="fill" :color="color" :size="size" clazz='icon' />
<TitleSVG v-else-if="bean.id=='wenzhang'" :fill="fill" :color="color" :size="size" clazz='icon' />
<view v-else />
</template>
</template>
<script setup>
import BabySVG from '@SVG/baby.vue'
import ShopSVG from '@SVG/shop.vue'
import DogSVG from '@SVG/dog.vue'
import EditSVG from '@SVG/edit.vue'
import CreationSVG from '@SVG/creation.vue'
import VestSVG from '@SVG/vest.vue'
import TitleSVG from '@SVG/title.vue'
const props = defineProps({
bean:{type:Object, default:{}},
size:{type:Number, default:48}
})
let inited = ref(false)
let fill
let color
let custom = false
onMounted(() => {
let { svg } = props.bean.icon || {}
if(svg && svg.startsWith("<svg "))
custom = true
fill = props.bean.icon?.fill
color = props.bean.icon?.color
inited.value = true
})
</script>
Invalid pattern
Invalid pattern "../node-modules/wot-design-uni/components/wd-navbar/wd-navbar.js" for "output.chunkFileNames", patterns can be neither absolute nor relative paths. If you want your files to be stored in a subdirectory, write its name without a leading slash like this: subdirectory/pattern.
原因不明，删除
node_modules后，重新bun i就能正常打包😔。
