【鸿蒙征文】星光不负，码向未来！分享你的uni-app鸿蒙开发实践，赢取精美好礼！

鸿蒙征文公告

各位DCloud的开发者们：

在1024程序员节即将到来之际，DCloud 诚挚邀请您参与本次 “星光不负，码向未来” 鸿蒙主题征文活动。

我们特别希望看到基于 uni-app 和 uni-app x 在鸿蒙生态中的开发实践、经验总结与创新思考。无论是开发鸿蒙App、元服务，还是打造兼容鸿蒙的插件/UI库，你的每一行代码和每一次分享，都将是鸿蒙生态建设中闪耀的星光。

活动主题：星光不负，码向未来

活动时间：

征文招募期： 2025年10月20日 - 11月20日
文章展示期： 从2025年10月24日起，优秀投稿将陆续在专题页展示
文章评审期： 2025年11月21日 - 11月30日
结果公示期： 2025年12月1日之后

征文方向

我们特别关注以下方向与uni-app结合的实践

请选择以下任一方向，分享你的鸿蒙开发故事：

方向一成长纪实

分享你从零开始，使用 uni-app 开发鸿蒙 App 或鸿蒙元服务的学习之路。可以是从基础语法到核心概念的入门笔记，也可以是封装第一个兼容鸿蒙的组件、插件的经历，更欢迎你分享在学习、适配、调试过程中的心得、踩坑记录与解决方案。

方向二案例实战

鸿蒙能力集成：分享你在结合 uni-app 的鸿蒙项目中，集成并应用鸿蒙开放能力（如云开发、云测试、预加载、Applinking、APMS、近场能力、应用分析、HarmonyOS SDK等）解决实际问题的过程、效果与心得。真实经历，尤为珍贵。

项目全流程落地：详细阐述基于 uni-app/uni-app x 的鸿蒙项目从需求制定、技术选型、技术适配（如元服务特性应用）、到最终上架、获取用户反馈的全流程经验。基于uni-app、uni-app x开发的鸿蒙应用已经有上千款，非常欢迎这些开发者分享自己的开发、上架经验。
方向二的文章，我们还设计了特别奖品，见下文。

方向三参赛心得

如果你近两年参加过HarmonyOS创新赛、极客松等大赛，欢迎分享你的参赛作品案例与技术心得。请侧重讲解如何利用 uni-app 技术栈，结合HarmonyOS的新技术特性（特别是HarmonyOS NEXT）完成作品，并解说其中的创新点与技术难点。

奖项设置

我们为优秀的你准备了丰厚的礼品作为奖励：

一等奖（5名）：
如上奖品为二选一，随机发放；

华为手环7-NFC版
华为智能水杯450ml + 露营灯-无级调光-太阳能+Type-C充电组合

二等奖（15名）：
露营灯-无级调光，太阳能或 Type-C充电，随机发货

三等奖（30名）：
HUAWEI 无线蓝牙鼠标-双模办公-灰色 (价值99元)

方向二特别奖（10名）：
针对【方向二·案例实战】的优质投稿，额外设立10份 华为手环 9 NFC版作为激励！

惊喜提示：积极参与、文章优质的开发者，将有机会获得 DCloud官方推荐 和 HarmonyOS开发者社区联合曝光，让你的技术影响力更进一步！

参与方式

在 DCloud 问答社区发布新帖，选择【分享经验】，发布博客文章，并给文章添加【鸿蒙征文】的话题，无需单独报名，社区会通过话题自动筛选征文文章。

评审标准

社区将根据以下维度进行综合评选：

内容质量：内容详实、逻辑清晰、案例完整。
技术价值：技术深度、创新性、对uni-app与鸿蒙结合点的挖掘。
影响力与实用性：对其他开发者的借鉴、启发和帮助程度；如文章的阅读数、点赞数都将作为评选参考指标，欢迎大家将自己的文章分享到微博、微信等，扩散自己的文章影响力。
原创与真实性：必须为原创内容，分享真实开发经验。

