小程序容器化：基于uni-app的iOS小程序开发

最新推荐文章于 2024-05-22 19:33:07 发布

tornyLin

最新推荐文章于 2024-05-22 19:33:07 发布

阅读量3.3k

点赞数 2

分类专栏： iOS 前端 Hybrid 文章标签：大前端 ios hybird

本文链接：https://blog.csdn.net/tornyLin/article/details/119518898

版权

相信越来越多小伙伴发现不少超级APP的页面都采用小程序开发了。例如支付宝客户端，首页有一个小程序中心的入口，支付宝上很多页面都是小程序了。

第一次打开的一个新功能时，会出现一个短暂的loading过程。小程序右上角有查看详情和关闭的按钮，例如中国体育小程序。

那么为什么越多越多大厂的app采用了小程序容器化开发呢？博主将在本博客简要说明小程序容器化的趋势、优点，以及如何基于uni-app在iOS端开发自己的小程序。本文提纲如下：

回到前言提到的问题——那么为什么越多越多大厂的app采用了小程序容器化开发呢？这是大前端发展的趋势。博主认为主要有以下几个原因：

Android/iOS双端一致性，一直是移动端致力解决的问题。一些热门产品，通常还有PC端、公众号、H5页面等门户产品。在博主的项目中就要求四端：Android、iOS、PC端、H5提供交易功能。同样的功能，实现了四遍，测试四遍。跨平台技术是保证多端一致性的重要手段。

动态化，不仅可以满足千人千面的需求，通过后台配置模版实现页面动态化，不需要客户端coding大量的代码；还可以减少app发版的次数和降低上架时间，日渐严格的苹果市场审核机制让开发者意识到动态化的重要性，尤其是出现BUG时需要紧急发版。对于强监管业务，app也是需要具备随时下架某个功能的能力。

low- code——低代码，这在业界已经流行好多年了。low- code可以大幅度减少代码量，通过模版代码就能快速满足功能开发或支持第三方接入的需求。同一套模版代码还可以复用到各个端，开发量减少了，测试时间也减少了，开发效率得到极大的提升。

大厂的超级app通常包罗很多功能，还是拿支付宝来说，支付宝上面的多功多得数不清。如果用纯原生的代码来实现，想想app安装包会大到什么程序？这对app推广非常不利的。所以，控制 app安装包大小，web或小程序化就变成非常重要了。

市面上能满足开发并集成自己的小程序的技术还挺多的，例如AntBuilder、FinClip、uni-app等。没有最好的技术，只有适合自己团队和业务场景的技术才是最佳的技术，所以博主不会展开讨论它们的区别，而是从自身的角度谈谈为什么选择uni-app。

uni-app技术栈还是基于vue.js + weex的，比较符合我们团队的技术储备的情况，学习成本非常低，团队能快速上手。

uni-app从2018年发布第一个版本以来，一直保持快速迭代的趋势[1] 。官方github上star数量为:32.7K[2]。uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等关键指标上拥有更强的优势[3]。

1）开发者/案例数量更多：数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数，跨端完善度高。

2）平台能力不受限：在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。

3）性能体验优秀：加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。

4）周边生态丰富：插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App。

5）学习成本低：基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

6）开发成本低： HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍。

环境安装参考官网[4]，uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目。推荐大家使用可视化界面。可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装HBuilderX IDE工具：

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。分两个版本：1）App开发版，可开箱即用；2）标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。推荐下载App开发版，博主安装的MacOS 开发版。

关注