uniapp开发小程序如何实现多平台,多环境一键自动编译?其实还是挺简单的。

544 阅读3分钟

本篇文章是基于HbuildX可视化界面创建的项目下实现的配置多环境,使用脚手架创建的项目暂未研究

创建项目的过程就不啰嗦了

一、直接贴图看效果

1、这是点击运行时的效果

image.png image.png

2、这是点击发行时的效果

image.png image.png

以上两张截图是两个项目中分别配置的多个自定义环境,可以自定义多个平台以及多个地址,以满足公司多平台开发多环境调试的需求

二、具体代码

1、业务代码其实也很简单

code.png

2、回头看官方例子

然后这时候再来从官网的定义下结合实际代码来理解实际业务该如何定义 uniapp.dcloud.net.cn/collocation…

image.png

3、二者结合理解

在我们项目中对自定义平台进行定义时

其中 mp-alipay-xxx-local 字面意思就是自定义的编译平台

其中 title 是你点击运行或者发行时所展示的平台字样

其中 env 字段我只用了 UNI_PLATFORM 用来定义是微信还是支付宝还是抖音等平台

其中 define 字段中的 MP-WEIXIN-XXX-PROD MP-ALIPAY-XXX-TEST 等都是为了在编写代码时用到条件编译语句进行区分平台和环境用的

三、结合条件编译的实际应用

1、封装axios请求拦截器

比如,诸如 MP-WEIXIN-XXX-PROD MP-ALIPAY-XXX-TEST 这类的定义在封装axios请求拦截器时,可以通过自定义的平台进行区分开发时需要的不同环境的域名

XXX.png

2、不同平台不同全局参数

又或者,在封装axios请求拦截器时,各个不同的平台需要传递不同的参数,我们可以将全局参数提取出来,然后通过自定义的编译条件进行区分,甚至可以单独对某个接口的全局参数进行控制

xx.png

3、不同平台不同逻辑

又又或者,有时在某个平台需要单独调用某些接口实现特定逻辑

xx.png

4、不同平台不同样式

又又又或者,不同平台不同样式

xx.png

5、条件编译的官方教程

更多的条件编译的使用场景和使用语法可以参考官方给出的例子 uniapp.dcloud.net.cn/tutorial/co…

四、最后总结

1、以上举例中的业务代码是经过精简后的,比如上面的各个不同环境和全局参数等,大家可以通过提取到单独的文件中,这样更有利于项目的维护

2、个人感觉不同平台不同环境多了后,像下面这种通篇的条件,虽然只是单纯的cv,但在编写业务代码时很头疼,且始终觉得不够优雅。碍于能力有限,暂时还没有想出更好更优雅的解决方案,不过官方教程中好像也只是通过这样的方式实现差异化处理的。

// #ifdef MP-WEIXIN-XXX-TEST || MP-WEIXIN-XXX-PROD || MP-WEIXIN-XXX-LOCAL

// #endif

3、文章写的很少,文章的排版比较简单,文笔也比较烂,技术能力也有限,所以欢迎大家在评论区提出自己对本文需求更好的理解,以及本文中有误的地方,或者宝贵的建议。