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插件实现

全局函数

getCurrentPages在小程序环境下不支持options选项（251012）

想要实现多端能用的useQuery逻辑，目前只能通过页面的onLoad事件实现

参考：

• uni文档

第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;  
}