行动起来吧！

技术之路，因分享而璀璨；鸿蒙生态，因你而精彩。
这不仅是赢取奖品的机会，更是向整个开发者社区展示你技术风采的舞台。

立即执笔，分享你的 uni-app 鸿蒙开发实践，与我们一起，码向未来！

============

目前已经有不少优秀的征文发布，大家可以移步鸿蒙征文系列阅读欣赏。

继续阅读 »

各位DCloud的开发者们：

在1024程序员节即将到来之际，DCloud 诚挚邀请您参与本次 “星光不负，码向未来” 鸿蒙主题征文活动。

我们特别希望看到基于 uni-app 和 uni-app x 在鸿蒙生态中的开发实践、经验总结与创新思考。无论是开发鸿蒙App、元服务，还是打造兼容鸿蒙的插件/UI库，你的每一行代码和每一次分享，都将是鸿蒙生态建设中闪耀的星光。

活动主题：星光不负，码向未来

活动时间：

征文招募期： 2025年10月20日 - 11月20日
文章展示期： 从2025年10月24日起，优秀投稿将陆续在专题页展示
文章评审期： 2025年11月21日 - 11月30日
结果公示期： 2025年12月1日之后

征文方向

我们特别关注以下方向与uni-app结合的实践

请选择以下任一方向，分享你的鸿蒙开发故事：

方向一成长纪实

分享你从零开始，使用 uni-app 开发鸿蒙 App 或鸿蒙元服务的学习之路。可以是从基础语法到核心概念的入门笔记，也可以是封装第一个兼容鸿蒙的组件、插件的经历，更欢迎你分享在学习、适配、调试过程中的心得、踩坑记录与解决方案。

方向二案例实战

鸿蒙能力集成：分享你在结合 uni-app 的鸿蒙项目中，集成并应用鸿蒙开放能力（如云开发、云测试、预加载、Applinking、APMS、近场能力、应用分析、HarmonyOS SDK等）解决实际问题的过程、效果与心得。真实经历，尤为珍贵。

项目全流程落地：详细阐述基于 uni-app/uni-app x 的鸿蒙项目从需求制定、技术选型、技术适配（如元服务特性应用）、到最终上架、获取用户反馈的全流程经验。基于uni-app、uni-app x开发的鸿蒙应用已经有上千款，非常欢迎这些开发者分享自己的开发、上架经验。
方向二的文章，我们还设计了特别奖品，见下文。

方向三参赛心得

如果你近两年参加过HarmonyOS创新赛、极客松等大赛，欢迎分享你的参赛作品案例与技术心得。请侧重讲解如何利用 uni-app 技术栈，结合HarmonyOS的新技术特性（特别是HarmonyOS NEXT）完成作品，并解说其中的创新点与技术难点。

奖项设置

我们为优秀的你准备了丰厚的礼品作为奖励：

一等奖（5名）：
如上奖品为二选一，随机发放；

华为手环7-NFC版
华为智能水杯450ml + 露营灯-无级调光-太阳能+Type-C充电组合

二等奖（15名）：
露营灯-无级调光，太阳能或 Type-C充电，随机发货

三等奖（30名）：
HUAWEI 无线蓝牙鼠标-双模办公-灰色 (价值99元)

方向二特别奖（10名）：
针对【方向二·案例实战】的优质投稿，额外设立10份 华为手环 9 NFC版作为激励！

惊喜提示：积极参与、文章优质的开发者，将有机会获得 DCloud官方推荐 和 HarmonyOS开发者社区联合曝光，让你的技术影响力更进一步！

参与方式

在 DCloud 问答社区发布新帖，选择【分享经验】，发布博客文章，并给文章添加【鸿蒙征文】的话题，无需单独报名，社区会通过话题自动筛选征文文章。

评审标准

社区将根据以下维度进行综合评选：

