uni-app x的3个App平台的蒸汽模式已经全面发布

HBuilderX 5.21起支持了Android蒸汽模式。

uni-app x 蒸汽模式，即跨平台，又比原生渲染性能更高。详见

Android蒸汽模式支持使用普通js/ts编写，解除强类型限制。iOS、鸿蒙也同样支持。老uni-app可以更方便的升级为uni-app x 蒸汽模式。详见

uni-agent，顶尖模型和为uni深度优化的agent

• 对uni理解最强，可以在不懂原生的情况下开发uts原生插件。
• 支持普通web项目和后台开发。此时与cc、codex等一样。
• 支持多种模型，性价比优秀。
• 手机端可以指挥AI开发，并且在手机上打包web和apk看效果。
• uni-agent不是AI辅助编程，而是AI替你编程。你只需要给它发送要求、以及验收它的成果。详见

前言

本文整理了一些比较常用的原生插件，包括扫码、图片选择、文件选择、图片编辑、应用通知、应用未读角标、开机自启、sqlite数据库、保活、快捷方式、图片水印、视频压缩、动态修改应用图标等等，有其他需要可以留言，感谢支持。

📑 目录

👤 作者介绍

作者： 三杯五岳（q:2579546054）

专注于 UniApp 原生插件、UTS插件开发，包括安卓、苹果、鸿蒙，致力于为开发者提供高质量、易用的原生插件解决方案。

主要方向：

• UniApp 原生插件开发
• UniApp UTS插件开发
• Android、iOS、Harmony原生项目开发
• 移动端跨平台项目开发
• 微信小程序
• PC前端

> 💡 提示： 如需定制开发、技术支持或有其他需求，欢迎通过QQ或留言咨询！

⭐ 如果这些插件对您有帮助，欢迎点赞、收藏、分享！⭐

感谢支持！

场景：在AndroidStudio中运行uniapp-x SDK，移除uniapp调试信息，移除uniapp调试aar，静态资源不显示。打算打包release版本前测试一下的，即使打包release版本还是不显示静态资源。
解决方法：
1、在AndroidManifest.xml中关闭调试
即删除 <meta-data android:name="DCLOUD_DEBUG" android:value="true"/>
// 这里我把值改为false也没用，所有直接删除了保险一些
2、修改uniappx模块的build.gradle强制指定assets位置

    sourceSets {  
        main {  
            assets {  
                srcDirs = [  
                        'src/main/assets',    
                ]  
                include '** / *'   
            }  
        }  
    }  

使用Android Studio工具去生成，效果嘎嘎好

有不会的联系我，或者发送邮件:it2003wei@163.com,请我喝杯奶茶帮你搞定嘻嘻

有个小项目外包前端，需要适配安卓+苹果+鸿蒙，有空闲的来。需要有至少两个以上APP开发经历，vue3+ts。

vue3 + vite

vue3 下 , h5使用rpx 时, 会 编译成 rem

注册 postcss 的 plugin

在/node_modules/@dcloudio/uni-h5-vite/dist/plugin/config.js,
代码是, 用的 是config 这个钩子

 css: {  
    postcss: {  
        plugins: (0, uni_cli_shared_1.initPostcssPlugin)({  
            uniApp: (0, uni_cli_shared_1.parseRpx2UnitOnce)(inputDir, process.env.UNI_PLATFORM),  
        }),  
    },  
},

parseRpx2UnitOnce , 选定使用的单位

exports.parseRpx2UnitOnce = (0, uni_shared_1.once)((inputDir, platform = 'h5') => {  
    // 如果是  h5/app/鸿蒙 会使用 defaultRpx2Unit  
    const rpx2unit = platform === 'h5' || platform === 'app' || platform === 'app-harmony'  
        ? uni_shared_1.defaultRpx2Unit  
        : uni_shared_1.defaultMiniProgramRpx2Unit;  
    const manifestJson = (0, exports.parseManifestJsonOnce)(inputDir);  
    let platformOptions = getPlatformManifestJson(manifestJson, platform);  
    if (platformOptions && platformOptions.rpx) {  
        return (0, shared_1.extend)({}, rpx2unit, platformOptions);  
    }  
    return (0, shared_1.extend)({}, rpx2unit);  
});

都有啥呢 ?

const defaultRpx2Unit = {  
    unit: 'rem',  
    unitRatio: 10 / 320,  
    unitPrecision: 5,  
};  
const defaultMiniProgramRpx2Unit = {  
    unit: 'rpx',  
    unitRatio: 1,  
    unitPrecision: 1,  
};

