uniapp前端开发学习心得

Yolo1027

已于 2023-06-25 00:19:03 修改

阅读量344

点赞数 1

文章标签： uni-app 前端 javascript

于 2023-06-25 00:17:10 首次发布

本文链接：https://blog.csdn.net/Yolo1027/article/details/131368375

版权

为何学习前端开发

1.良好的就业前景

•市场上对于既有理论又懂实践的大前端人员的庞大需求，供应远远赶不上需求，而且在可以预见的范围内这个情况不会有任何变化。

2.不断上涨的工资

3.无处不在的互联网

4.不断扩张的领域

网页已经不再仅仅是一个网页了。公司在做网站时，他们会同时考虑移动设备上的技术和社交媒体交互。
开发团队在设计和构建网站时，需要考虑智能手机、平板电脑，互联网电视甚至可穿戴设备的使用情况——这些都扩大了前端开发人员的业务范围和受众的覆盖面。

5.非常灵活的功能

新工具的出现使得前端开发者更轻松地应用自己的技术。

学习web前端开发该怎么学，按照什么顺序学习，这是很多新手朋友会遇到的问题。想做好一件事，必须要花费一些功夫，然后是多学、多思、多练、多交流、多总结，发现自己的问题，然后一定要克服，在状态不好的情况下，往往要及时调整。新手学习前端的话，一定要想想为什么要学习它，是出于一种什么心态，然后定位好自己，多向大牛请教，多教一些没有自己水平高的人，那样往往能让自己成长得更快。初学可以看一些入门视频教程，查阅一些图文参考手册，之后可以买一些书，做一些小项目，懂得创新。

下面是前端学习的路线，大家可以参考：

uniapp发展历史

uni，读 you ni，译音为“优你”，是统一的意思。很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。DCloud于2012年开始研发小程序技术，优化 webview 的功能和性能，并加入W3C和 HTML 5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。

2015年, DCloud 正式商用了自己的小程序,产品名为“流应用”,它不是BS模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML 5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。360手机助手率先接入，在其3.4版本实现应用的秒开运行。

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

随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。

在2015年9月，DCloud推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。

微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是制定了自己的标准。

DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。

部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。

技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件好的事情。

造成混乱的局面非 DCloud所愿，于是决定开发一个免费开源的框架。

既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台的差异。

选择uni-app的原因：

1、开发者/案例数量更多

2、跨平台能力及扩展灵活性更强

3、性能体验优秀

4、周边生态丰富

5、学习成本低

6、开发成本低

作为一名软件产品设计师，我积累了多年的经验，参与了各种规模和类型的项目。在这个过程中，我不断学习、探索和实践，积累了一些宝贵的心得体会。在本文中，我将分享我在软件产品设计方面的一些心得体会，希望能对其他设计师和开发者有所启发。

在uniapp中

pages.json文件主要用于对uni-app进行全局配置，可以在配置项设置默认页面的窗口、设置页面路径及窗口、设置组件自动引入规则、设置底部tab及分包加载配置等。

manifest.json文件可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等。

uni-app的生命周期是以小程序的生命周期为基础实现的，分为应用的生命周期、页面生命周期和组件的生命周期，其中组件生命周期就是Vue的生命周期。

uni-app组件的生命周期其实就是相当于vue的生命周期

beforeCreate：初始化之前

created：初始化完成（不能获取dom，一般用于获取接口数据）

beforeMount：挂载之前

mounted：挂载完成之后（可以获取dom）

beforeUpdate：数据更新之前

updated：数据更新之后。应用场景：可以做数据更新后获取焦点，也可以获取 dom的动态属性，更改数据时对dom进行操作。

beforeDestroy：解除绑定之前（页面离开）

destroyed：解除绑定之后（页面离开）

uni-app页面路由由框架统一管理，开发者需要在pages.json文件中配置每个页面路由的路径。uni-app有两种页面路由的跳转方式，即使用navigator组件跳转和API跳转。

有时候，在进行页面跳转的时候需要传递一些参数到另一个页面当中，那么uni-app是如何在页面跳转的同时传递参数、并且在下一个页面是如何接收参数呢？

传递参数：

例如：在起始页面跳转到pages/news/index.vue页面并传递参数

uni.navigateTo({
url:'pages/news/index?id=1&title=新闻动态'

})

需要注意的是，url是有长度限制的，太长的字符串会传递失败，可以使用encodeURIComponent解决，代码示例如下：

uni.navigateTo({
url:"/pages/news/index?id=1&title="+encodeURIComponent('新闻动态')+""

})

接收参数：

例如：在pages/news/index.vue页面接受参数