内容质量：内容详实、逻辑清晰、案例完整。
技术价值：技术深度、创新性、对uni-app与鸿蒙结合点的挖掘。
影响力与实用性：对其他开发者的借鉴、启发和帮助程度；如文章的阅读数、点赞数都将作为评选参考指标，欢迎大家将自己的文章分享到微博、微信等，扩散自己的文章影响力。
原创与真实性：必须为原创内容，分享真实开发经验。

行动起来吧！

技术之路，因分享而璀璨；鸿蒙生态，因你而精彩。
这不仅是赢取奖品的机会，更是向整个开发者社区展示你技术风采的舞台。

立即执笔，分享你的 uni-app 鸿蒙开发实践，与我们一起，码向未来！

============

目前已经有不少优秀的征文发布，大家可以移步鸿蒙征文系列阅读欣赏。

收起阅读 »

UniApp 项目鸿蒙上线

鸿蒙征文

介绍一下背景：本项目是uni cli搭建的项目，区分是不是uni cli项目看一下项目存不存在src文件夹就行，本文介绍内容都是基于uni cli项目的。
需求：

uniapp项目需要打包鸿蒙上线App，本次调研是基于Mac环境，不涉及Windows。
第三方SDK插件对接UTS
准备工作：
下载安装HBuilderX（最新版）
DevEco Studio下载安装，鸿蒙模拟器安装（或通过真机来进行调试）
Dcloud开发者中心注册账号
华为开发者联盟 AppGallery Connect 注册账号
调试证书/发布证书（需要和本项目鸿蒙App管理员要）
鸿蒙App配置：
manifest.json-鸿蒙App配置
包名：uni.app.snsk.ydbz
证书签名配置包括调试证书和发布证书，调试证书相关配置如下图所示

应用包名：Android端、iOS端、HarmonyOS端可能有自己定义的包名，只要在本端下做好统一即可。在HarmonyOS端我们用的包名是uni.app.snsk.ydbz，项目中的配置要和华为开发者联盟一致。
运行设备：需要启动虚拟机或USB连接鸿蒙手机以后才能检测到。
开发调试可以选择自动申请调试证书，也可以手动配置下边的私钥库文件及证书文件。点自动申请调试证书以后会登录华为开发者联盟，生产证书回填下边的私钥库文件和证书文件等。
不选择自动申请调试证书，也可以和本项目鸿蒙端的管理员要调试证书，然后手动选择文件。
私钥库文件是.p12结尾的文件
证书文件是.cer结尾的文件
签名描述文件是.p7p结尾的文件
管理员账号在申请调试证书的时候，需要选取证书请求文件（CSR），证书请求文件需要在DevEco Studio上申请，具体操作请参考生成证书请求文件。
下载签名描述文件前需要先通过UDID将设备注册到AGC设备列表，后续Profile中指定的调试设备将从此设备列表中选取。具体步骤：华为开发者联盟的“证书、APP ID和Profile”-设备-添加设备。
配置完成以后点击保存。
发布证书相关配置如下图所示

发布证书的配置参考调试证书即可，签名描述文件分调试和正式两个文件，私钥库文件和证书文件和调试是同一个文件。
图标配置
前景图和背景图标准

标准如下：
前景图是核心图形（如Logo）必须是透明底色的PNG
背景图纯色背景（如纯白色）必须是不透明的PNG
图标资源必须为分层资源（一张前景图和一张背景图）
图标资源尺寸必须为 1024*1024px
启动界面配置
启动界面背景色，根据项目需求填写，本项目为空
启动界面中部图标，推荐选择软件logo
模块配置
根据项目勾选，本项目未勾选
运行到鸿蒙
具体操作：运行-运行到手机或模拟器-运行到鸿蒙

勾选设备-点击运行，成功以后会显示如下信息

这个地方，本项目出现了好多编译错误，最终通过升级uniapp-cli解决
运行成功以后生成鸿蒙工程目录，用DevEco Studio打开即可，打开以后到项目结构如图：

在DevEco Studio中需要检查一下app.json5中的bundleName是不是我们的包名，改为包名即可
在DevEco Studio里配置调试证书