但是 注意这里 let platformOptions = getPlatformManifestJson(manifestJson, platform);
还是 会从 mainfest中 获取 配置的, 如果有 , 就用 mainfest 中的,
也就是 你可以 在 manifest.json的 h5节点下 , 覆盖 一些 配置 , 例如

    "h5": {  
        "router": {  
            "mode": "history"  
        },  
        "unit": "px",  
        "unitRatio": 0.5,  
        "unitPrecision": 2,  
    }

但是 文档里 , 我没有 找到

哪里 修改的 rpx 2 rem 呢?

在这里 /node_modules/@dcloudio/uni-cli-shared/dist/postcss/plugins/uniapp.js

const uniapp = (opts) => {  
    const platform = process.env.UNI_PLATFORM;  
    const { unit, unitRatio, unitPrecision } = (0, shared_1.extend)({}, defaultUniAppCssProcessorOptions, opts);  
    const rpx2unit = (0, uni_shared_1.createRpx2Unit)(unit, unitRatio, unitPrecision);  
    return {  
        postcssPlugin: 'uni-app',  
        prepare() {  
            return {  
                OnceExit(root) {  
                    root.walkDecls(walkDecls(rpx2unit));  
                    const rewriteTag = transforms[platform];  
                    filterPrefersColorScheme(root);  
                    if (rewriteTag) {  
                        root.walkRules(walkRules({  
                            rewriteTag,  
                        }));  
                    }  
                },  
            };  
        },  
    };  
};

就是 遍历 然后 替换

function walkDecls(rpx2unit) {  
    return (decl) => {  
        const { value } = decl;  
        if (value.indexOf('rpx') === -1 && value.indexOf('upx') === -1) {  
            return;  
        }  
        // 如果有 rpx 或者upx, 就调用rpx2unit  
        decl.value = rpx2unit(decl.value);  
    };  
}

const unitRE = new RegExp(`"[^"]+"|'[^']+'|url\\([^)]+\\)|(\\d*\\.?\\d+)[r|u]px`, 'g');  

// 这里的  参数 就是  defaultRpx2Unit的三个参数  
function createRpx2Unit(unit, unitRatio, unitPrecision) {  
    // ignore: rpxCalcIncludeWidth  
    return (val) => val.replace(unitRE, (m, $1) => {  
        if (!$1) {  
            return m;  
        }  
        if (unitRatio === 1) {  
            return `${$1}${unit}`;  
        }  
        // 替换 为 rem  
        // 就是  * unitRatio, 然后 保留unitPrecision 位的小数  
        const value = toFixed(parseFloat($1) * unitRatio, unitPrecision);  
        return value === 0 ? '0' : `${value}${unit}`;  
    });  
}

我是 分割线----------------------------------------------------------------------------------------------------------------------------------------------------------------

vue2 + webpack

再 说一下 vue2的 处理, vue2 是 依托于 vue-cli-service

查看打包结果

写一个 最简单的 项目,
查看 打包后的 结果

 ___CSS_LOADER_EXPORT___.push([  
            module.id,  
            '@charset "UTF-8";\n/**\n  */.ggdxd[data-v-4551d3b2]{height:%?600?%;background-color:pink}',  
            "",  
        ]);

是 内联css ,
而 可以 修改么? 可以 在 vue.config.js中 设置css.extract么?

不可以

查看代码, uni 是 使用 自定义 的 vue-cli-service 插件,
/node_modules/@dcloudio/vue-cli-plugin-uni/index.js

h5 强制要 内联css...

if (process.env.UNI_PLATFORM === 'h5' || process.env.UNI_USING_V3) {  
    options.css.extract = false  
} else {  
    options.css.extract = true  
}

height:%?600?%

在 cli 项目中, 根目录下会有postcss.config.js
实际上 使用了 uni的 一个自定义 插件require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
在 parseWord方法中

if (process.env.UNI_PLATFORM === 'h5') {  
    if (u === 'upx' || u === 'rpx') {  
          // 这里 变成了很奇怪的东西  
      node.value = `%?${num}?%`  
    }  
}

也就是 在编译的产物中, rpx/upx 都转成了 %?${num}?%的 格式

啥时候 转成 px 哦?

是 运行时!

运行时的 转换代码 是哪里来的?

