介绍
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。目前支持的小程序有支付宝小程序、微信小程序、百度小程序、头条小程序。
![e0b8f3141139b1b8a961dc37d9d37b29.png](https://i-blog.csdnimg.cn/blog_migrate/8e585149d9faf29212ced4d727fb7d6d.jpeg)
官网
官网: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是高效开发利器,效率翻倍,即使只有一个平台
功能框架
一图看懂
![9763748f64b841df470dd3dca09fc9c3.png](https://i-blog.csdnimg.cn/blog_migrate/8b9e4125e0c94a1cfec85f68203edae8.jpeg)
运行效果(代表七个终端)
![f7deb5ceb314cf392666a30a8dfbc2e0.png](https://i-blog.csdnimg.cn/blog_migrate/21bc422871a82665ce11b92914f3fcac.jpeg)
动手体验
由于条件有限,我这里就直接模拟h5、微信小程序以及安卓进行演示,安卓使用的夜神模拟器。然后新建一个uni-app自带模板的项目进行测试,开发工具HBuilderX可以到官网下载。
- H5
![4eb5b75c824c83d72d267edcacefc89a.png](https://i-blog.csdnimg.cn/blog_migrate/7a27c0aefee9e340c0f1b8d80465aa9d.jpeg)
效果呈现如下
![56ad6177570d1672946e8a33760a70aa.png](https://i-blog.csdnimg.cn/blog_migrate/e0601eca4472efca554f04cbc93144c0.jpeg)
- 微信小程序
首先你得下载微信小程序开发者工具,然后服务端口打开即可,这个就不多说了。
![81c39aecd0d1b09785e4f55888460f47.png](https://i-blog.csdnimg.cn/blog_migrate/c3fbcf9a2040fd8bf62d94d59b1749e2.jpeg)
![21c81ac6429aa5d703a133510b9e283d.png](https://i-blog.csdnimg.cn/blog_migrate/1721ea226abf6bcf865a8e06924f271d.jpeg)
运行效果如下
![deaf280e2e6154d76c83ccf857014a88.png](https://i-blog.csdnimg.cn/blog_migrate/d564555aa0bfe572e9802c50297cf1a0.jpeg)
- 安卓模拟器端
模拟器端你需要先设置你的模拟器端口,夜神模拟器设置如下(其他模拟器请自行搜索)
![ca887911dae1ee909eba3ade277cfdf5.png](https://i-blog.csdnimg.cn/blog_migrate/5162daf6f1582b594061815d554c4925.jpeg)
![f3fd022fc3455badda5b709da817285e.png](https://i-blog.csdnimg.cn/blog_migrate/fd4af93b38c5ff091a4b1d15264a5459.jpeg)
如果你多开,第二个是62025 后面以此类推62026,62027,就不过多介绍了,调试运行效果如下
![1973f1083a612bad16e8c58124a8c850.png](https://i-blog.csdnimg.cn/blog_migrate/21084fe8f823951770dd5b441317c48f.jpeg)
![05b2e71bb7ff1236ad52d3e591b0b09e.png](https://i-blog.csdnimg.cn/blog_migrate/e07ef94330a87b3d7145e0e05f809c24.jpeg)
部分案例
微信小程序可搜索到:
![2cd5c91e2135d5163959bda445f050c2.png](https://i-blog.csdnimg.cn/blog_migrate/4ea5fe5a47b72fad2a8f248046315c7f.jpeg)
部分app案例:
![aff72e26d4a458aeb0244f0b2c3e02cf.png](https://i-blog.csdnimg.cn/blog_migrate/201bda9e91e2c8b50cd15231b7d29b3f.jpeg)
总结
uni-app是一个优秀的跨平台跨端解决方案,已经有很多案例在使用,如果有相应需求的,可以尝试使用uni-app,这是一个不错的选择,而且是免费的。希望对你有所帮助!如果有相关问题可到评论区留言。