调试过程可以勾选自动生成证书，打正式包要选择正式的描述文件Profile file(*.p7p)，该配置和HbuilderX中的配置大同小异。
OpenHarmony SDK配置

选择设备，可以是USB连接鸿蒙手机，或者在设备管理器中下载虚拟机。

点击右侧运行，鸿蒙app就运行到手机上了。

继续阅读 »

介绍一下背景：本项目是uni cli搭建的项目，区分是不是uni cli项目看一下项目存不存在src文件夹就行，本文介绍内容都是基于uni cli项目的。
需求：

uniapp项目需要打包鸿蒙上线App，本次调研是基于Mac环境，不涉及Windows。
第三方SDK插件对接UTS
准备工作：
下载安装HBuilderX（最新版）
DevEco Studio下载安装，鸿蒙模拟器安装（或通过真机来进行调试）
Dcloud开发者中心注册账号
华为开发者联盟 AppGallery Connect 注册账号
调试证书/发布证书（需要和本项目鸿蒙App管理员要）
鸿蒙App配置：
manifest.json-鸿蒙App配置
包名：uni.app.snsk.ydbz
证书签名配置包括调试证书和发布证书，调试证书相关配置如下图所示

应用包名：Android端、iOS端、HarmonyOS端可能有自己定义的包名，只要在本端下做好统一即可。在HarmonyOS端我们用的包名是uni.app.snsk.ydbz，项目中的配置要和华为开发者联盟一致。
运行设备：需要启动虚拟机或USB连接鸿蒙手机以后才能检测到。
开发调试可以选择自动申请调试证书，也可以手动配置下边的私钥库文件及证书文件。点自动申请调试证书以后会登录华为开发者联盟，生产证书回填下边的私钥库文件和证书文件等。
不选择自动申请调试证书，也可以和本项目鸿蒙端的管理员要调试证书，然后手动选择文件。
私钥库文件是.p12结尾的文件
证书文件是.cer结尾的文件
签名描述文件是.p7p结尾的文件
管理员账号在申请调试证书的时候，需要选取证书请求文件（CSR），证书请求文件需要在DevEco Studio上申请，具体操作请参考生成证书请求文件。
下载签名描述文件前需要先通过UDID将设备注册到AGC设备列表，后续Profile中指定的调试设备将从此设备列表中选取。具体步骤：华为开发者联盟的“证书、APP ID和Profile”-设备-添加设备。
配置完成以后点击保存。
发布证书相关配置如下图所示

发布证书的配置参考调试证书即可，签名描述文件分调试和正式两个文件，私钥库文件和证书文件和调试是同一个文件。
图标配置
前景图和背景图标准

标准如下：
前景图是核心图形（如Logo）必须是透明底色的PNG
背景图纯色背景（如纯白色）必须是不透明的PNG
图标资源必须为分层资源（一张前景图和一张背景图）
图标资源尺寸必须为 1024*1024px
启动界面配置
启动界面背景色，根据项目需求填写，本项目为空
启动界面中部图标，推荐选择软件logo
模块配置
根据项目勾选，本项目未勾选
运行到鸿蒙
具体操作：运行-运行到手机或模拟器-运行到鸿蒙

勾选设备-点击运行，成功以后会显示如下信息

这个地方，本项目出现了好多编译错误，最终通过升级uniapp-cli解决
运行成功以后生成鸿蒙工程目录，用DevEco Studio打开即可，打开以后到项目结构如图：

在DevEco Studio中需要检查一下app.json5中的bundleName是不是我们的包名，改为包名即可
在DevEco Studio里配置调试证书

调试过程可以勾选自动生成证书，打正式包要选择正式的描述文件Profile file(*.p7p)，该配置和HbuilderX中的配置大同小异。
OpenHarmony SDK配置

选择设备，可以是USB连接鸿蒙手机，或者在设备管理器中下载虚拟机。

点击右侧运行，鸿蒙app就运行到手机上了。

收起阅读 »