是 通过 webpack的 loader 处理的

我写了一个 webpack 插件, 获取了 resolve 之后的 样式使用的loader

[  
  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/pitcher.js",  

  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader/index.js",  

  "/node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js",  
  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js",  
  "/node_modules/postcss-loader/dist/cjs.js",  
  "/node_modules/postcss-loader/dist/cjs.js",  
  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js",  
  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js",  
  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js",  
  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js",  
  "/node_modules/@dcloudio/vue-cli-plugin-uni/packages/wrap-loader/index.js",  
]

为什么会使用这个 h5-vue-style-loader?

用了 alias

在 /node_modules/@dcloudio/vue-cli-plugin-uni/lib/h5/index.js文件中配置了webpack

resolveLoader: {  
    alias: {  
      'vue-style-loader': resolve('packages/h5-vue-style-loader')  
    }  
  }

在 h5-vue-style-loader中 处理 css模块时,
编译源码是

var code = [  
  '// add the styles to the DOM',  
  'var add = require(' + addStylesClientPath + ').default',  
  'var update = add(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'  
]

动态 插入了 add/update 方法
执行后的返回示例:

// style-loader: Adds some css to the DOM by adding a <style> tag  

// load the styles  
var content = require("........!../node_modules/@dcloudio/vue-cli-plugin-uni/packages/wrap-loader/index.js??clonedRuleSet-45[0].rules[0].use!./App.vue?vue&type=style&index=0&lang=scss&");  

if(content.__esModule) content = content.default;  

if(typeof content === 'string') content = [[module.id, content, '']];  
if(content.locals) module.exports = content.locals;  

// add the styles to the DOM  
var add = require("!../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js").default  
var update = add("43b7a677", content, true, {"sourceMap":false,"shadowMode":false});

也就是 这个 css 模块 变成了 上面的样子

运行时呢?

css模块 代码 注入了
var add = require("!../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js").default

源码是:

