UniApp开发体验感受总结

从原生切换到UniApp开发,其实不难,整个过程算是挺顺利,偶尔遇到一些小问题也能通过AI快速定位解决,这也难怪不少APP和小程序采用了UniApp开发,很适合小屏设备的切换开发。下面就过程中的一些知识点做一些记录,方便回顾查找。

UniApp作为移动端跨平台技术,是基于H5进行开发跨屏台,也就是底层还是基于浏览器的渲染技术,那么H5用到的JavaScript、css3等还是存在的,这也是其使用VUE框架进行项目构建的原因。

1.相比Flutter,其性能应该是略有不及,但够用,不适合大型游戏等要求高性能的场景,有也是像小程序这种益智小游戏,所以要性能就不要考虑UniApp进行开发。它特备适合增删改查的应用场景,能够支持发布多种小程序平台和移动操作系统的移动应用

2.不太适合对硬件交互,或者说原生接口调用多的场景,例如安卓和苹果等原生系统等基础API的调用,虽说可以通过添加适配引用,间接通过JavaScript来进行交互调用,但通常这意味着开发者要很熟悉原生开发,这会导致开发者觉得不如直接用原生开发

3.开发工具有Hbuilder、VS code,我这里用的后者,前者很久前也用过,不过VS code的高扩展性更适合现在的开发场景,毕竟不少AI编辑器都是基于其进行二次开发的。VS code安装后记得安装相关uniapp的插件,这个直接问AI就可以照做,不会有啥问题

4.项目结构跟其他移动端开发区别不大,很像微信小程序和安卓等程序的结构,这也是为啥能通过具体的终端发布指令进行不同平台发布的原因。例如运行npm run build:mp-weixin可以发布微信小程序,发布后的项目代码是有进行代码压缩的,需要用微信开发者工具打开,才能真正推送发布到微信平台,也就是说不能完全依赖于一个开发工具实现所有流程的发布

5.代码上,一个**.vue是一个功能页面,看得出来主要采用了vue语法**,规范的页面包含template在页面上方作为视图模板,中间是script作为脚本逻辑核心,下方style作为样式处理css。在实现核心的业务需求及功能上,重点关注script部分,另外两部分通过AI实现基本偏差不大

6.不用慢慢一步步学才开始构建第一个项目,UniApp的起步难度不大,可以在具体项目上边做边学,这区别于其他原生开发,当然这句话前提是你会H5相关的JavaScript、CSS。例如你不需要了解安卓的四大组件后才开始动手构建APP功能流程,不用学完VUE才能写逻辑

7.既然是前端项目,依赖node环境也就能理解,所以node环境必须要有,根据自己需要的版本进行安装,当然你可以安装多个版本进行切换,具体可参考这篇文章https://blog.csdn.net/u014650759/article/details/160326024

8.可以让AI搭建一个基本简单的项目框架,不用像其他项目,自己从新建项目到添加基本的依赖从头开始,我也没在VS code里面找到创建项目的入口,原因是VS code本身也更依赖于用命令创建项目,你需要安装相关插件,通过控制台命令调用插件创建项目。创建后执行npm install,作用是添加引用依赖。

9.遵从mvvm的开发模式,也就是数据驱动。这点做过安卓或者WPF开发的应该能感同身受,快速切换过来。template中通过{{绑定对象}}来实现绑定,不同于WPF其可以绑定方法及对象,事件并非绑定而是直接通过@click等事件触发

10.CSS方面,采用了内嵌来表示父子包含关系,感觉很不错,其对应了view试图中的父子包含关系,比以前写下层的>符号,或级联一起写更直观一目了然,例如一个顶部标题栏:

css 复制代码
// 顶部标题栏
.header-bar {
  background: linear-gradient(135deg, #9988f1 0%, #a78bfa 100%);
  padding: 40rpx 30rpx 30rpx;

  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .header-title {
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}
相关推荐
小林ixn2 分钟前
React + Zustand + JWT:从零实现登录鉴权与请求拦截
前端·react.js·前端框架
葡萄城技术团队6 分钟前
下拉多选类型单元格:在 SpreadJS 里接入 xm\-select
前端
粥里有勺糖30 分钟前
视野修炼-技术周刊第130期 | 光影效果
前端·javascript·github
小岛前端1 小时前
AI Skills 已经封神,但新的问题却越来越严重!
前端·后端·github
拖孩1 小时前
一个人 + AI 做的小程序,上线 15 天赚了 10 块 5
前端·后端·微信小程序
用户93983829415991 小时前
安卓自动化脚本热更新怎么做?不重新打包 APK 也能更新代码
前端
猫七先生1 小时前
在 React 里用 PMTiles 自托管底图
前端
tanghonghanhaoli1 小时前
【图书翻译】有意义的游戏设计:桌面游戏的方法论与心理学(第1、2章)
前端·游戏·ui
光影少年1 小时前
react native打包优化、包体积瘦身、离线包/热更新方案
前端·react native·react.js
Cache技术分享1 小时前
504. Java 反射 - 创建一个简单的依赖注入框架
前端·后端