4.76 web端报错 can't find module 'vue-router/dist/vue-router.esm-bundler.js' 的解决方案

web uniapp vue3

背景

近期有开发者反馈web端升级到 4.76 之后报错 can't find module 'vue-router/dist/vue-router.esm-bundler.js'，这个是因为你可能是安装到了 4.6.0 版本的 vue- router，这个版本移除了 vue-router.esm-bundler.js 文件，此行为导致了开发环境和生产环境不能正常运行。github上有人反馈了这个问题详见 https://github.com/vuejs/router/issues/2569

解决方案

如果你使用 npm，需要先删除 node_modules，再重新执行 npm install，检查node_modeuls下面的vue-router依赖是否是最新的 4.6.3 版本，这个版本恢复了 vue-router.esm-bundler.js 文件

继续阅读 »

基于vue3.5+vite7+electron38.2实战电脑端os管理系统

vue3 vue.js

vue3-electron38-os：最新原创vite7.1+electron38.2+vue3 setup+pinia3+arcoDesign+echarts跨平台仿macOS/windows风格桌面os管理系统模板。自研可拖拽栅格布局结构、自定义JSON配置桌面菜单/Dock菜单。

使用技术

跨平台框架：electron^38.2.0
前端技术框架：vite^7.1.7+vue^3.5.21+vue-router^4.5.1
组件库：@arco-design/web-vue^2.57.0 (字节前端vue3组件库)
状态管理：pinia^3.0.3
拖拽插件：sortablejs^1.15.6
图表组件：echarts^6.0.0
markdown编辑器：md-editor-v3^6.0.1
模拟数据：mockjs^1.1.0
打包构建：electron-builder^24.13.3
electron+vite插件：vite-plugin-electron^0.29.0

项目结构目录

使用最新版跨平台框架electron38+vite7创建项目模板，vue3 setup语法开发。

electron-vue3-os桌面端os项目已经同步到我的原创作品集。
electron38+vue3+arco-design客户端os系统

继续阅读 »

提个建议---插件、广告等所有的收益不足100不能体现

提个建议---插件、广告等所有的收益不足100不能体现，有效期时间长了，钱就没有了,这钱也是我们辛辛苦苦赚的，好伤心。

解决方案一：
新增一个账户充值功能然后凑够 100 能体现。

解决方案二：
到了有效期，提示我们，手动体现到了有效期不足100也能体现

解决方案三：
账户余额不消失，不能体现，但可是用于支付，uniapp 等其他产品的支付也行比如 unicloud 等。。。

等。。。。。

继续阅读 »

给大家分享一个接单/发单得小程序

uniapp原生插件启动图片

小程序链接：

小程序://吖唏接单/Tm0Y19RMgyRQOYb

三星手机Android 15 不兼容问题解决

使用uniapp开发应用程序，结果部分用户使用三星手机无法正常安装，总结了下原因大概如下两点：

原因一：targetVersion 设置过低无法兼容最新版。

解决方式：查看自己手机系统版本，找到对应API等级。我这里是Android15，对应API等级35。重新打包发布后，下载安装可以正常安装到三星Android15版本手机。

https://uniapp.dcloud.net.cn/tutorial/app-android-targetsdkversion.html

原因二：CPU不兼容。

解决方式：勾选对应CPU，如果不确定，全部勾选，不要漏掉。

继续阅读 »

一个用于压缩小程序 JSON 文件的 unplugin 插件，支持 webpack 和 vite

体积优化 uni-app uni-app-x 小程序

@uni_toolkit/unplugin-compress-json

一个用于压缩 JSON 文件的 unplugin 插件，可用于减小小程序端产物体积，支持 Vite、Webpack 主流构建工具。

功能特性

🗜️ 自动压缩 - 自动移除 JSON 文件中的空白字符和换行符
🔧 多构建工具支持 - 支持 Vite、Webpack、Rollup 等构建工具
⚡ 零配置 - 开箱即用，无需额外配置
🎯 精确匹配 - 只处理 .json 文件，不影响其他资源