var UPX_RE = /%\?([+-]?\d+(\.\d+)?)\?%/g;  
function processCss(css) {  
    var page = getPage();  
    if (typeof uni !== "undefined" && !uni.canIUse("css.var")) {  
        //不支持 css 变量  
        var offset = getWindowOffset();  
        css = css  
            .replace(VAR_STATUS_BAR_HEIGHT, "0px")  
            .replace(VAR_WINDOW_TOP, offset.top + "px")  
            .replace(VAR_WINDOW_BOTTOM, offset.bottom + "px")  
            .replace(VAR_WINDOW_LEFT, "0px")  
            .replace(VAR_WINDOW_RIGHT, "0px");  
    }  
    return css  
        .replace(BODY_SCOPED_RE, page)  
        .replace(BODY_RE, "")  
        .replace(PAGE_SCOPED_RE, "body." + page + " uni-page-body")  
        .replace(/\{[\s\S]+?\}|@media.+?\{/g, function (css) {  
            if (typeof uni === "undefined") {  
                return css;  
            }  
            // 这里 把  %?数值?% 格式的  数字样式 使用 upx2px 计算成px  
            return css.replace(UPX_RE, function (a, b) {  
                return uni.upx2px(b) + "px";  
            });  
        });  
}

是原生SDK 有需要的联系我

使用uni.setStorage/getStorage存读数据，PC调试的时候都没问题。封装apk，安装后，读不出来了。不管是同步还是异步。已经打算自己写xml了。不知有无大佬遇到类似问题。

在内置浏览器上会报错，运行在真机上就可以

建议控制台新增日志关键字过滤功能，这样可以过滤掉无关日志，方便阅读

鸿蒙端使用升级中心，发布测试版本后，直接运行到手机上测试 wgt 升级时可能会发现升级不成功，应用重启后还是旧的内容；

这是因为运行到鸿蒙端调试时，升级中心释放 wgt 的逻辑被调试时的热更新覆盖掉了，但是可以使用以下方法测试 wgt 升级：

1. 使用本地打包，生成安装包

2. 将打包出来的内容（unpackage/dist/build/app-harmony）直接拖到 DevEco 中运行到升级测试

尊敬的uniCloud开发者，您好!

为提升资源调度效率与服务稳定性，阿⾥云函数计算（FC）已于2025年12⽉09⽇起对计费规则进⾏全⽹升级，详见阿里云官网公告。

uniCloud阿里云服务空间的云函数功能基于 FC 构建，将同步调整相关计费逻辑。本次调整主要涉及云函数资源使用量（GBs）的最低计费规则，旨在保障所有⽤户公平、⾼效地使⽤云资源。

变更内容

阿里云提供自公告日起两个月的缓冲期，即⾃2026年3月16日开始，阿里云服务空间云函数的资源使用量（GBs）费⽤计算⽅式将做如下调整：

新增⼩时级最低消费规则

• 系统在计算每⽇账单时，会先按“单个函数 + ⼩时”维度评估资源用量消耗。
• 若某函数在某⼀⼩时内产⽣了资源用量消耗（即 GBs > 0），则该⼩时对应的资源用量费⽤不低于 0.01 元。
  • 若实际消耗 ≥ 0.01 元，按实计费；
  • 若实际消耗 < 0.01 元，则按 0.01 元 计收。
• 未运⾏的函数不参与计费，仍可实现“零成本”运⾏。

包年包月套餐、按量计费两种不同计费方式服务空间的具体体现：

• 按量计费：阿里云仍以天为单位聚合展示⽤量和费⽤。新规则仅在后台计费引擎中按“函数+⼩时”应⽤最低消费，最终结果合并计⼊每⽇账单。
• 包年包月：套餐内的云函数资源用量 (GBs) 将按照新规进行累加，不足 0.01 元的用量按 0.01 元折算GBs，反之则按实际用量。比如按量计费 1GBs 定价 0.000110592 元，最低消费 0.01 元的话，最终换算成GBs：0.01/0.00011059290≈90GBs

重要说明：此最低消费仅针对云函数资源使用量（GBs），不影响云函数调⽤次数、出⽹流量等其他计费项。

对您的影响

多数⽤户不受显著影响

• 如果您的函数调⽤频率正常、单次执⾏资源消耗合理，账单基本⽆变化。
• 若函数在某⼩时内未被调⽤或未产⽣资源用量消耗，不会触发最低消费，也不会产⽣任何费⽤。

低频/极低消耗场景产⽣⼩额费⽤

• 经统计，很多⽤户存在部分函数处于极低频调⽤状态（如每天仅调⽤⼏次，且每次执⾏时间极短、内存占⽤极⼩）。
• 在新规则下，这些函数若在某⼩时内有运⾏记录，即使实际消耗远低于 1 分钱，也将按0.01 元/⼩时/函数 计费，并累加⾄当⽇总费⽤中。

重要说明

• ⽆需任何操作：系统将⾃动应⽤新计费规则，您⽆需⼿动配置或迁移。
• 历史账单不受影响：2026年3⽉16⽇前产⽣的费⽤，仍按原规则计费。

FAQ

• 我还能实现“零成本”运⾏吗？

完全可以！只要函数在某⼩时内未被调⽤，和以前一样不会产⽣任何费⽤。

• 最低消费是否适⽤于所有计费项？

仅适⽤于云函数资源用量（GBs）。云函数调⽤次数、出⽹流量等仍按实际⽤量计费，⽆最低消费限制。

• 如何查询函数的最低消费？

详见用量查询说明。

• 应用没有上线，为什么仍有费用产生？

云函数无调用不会产生费用，应用未上线，可能存在配置定时任务的云函数，检查下业务函数是否配置定时任务。

官方的uni-admin及uni-starter内置定时任务如下：

• uni-stat-cron：uni 统计，每小时运行 1 次，删除可节省 1 天的保底费用 0.24 元（2160Gbs）
• uni-analyse-searchhot：热点搜索，每 2 小时运行 1 次，删除可节省 1 天的保底费用 0.12 元（1080Gbs）

如果业务不需要可以删除。另外clientDB也是云函数，通过客户端操作数据库产生的请求可通过 服务空间详情->云函数/云对象->clientDB 相关日志 查看。

• 我该如何降低潜在的⼩额费⽤？

建议：

• 删除实际业务不使用的定时任务云函数，关闭定时任务可明显降低云函数资源用量；
• 合并功能相似的低频函数，减少函数总数；
• 定期清理⻓期未使⽤的测试/废弃函数；
• 对于必须保留的低频函数，可接受其产⽣少量费⽤（通常每⽉仅⼏⽑⾄⼏元）。

当然，如果您有很多云函数同时被低频调用的场景且无法合并云函数，您也可以将类似的业务迁移至支付宝云或腾讯云，感谢您⼀直以来对 uniCloud 的信任与⽀持。