技术支持
UniApp上手实用总结:写一套代码跑多端的省钱技巧
我半年前要做个门店预约工具,得同时上微信小程序和安卓APP,找了一圈发现UniApp最合适,写一套代码能跑7个端,不用学原生开发也不用写两套逻辑,个人或者小团队用着特别省事儿呢。
上手前不用做太多准备,你会Vue2或者Vue3的基础就行,优先选Vue3,现在官方主推,坑少。编辑器直接用官方配套的HBuilderX,别瞎折腾用VSCode配环境,HBuilderX自带真机调试、一键打包功能,新手用这个能省80%的配置时间。
新手最容易踩三个坑,我都替你试过了。第一别乱用HTML标签,UniApp里常用标签都转成了自定义组件,div要写view,span要写text,img要写image。你硬写div在H5端能跑,到小程序、APP端直接不显示,别犯这种低级错误。第二别瞎写样式,别用*通配符选所有元素改样式,小程序端不识别。单位尽量用rpx,不用自己算不同屏幕的适配,官方自动转,比px方便太多。第三别硬套web那套工具链,别上来就装axios发请求,UniApp自带uni.request方法,简单封装下就能用,axios在APP和小程序端根本跑不起来,白费功夫。
核心功能不用全学,先掌握这几个够用。第一个是页面跳转,不用自己写路由配置,你在pages.json里加完页面路径,直接用uni.navigateTo、uni.switchTab这些方法跳就行,比Vue-Router简单十倍。第二个是跨端兼容,要是某个功能只有特定端能用,直接用条件编译,比如#ifdef MP-WEIXIN 里面写只有微信小程序才执行的代码,用#endif包起来就行,不用写一堆if判断,代码干净很多。第三个是别自己瞎写通用组件,直接用uView或者uni-ui,都是官方或者社区适配好所有端的,拿来就能用,除非你要的功能特别冷门,不然省下来的时间多喝两杯奶茶不好吗。
打包发布也没那么复杂。发H5直接点发行选H5,打包完的文件扔服务器上就能用。发微信小程序的话,先去微信公众平台拿AppID,填到HBuilderX的配置里,发行选微信小程序,会自动调起微信开发者工具,直接上传就行。发安卓APP要是自己内部用不用上架,直接打正式APK包,证书可以直接在HBuilderX里生成,不用搞复杂的签名配置,10分钟就能出包。
最后一点说句实在的,要是你做的是小工具、门店系统、内部管理APP这类应用,用UniApp完全够,流畅度和原生差不了多少,开发时间能省一半以上。要是你要做大型3D游戏或者对性能要求极高的应用,再考虑原生开发就行。我当时那个预约工具,前后写了两周就上线了两个端,要是分开写小程序和安卓,最少要磨一个月。