安装

# npm  
npm install @uni_toolkit/unplugin-compress-json -D  

# yarn  
yarn add @uni_toolkit/unplugin-compress-json -D  

# pnpm  
pnpm add @uni_toolkit/unplugin-compress-json -D

使用方法

Vite

// vite.config.js  
import { defineConfig } from 'vite'  
import CompressJson from '@uni_toolkit/unplugin-compress-json/vite'  
import uni from '@dcloudio/vite-plugin-uni'  

export default defineConfig({  
  plugins: [  
    uni(),  
    CompressJson(),  
  ],  
})

Vue CLI

// vue.config.js  
const CompressJson = require('@uni_toolkit/unplugin-compress-json/webpack')  

module.exports = {  
  configureWebpack: {  
    plugins: [  
      CompressJson(),  
    ],  
  },  
}

工作原理

插件会在构建过程中自动检测所有 .json 文件，并移除其中的：

空格
制表符
换行符
其他空白字符

压缩前：

{  
  "name": "example",  
  "version": "1.0.0",  
  "description": "这是一个示例"  
}

压缩后：

{"name":"example","version":"1.0.0","description":"这是一个示例"}

注意事项

插件只处理构建输出中的 .json 文件
不会修改源代码文件
适用于生产环境构建，可以减小打包体积

继续阅读 »

@uni_toolkit/unplugin-compress-json

一个用于压缩 JSON 文件的 unplugin 插件，可用于减小小程序端产物体积，支持 Vite、Webpack 主流构建工具。

功能特性

🗜️ 自动压缩 - 自动移除 JSON 文件中的空白字符和换行符
🔧 多构建工具支持 - 支持 Vite、Webpack、Rollup 等构建工具
⚡ 零配置 - 开箱即用，无需额外配置
🎯 精确匹配 - 只处理 .json 文件，不影响其他资源

安装

# npm  
npm install @uni_toolkit/unplugin-compress-json -D  

# yarn  
yarn add @uni_toolkit/unplugin-compress-json -D  

# pnpm  
pnpm add @uni_toolkit/unplugin-compress-json -D

使用方法

Vite

// vite.config.js  
import { defineConfig } from 'vite'  
import CompressJson from '@uni_toolkit/unplugin-compress-json/vite'  
import uni from '@dcloudio/vite-plugin-uni'  

export default defineConfig({  
  plugins: [  
    uni(),  
    CompressJson(),  
  ],  
})

Vue CLI

// vue.config.js  
const CompressJson = require('@uni_toolkit/unplugin-compress-json/webpack')  

module.exports = {  
  configureWebpack: {  
    plugins: [  
      CompressJson(),  
    ],  
  },  
}

工作原理

插件会在构建过程中自动检测所有 .json 文件，并移除其中的：

空格
制表符
换行符
其他空白字符

压缩前：

{  
  "name": "example",  
  "version": "1.0.0",  
  "description": "这是一个示例"  
}

压缩后：

{"name":"example","version":"1.0.0","description":"这是一个示例"}

注意事项

插件只处理构建输出中的 .json 文件
不会修改源代码文件
适用于生产环境构建，可以减小打包体积

收起阅读 »

【经验】pc微信小程序监听窗口状态：最小化、显示、失焦聚焦

微信小程序

文档地址：
wx.onWindowStateChange监听小程序窗口状态变化事件。仅适用于 PC 平台
 wx.offWindowStateChange移除小程序窗口状态变化事件的监听函数

// #ifdef MP-WEIXIN  
// 监听小程序窗口状态变化事件。仅适用于 PC 平台；建议在onLoad生命周期下添加监听  
if (wx.onWindowStateChange) {  
    wx.onWindowStateChange(function(res) {  
        /**  
         * @param {string} res.state  
         * minimize：窗口最小化  
         * normalize：窗口最小化后，再次打开小程序  
         */  
    });  
}  
// 移除小程序窗口状态变化事件的监听函数；建议在onUnload生命周期下移除  
if (wx.offWindowStateChange) {  
    wx.offWindowStateChange();  
}  
// #endif

