鸿图初展，蒙学破茧：与uniapp-x和tmui4.0共闯鸿蒙Next实战录

分类：鸿蒙Next

鸿蒙征文

相识篇

2025年02月24日，这一天难忘。随着鸿蒙生态的蓬勃发展，我和小伙伴们也在不断学习、探索、交流中，得知了uniapp-x的官网：https://doc.dcloud.net.cn/uni-app-x地址，这个网站里我读懂了2个很重要的信息。
其一：uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。uts在Android平台编译为kotlin、在iOS平台编译为swift、在鸿蒙next平台上编译为ArkTS、在Web和小程序平台编译为js。官方重心便宜至uniapp-x上科技的创新。
其二：在这个网页下面有个插件生态部分描述了：TMUI4.0：高品质UI库，插件大赛一等奖。

综合这两方面原因：我也深知原来无任何app开发经验的小白，必须需要借助uniapp-x和tmui4.0才有逆袭的机会。从此刻开始就暗自下定决心利用工作之外的时间冲刺鸿蒙Next的app开发。

后盾篇

利用工作日之外的时间，我还必须跟家庭表达我的真实想法要冲刺鸿蒙Next的app开发。跟他们沟通说：鸿蒙Next的app将来一定会越来越有前景和市场，尤其是在Ai时代背景下，做好鸿蒙Next的app开发，一定会有很大的发展。最终得到已怀孕老婆的支持，我也终于可以开始了。

学习过程

1. 笔记分享

2025年02月25日：
1.采购tmUI 4.0的Vip资料，并且官方给了一些资料。计划先学习下uniapp-x官方资料。

2.编译到微信时，

如果提示xanimations页面不存在，就改成下pages.json中的名称改成页面的xAnimationS
如果hbx编译成功后打不开微信工具，就自己手动打开工具，点导入项目，导入你根目录中的unpackage/dis/dev/mp-weixin
然后模拟器上方把热重载关闭下。
接着可能报echart.js,mqtt.js文件不存在。需要你手动复制到mp-weixin目录内，这个看我常文档：见问题页面。就是复制到对应目录结构内。
解释下原因：
第1点，是我复制的时候，是复制老的页面，名称忘记改了。
第2点，和第3点是同一个原因：hbx sdk 目录不支持import * as xxx这种 amd 类的js模块。只能改成require(xxx)导入，但改成这种导入方式后，hbx sdk编译时，又不会主动把文件复制到编译目录，所以需要手动导入
第3点为什么我要把ecahrt.js单独放到页面上：原因为了包大小，因为只2mb限制。而且为了全量功能，单独放page内，它这个依赖会打到分包中，不会在主包中。这样。我的demo发布120个页面共6-10mb大小，也能发布。同理你们的也是

2025年02月26日：
1.学习配置uts的开发环境

2025年03月01日：
1.xRequest.uts的警告消除，已给官方反馈。

2025年03月15日：
1.泛型使用过一次就会丢失类型，需要重新的生成和定义。
2.import的页面组件，不能放到pages.json里面，组件就是组件，页面就是页面，必须分清楚。

3.2025年03月18日：
1.安装雷电模拟器9
2.制作自定义基座。
3.方便调试代码使用，依然是uts类型不熟练导致的，明天接着学习。我一定要拿下apk。
4.最终换成mumu模拟器来实现了，自定义打包，自定义基座。

2025年03月20日：
写插件流程
先预估与兼容平台：安卓,ios,web,mp
如果都有，可以先开发web,mp
再写安卓
再写ios( ios 相对简单)，

2025年04月07日：
input插件，有个adjust-position参数可以控制是否键盘弹起时，是否自动上推页面。

2025年04月29日：MCP+TRAE
@Run🍀 你去试下看看https://context7.com/tmzdy888/tmui4-doc
2025年5月26日：解决x跨域的问题

2025年6月5日：
用require导入的模块在小程序这边。。x编译时直接自动忽略

2025年6月10日：Tmui4.0跨域本地H5跨域问题处理

参考官方网址新增文件：vite.config.js

https://doc.dcloud.net.cn/uni-app-x/web/#dev-server
export default defineConfig({
plugins: [uni()],
server: {
port: 9527,
proxy: {
'/api': {
target: 'https://zscXXXXX/api',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
}
},
}
});

修改下请求的开发环境，解决本地H5跨域的问题。解放后台。

2025年06月11日：

1.2025年05月03日：
首次尝鲜安装鸿蒙Next的开发工具，安装模拟器，然后成功运行一个示例工程。

2.2025年08月16日：
如果有鸿蒙next有2个软件，一个是：我的开发案例、HMOS代码工坊
Vip群开发的例子和demo:
plugin/README.md · HarmonyOS-Cases/Cases - Gitee.com

App上架的流程总结：
步骤一：首页需要在腾讯云/百度云等服务商进行app的ICP备案工作。
步骤二：完成App的上架工作（暂不需要app软著），上架时需要校验ICP备案结果。
步骤三：完成App上架后获取下载链接，在开通商户服务时需要找个地址信息。
步骤四：等待官方评审是否达到要求。

以上均是日常学习过程中的笔记真实分享，虽杂乱，但字里行间透露一种真诚，坚持、努力！

2. 给官方提出一个ISSUE：

https://issues.dcloud.net.cn/pages/issues/detail?id=22088，因此问题影响还比较大，最终得官方得认同后，及时修复完成。

3.参与开源项目uni-x-ai组件的使用和测试任务，也提了下优化的功能点。

活动契机：2025年激励计划

tmui4.0的官方群里得知，2025年的激励计划将会推出一个“鸿蒙应用开发大赛”，奖项将会奖励优秀的应用。我立马报名参加了。我登陆活动页面：https://developer.huawei.com/consumer/cn/activity/harmonyos-incentive/2025 我知道这是一次很好的机会，让自己学习到的uniapp-x语法和tmui4.0组件知识做一个综合项目，也算是将近200天的课外学习的付出有个结果。

我决定将开发一款鸿蒙next的app：《小张Ai运维智能体》，将此作品作为2025年激励计划的参赛作品。比赛期间：
1.我又学习到如何进行app备案，
2.如何进行app的自动化测试，
3.如何在鸿蒙开发平台agc上进行app包的调试工作。
4.如何进行发布和审核，
5.如何进行app的迭代更新。

截止写这篇文章时，我一个人已经独自完成app的前后端的开发工作，正在接收鸿蒙官方的审核。审核通过后将会发布应用市场，也衷心希望app能顺利让大家在鸿蒙Next平台上使用。

总结

冥冥之中：就在2025年11月02日tmui4.0的官方群里得知，官方有个https://ask.dcloud.net.cn/article/42142（【鸿蒙征文】星光不负，码向未来！分享你的uni-app鸿蒙开发实践，赢取精美好礼！）活动，我想着这又是一个很好的契机，所以我报名参加了。我就将过去真实的记录一起分享给大家，这也是对过去的努力做一个总结，也是开启下阶段继续学习鸿蒙next的动力，为生态发展贡献自己的一份力量。
望有更多的小伙伴们加入鸿蒙Next的开发，共同学习，共同推动鸿蒙生态的发展。也希望uniapp-x和tmui4.0做的越来越好。