介绍

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。目前支持的小程序有支付宝小程序、微信小程序、百度小程序、头条小程序。

官网

官网：https://www.dcloud.io/

文档：

https://uniapp.dcloud.io/README

为什么选择uni-app?

• 跨终端数量多

1、一套代码可编译到iOS、Android、H5、小程序等多个平台。

• 平台能力不受限

1、在跨端的同时，通过条件编译+平台特有的API调用，可以优雅的为某个平台写个性化的代码、调用专有能力而不影响其它平台

2、支持原生代码混写和原生SDK集成

• 性能体验优秀

1、体验更好的Hybird框架，加载新页速度更快

2、APP端支持weex原生渲染

3、小程序端性能优于其它框架

• 周边生态丰富

1、支持npm包管理，兼容微信小程序自定义组件、支持mpvue项目及组件，app端支持和原生混合编码

2、相当于微信小程序生态中丰富的第三方SDK，可直接用于跨平台

• 学习成本低

1、基于通用前端技术栈，采用vue语法和微信小程序api，无额外学习成本

• 开发成本低

1、节省人力成本

2、开发工具HBuildex是高效开发利器，效率翻倍，即使只有一个平台

功能框架

一图看懂

运行效果（代表七个终端）

动手体验

由于条件有限，我这里就直接模拟h5、微信小程序以及安卓进行演示，安卓使用的夜神模拟器。然后新建一个uni-app自带模板的项目进行测试，开发工具HBuilderX可以到官网下载。

• H5

效果呈现如下

• 微信小程序

首先你得下载微信小程序开发者工具，然后服务端口打开即可，这个就不多说了。

运行效果如下

• 安卓模拟器端

模拟器端你需要先设置你的模拟器端口，夜神模拟器设置如下（其他模拟器请自行搜索）

如果你多开，第二个是62025 后面以此类推62026，62027，就不过多介绍了，调试运行效果如下

部分案例

微信小程序可搜索到：

部分app案例：

总结

uni-app是一个优秀的跨平台跨端解决方案，已经有很多案例在使用，如果有相应需求的，可以尝试使用uni-app,这是一个不错的选择，而且是免费的。希望对你有所帮助！如果有相关问题可到评论区留言。