继续阅读 »

文档地址：
wx.onWindowStateChange监听小程序窗口状态变化事件。仅适用于 PC 平台
 wx.offWindowStateChange移除小程序窗口状态变化事件的监听函数

// #ifdef MP-WEIXIN  
// 监听小程序窗口状态变化事件。仅适用于 PC 平台；建议在onLoad生命周期下添加监听  
if (wx.onWindowStateChange) {  
    wx.onWindowStateChange(function(res) {  
        /**  
         * @param {string} res.state  
         * minimize：窗口最小化  
         * normalize：窗口最小化后，再次打开小程序  
         */  
    });  
}  
// 移除小程序窗口状态变化事件的监听函数；建议在onUnload生命周期下移除  
if (wx.offWindowStateChange) {  
    wx.offWindowStateChange();  
}  
// #endif

收起阅读 »

华为统一扫码uts插件支持iOS、Android、HarmonyOS支持Component组件模式

华为统一扫码uts插件，支持uniapp/uniapp-x项目，支持三端iOS、Android、HarmonyOS（仅支持默认扫码）,支持vue2/vue3，支持连续扫码，多码模式，支持Component模式（全屏、半屏扫描，自定义扫码页面）插件链接https://ext.dcloud.net.cn/plugin?id=21761 android端体验demo下载地址：https://www.pgyer.com/hwscanunix

继续阅读 »

个人全职接单，时间充裕，诚心全职开发，期待合作！！！

编译 uniapp uni_app项目招聘与外包外包接单外包

全栈经验，这方面的软件开发的比较多，有相关案例，时间充裕，诚心合作，个人全职工作。uniapp 做过很多，十分熟练，有需要请联系我 V：zwwz123123
同行勿扰谢谢.

uni-app差异性问题记录（个人记录）

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

参考：

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

微信小程序

supportedMaterials路径配置

path中不要包含weixin这个单词，否则会页面白屏

继续阅读 »

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

参考：

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

微信小程序

supportedMaterials路径配置

path中不要包含weixin这个单词，否则会页面白屏

收起阅读 »

活动主题：星光不负，码向未来

活动时间：

征文方向

方向一 成长纪实

方向二 案例实战

方向三 参赛心得

奖项设置

参与方式

评审标准

行动起来吧！

活动主题：星光不负，码向未来

活动时间：

征文方向

方向一 成长纪实

方向二 案例实战

方向三 参赛心得

奖项设置

参与方式

评审标准

行动起来吧！

背景

解决方案

背景

解决方案

使用技术

项目结构目录

热文推荐

使用技术

项目结构目录

热文推荐

小程序://吖唏接单/Tm0Y19RMgyRQOYb

小程序://吖唏接单/Tm0Y19RMgyRQOYb

@uni_toolkit/unplugin-compress-json

功能特性

安装

使用方法

Vite

Vue CLI

工作原理

注意事项

@uni_toolkit/unplugin-compress-json

功能特性

安装

使用方法

Vite

Vue CLI

工作原理

注意事项

uni-app

原生标签

input元素编译后的结构（251002）

input元素的align-items属性（251008）

button元素编译后的结构（251012）

自定义组件

自定义组件DOM结构（251002）

自定义组件根节点样式（251011）

vue语法

App.vue（251006）

插槽（260102）

全局函数

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

第3方依赖

weapp-tailwindcss/vite（251012）

微信小程序

supportedMaterials路径配置

uni-app

原生标签

input元素编译后的结构（251002）

input元素的align-items属性（251008）

button元素编译后的结构（251012）

自定义组件

自定义组件DOM结构（251002）

自定义组件根节点样式（251011）

vue语法

App.vue（251006）

插槽（260102）

全局函数

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

第3方依赖

weapp-tailwindcss/vite（251012）

方向一成长纪实

方向二案例实战

方向三参赛心得

方向一成长纪实

方向二案例实战

方向三参赛心得