uni-app心得体会

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app是国人在vue的基础上的封装，封装的组件和微信小程序的几乎一模一样，它的官方文档也是相当完善。

安装很简单官网下载编辑器HBuilderX开发版，解压可用，创建项目选择uni-app，选择模板并预览一气呵成，模板基本就是一个完整的项目。

环境搭建

安装编辑器HbuilderX 下载地址:【Hbuilder官方版下载】Hbuilder 9.1.29-ZOL软件下载【Hbuilder官方版下载】Hbuilder 9.1.29-ZOL软件下载

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

 

下载App开发版，可开箱即用

安装微信开发者工具 下载地址:微信小程序

学习Uni-app用到的技术

uni-app官网：navigator | uni-app官网 (dcloud.net.cn)

Apipost：Apipost-基于协作，不止于API文档、调试、Mock、自动化测试

MySQL：MySQL 函数 | 菜鸟教程 (runoob.com)

JavaScript：JavaScript 教程 | 菜鸟教程 (runoob.com)

Vue.js:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

HTML:HTML 教程 | 菜鸟教程 (runoob.com)

CSS:CSS 教程 | 菜鸟教程 (runoob.com)

利用HbuilderX初始化项目

点击HbuilderX菜单栏文件>项目>新建

选择uni-app,填写项目名称，项目创建的目录

收获和技术分享

组件化开发：在uni-app中，我们使用Vue.js组件化的方式构建应用，将应用拆分为多个组件进行开发和维护。这样可以提高代码的可复用性和可维护性。组件化开发不仅可以帮助我们更好地管理代码，还可以更好地进行协作开发。uni-app官网中还提供非常多的组件给我们开发者使用，大大提高了开发效率。

前端路由的实现：前端路由可以使用户在不刷新页面的情况下进行不同的页面之间的转换，提高用户体验。在该项目中，我们使用uni-app的页面路由功能来实现前端路由。在Vue框架中，我们通过hash和history两种模式实现前端路由。

封装axios.js来实现数据请求：在项目中，我们通过axios.js来封装数据请求，既可以统一管理数据请求，也可以提高数据请求的可维护性。通过axios.js的拦截器，我们还可以在数据请求前加入统一的处理，如token验证、请求拦截等。

通过Vuex来管理状态：Vuex是Vue.js的状态管理工具，通过Vuex，我们可以将应用的状态集中管理，可以让状态变化可追溯、可调试、可预测。在该项目中，我们使用Vuex来管理状态，并且将应用的数据缓存在本地存储中，方便数据的重新获取和渲染。

通过以上的技术分享，我们可以发现，前端开发涉及到的技术和工具非常丰富，对于开发者来说，在实践中深入掌握这些技术和工具的使用方法，才能打造出优秀的应用，提高代码质量和开发效率。

在实际项目开发中，我们将Uni-app这款跨平台框架应用到了小程序和App的开发中，实践经验得到了大量积累。我们从需求分析、技术选型、UI设计、代码编写和测试等多个方面入手，不断地优化和改进项目的效率和品质。

优缺点分析

优点：

1，一套代码，多端运行。

2，代码实现简单，开发快速。

3，uniapp开发体验对前端人员十分友好,和微信小程序的开发方式类似。

4，突破了系统对H5调用原生功能的限制，比如使用uniapp结合HTML5plus能调用系统相册图片选择和拍照等。

缺点：

1，兼容性问题，在Android平台上表现较微信小程序和iOS上差。

2，文件命名等受限。

3，官方反馈信息不及时。

学习感悟

uniapp在编程的时候选择的语法是vue，所以在学习uniapp框架前还需学习一些vue的基础语法，如虚拟dom、数据绑定、组件、vuex。而如果想要理解这些语法的原理，就需要学习一下js这门语言。在学习js这门语言的过程中，我感觉js有很多地方和java有共同之处。同时，为了能写出更精美的页面，我还学习了html+css，完成了对前端基础的粗略学习。未来的项目中的所有页面和接口都将参考vue语法来编写，也期待能通过完成这次项目完成对前端的基础学习。

总结和展望

经过这次Uni-app课程的学习，我对Uni-app有了更深入、全面的认识，通过实际开发以及与同行的探讨，也不断地学习和进步。同时，Uni-app的发展也是非常迅速的，未来它会有更加广泛的应用前景。在未来的学习和实践中，我相信我可以更加深入地了解Uni-app，并将其应用到更加广泛、高效的项目中。