uni-app
原生标签
input元素编译后的结构（251002）
浏览器和微信小程序编译后的DOM结构有区别，需要注意样式的使用可能会引起兼容性问题
# 源文件
input
# 编译到浏览器
uni-input
div.uni-input-wrapper
div.uni-input-placeholder
input.uni-input-input
# 编译到微信小程序
input
input元素的align-items属性（251008）
当给input元素添加display:flex; align-items: center;属性后，微信开发者工具/安卓小程序和苹果小程序显示不一致，前者的palceholder并未垂直居中，而是靠顶部对齐，后者则不受影响。
最好是不要给input元素设置flex相关属性，避免兼容性问题
# 微信小程序开发者工具agent
userAgent: "wechatdevtools desktopapp appservice port/50966 token/e995b79e6bfb4535967abddb723dda7a runtime/2 sessionid/323 MicroMessenger"
# 安卓小程序agent
UA: Mozilla/5.0 (Linux; Android 13; ANY-AN00 Build/HONORANY-AN00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/138.0.7204.180 Mobile Safari/537.36 XWEB/1380215 MMWEBSDK/20250804 MMWEBID/5667 MicroMessenger/8.0.63.2920(0x28003F3C) WeChat/arm64 Weixin NetType/WIFI Language/zh_CN ABI/arm64 MiniProgramEnv/android
# 苹果小程序agent
UA: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.64(0x18004028) NetType/WIFI Language/zh_CN MiniProgramEnv/iOS
button元素编译后的结构（251012）
浏览器和小程序环境编译后的标签名不一致，需要注意可访问性以及样式兼容性的问题
- tailwindcss中的disabled状态会失效，因为uni-button没有disabled属性
# 源文件
button
# 编译到浏览器
uni-button
::after
# 编译到小程序
button
::after # 这个是由微信注入
自定义组件
自定义组件DOM结构（251002）
浏览器和微信小程序编译后的DOM结构有区别，需要注意样式的使用可能会引起兼容性问题
# 源文件
# components/simple-demo/simple-demo.vue
view
# 编译到浏览器
uni-view data-v-xxx
# 编译到微信开发者工具
components/simple-demo/simple-demo class=data-v-xxx
#shadow-root
view
# 编译到微信小程序
simple-demo class=data-v-xxx ul="xxx" uP=undefined
Shadow Root
view
自定义组件根节点样式（251011）
自定义组件上的class在浏览器环境中会被编译到组件的根节点上，微信小程序环境中会被编译到新创建的组件节点上，uniapp暂不支持虚拟化这个组件节点
需要由外部控制自定义组件根节点样式的场景下，需要显式声明一个rootClass属性，避免样式冲突
# 源文件
# components/simple-demo/simple-demo.vue
view.example
# 编译到浏览器
uni-view.example
# 编译到微信开发者工具
components/simple-demo/simple-demo.example
#shadow-root
view
# 编译到微信小程序
simple-demo.example
Shadow Root
view
参考：
vue语法
App.vue（251006）
App.vue中的template模块无论是在小程序环境，还是在浏览器环境，会被忽略，不会被构建到page中渲染
注入全局组件只能通过自定义vite插件实现
插槽（260102）
在H5环境中插槽会被直接替换为DOM节点，小程序环境插槽是一个占位，会在组件同级别起一个节点放置插槽内容。如果将scroll-view中的元素作为插槽注入，则会导致小程序环境中的滚动效果失效
# 组件源代码BaseScroll.vue
<scroll-view>
<slot :items="visibleItems">
# 业务代码
<BaseScroll>
<template #default="{items}">
<div class="item" v-for="item in items"
# H5环境编译结果
<uni-scroll-view>
div.uni-scroll-view
.div.uni-croll-view-content
.div.items
.div.items
......
# 小程序环境编译结果
<component/BaseScroll
#shadow-root
<scroll-view
<slot name="d"
<view> reveal
<view slot="d"
<component/RecrodCard
<component/RecrodCard
...
全局函数
getCurrentPages在小程序环境下不支持options选项（251012）
想要实现多端能用的useQuery逻辑，目前只能通过页面的onLoad事件实现
参考：
第3方依赖
weapp-tailwindcss/vite（251012）
.py,.px编译后浏览器和小程序环境语法不一致，需要注意文字竖向书写时的兼容问题
# 源代码
.py-2
# 编译到浏览器环境
.py-2 {
padding-block: calc(var(--spacing) * 2)
}
# 编译到小程序环境
.py-2 {
padding-top: 8rpx;
padding-bottom: 8rpx;
}
微信小程序
supportedMaterials路径配置
path中不要包含weixin这个单词，否则会页面白屏