onLoad(opts){//opts为object类型，会序列化上个页面传递的参数。

console.log(opts.id); //打印出上个页面传递的参数，值为1。

console.log(opts.title); //打印出上个页面传递的参数，值为新闻动态。

}

如果传递参数使用到了encodeURIComponent，则按照以下方法接收参数：

//在pages/news/index.vue页面接受参数

onLoad(opts){//opts为object类型，会序列化上个页面传递的参数。

console.log(decodeURIComponent(opts.title)); //打印出上个页面传递的参数，值为新闻动态。

}

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS。

一、深入了解用户需求
软件产品的设计应该从用户的角度出发，关注用户的需求和期望。通过深入了解目标用户群体的特点、行为和需求，我们可以更准确地把握用户的真实需求，并将其融入到产品设计中。用户研究和用户测试是必不可少的步骤，通过观察用户的行为、进行用户访谈和收集用户反馈，我们可以获取宝贵的用户洞察，为产品设计提供有力支持。
二、注重用户体验
用户体验是软件产品设计的核心。一个好的用户体验能够提高用户满意度、提升产品价值，并有助于用户的长期使用和推荐。在设计过程中，我们要注重界面的简洁、直观和易用性，保持一致的设计风格和布局。同时，注重交互设计，使用户能够顺利完成任务，提供及时的反馈和引导，减少用户的认知负担。通过不断优化和测试，我们可以不断改进用户体验，提高产品的竞争力。
三、关注可用性和易学性
软件产品的可用性和易学性对于用户的使用体验至关重要。我们要确保产品的功能和操作逻辑符合用户的认知习惯，避免设计过于复杂和混乱。通过合理的信息架构和导航设计，使用户能够快速找到所需功能和信息。此外，我们还应提供清晰的指导和帮助，以便用户能够迅速上手和掌握产品的使用方法。
四、注重可扩展性和灵活性
在设计软件产品时，我们要考虑产品的可扩展性和灵活性。产品的设计应该具备良好的模块化和可定制化特性，以便能够适应不同用户和不同场景的需求。同时，我们要注重产品的可维护性和可更新性，及时修复bug、优化功能，并随着市场和技术的变化不断推出新的版本和功能。
五、持续学习和创新
软件产品设计是一个不断学习和创新的过程。我们要紧跟技术和设计的最新发展，关注行业的趋势和用户的变化，不断提升自己的技能和知识储备。同时，我们要勇于尝试新的设计理念和方法，不断探索和创新。通过持续学习和创新，我们可以不断提升自己的设计能力，为用户创造更好的产品体验。
总结起来，软件产品设计是一个综合性的工作，需要综合考虑用户需求、用户体验、可用性、可扩展性等方面。通过深入了解用户需求、关注用户体验、注重可用性和易学性、注重可扩展性和灵活性，持续学习和创新，我们可以设计出更优秀的软件产品，为用户提供更好的体验和价值。我将继续不断学习和实践，不断提升自己的设计能力，为用户创造更好的软件产品。

uniapp体验如何？假设你们都体验过了，现在我来说一下个人的体验：
1、APP端，我觉得uniapp开发APP端是最爽的，整体体验比之前的mui高了很多，跟小程序的体验类似，但是比小程序流畅，在iOS端，体验上跟原生很接近，在安卓中高端手机上也跟原生很接近，低端机就卡顿一些，不过应该所有APP都卡顿，总体来说，体验非常不错的。在功能上，uniapp也能应付大部分应用场景，uniapp对于支付、分享、第三方登录、推送等功能都做了封装，使用起来非常方便，另外还支持html5plus原生接口调用，还可以使用weex的nvue集成到uniapp，对大部分APP来说还是够用的，但是在界面方面，uniapp就有些不足了，缺少APP的灵活性，动画使用不方便，css动画使用多了会卡顿，所以整体APP的界面只能中规中矩不能太秀啊。
2、小程序端，小程序端基本没话说了，跟普通开发小程序一样，不过使用uniapp开发小程序比用小程序官方工具开发的舒服，因为使用的是vue语法，开发快速，功能跟官方小程序一样。
3、h5端，uniapp单独来开发h5也是很快速的，因为完全不用担心适配问题，默认的upx已经帮你搞定了，最终的体验跟其他一样。
总体来说，如果你要单独来开发一端的话，使用uniapp非常舒服，如果你要开发跨平台应用，那你需要多阅读官方文档几遍，另外要熟悉每一端的规则，这样可以避免很多坑。uniapp在体验上还是没得说的，在功能上应该还是缺少一些灵活性。但是uniapp几乎不需要前端开发者懂原生开发知识，社区里面的轮子也非常多，拿来即用，目前对我来说，uniapp开发很不错，而且打算一直使用下去。