uniapp学习总结

uniapp的简介:

        作为一款跨平台的移动应用开发框架，使用uniapp可以开发出同时支持多个平台（如iOS、Android、H5等）的应用程序。通过自身的开发实践，我总结出了以下uniapp学习心得：

        先学习Vue.js：UniApp是基于Vue.js的，因此在学习UniApp之前，最好先对Vue.js有一定的了解。掌握Vue.js的基本语法和核心概念，这将有助于你更好地理解和应用UniApp。

        完成官方文档教程：UniApp提供了详细的官方文档和教程，其中包含大量的示例代码和解释。建议你仔细阅读官方文档，并按照教程逐步完成一些简单的示例项目。这样可以帮助你快速入门，并加深对UniApp的理解。

        多实践和练习：学习UniApp最好的方式就是不断实践和练习。尝试用UniApp开发一些小型的应用或页面，挑战自己解决实际问题。通过实践，你可以更好地理解UniApp的工作原理和开发流程，同时也能够提升自己的编码能力。

        加入社区和论坛：UniApp拥有活跃的社区和论坛，你可以在这里与其他开发者交流经验、解决问题和分享学习资源。通过参与社区讨论，你可以不断学习和获取最新的开发技巧和最佳实践。
持续学习和更新知识：移动开发的技术和平台都在不断发展和更新，所以要保持学习的状态和持续更新自己的知识。关注UniApp的最新版本和更新内容，掌握新功能和改进，以及适应最新的开发需求。

1.掌握Vue.js基础知识

作为uniapp的基础底层框架，Vue.js的掌握程度直接决定了你能够如何使用uniapp，特别是在使用Vue的生命周期函数时，更是需要深入理解Vue的整个生命周期。此外，掌握slot（插槽）、computed（计算属性）和watch（监听属性变化）等Vue的高级特性也非常重要，这些高级特性可以大大简化你的开发流程和代码量。

2.熟悉uniapp框架的使用方法

uniapp框架提供了大量的组件和API，使用这些组件和API可以快速构建一个高质量的跨平台应用。其中，uniapp提供的页面结构以及页面数据传递的方式都很好用。凭借这些特性，你可以轻松地实现诸如路由跳转、数据通讯、组件订阅等功能。

3.注意跨平台的兼容性问题

uniapp可以构建出多个平台的应用，但是这同时也带来了一些兼容性问题。在开发过程中，你需要时刻关注不同平台的差异，特别是在样式和布局方面，不同平台的兼容性问题尤为突出。另外，uniapp还提供了平台差异性API，通过这些特定平台的API可以实现一些平台特定的功能。

4.合理利用第三方插件

在uniapp中可以使用大量的第三方插件，这些插件可以很方便地引入，减少了我们的开发成本。例如，引入vant-ui可以快速构建出一套美观的界面，引入echarts可以来绘制各种图表统计数据。当然，在使用第三方插件时也需要注意兼容性问题、引用方法、使用方式等。

在进行uniapp开发时，代码的质量及其可维护性非常重要。因此，在开发之前你需要详细地设计应用架构，并将代码分成多个相互独立的组件。同时，也需要时刻关注代码的性能问题，比如减少不必要的重绘、减少DOM的操作等。对于既有的代码，也需要不断地进行优化和重构，以达到更好的开发效率和应用性能。

在使用Uniapp之前，需要具备一些基本的前端开发技能。我们建议您首先学习Vue.js，因为UniApp是基于Vue构建的一个框架。此外，Weex也是一个需要学习的重要技术之一，因为它提供了JavaScript代码和原生UI组件之间的标准化转换方式。掌握这两个技术将为您提供更广泛的知识背景，使您更容易理解和使用Uniapp开发框架。

Uniapp是一个灵活的框架，它具有许多方便的功能，如跨平台UI组件、Native API、 Vuex状态管理和生命周期等诸多关键特点。这些特点直接体现了Uniapp开发的优势和灵活性。

为什么选择学习UniApp？

        跨平台性：UniApp可以将同一套代码运行在多个平台上，极大地提高了开发效率，减少了重复开发的工作量。

        Vue.js生态：UniApp基于Vue.js，继承了Vue.js丰富的生态系统和易学易用的特点，对于已经熟悉Vue.js的开发者来说学习曲线相对较低。

        性能优势：UniApp在性能方面进行了优化，能够实现近乎原生应用的体验，同时保持较高的运行效率。

        丰富的组件库：UniApp内置了丰富的组件库，覆盖了常用的UI组件和功能组件，可以快速构建各种类型的应用。

        社区支持：UniApp拥有活跃的开发者社区和官方文档支持，开发者可以在社区中获取到及时的帮助和资源。

学习目标和内容概要

        本文的学习目标是帮助读者快速入门UniApp，掌握UniApp的基础知识和开发技巧，从而能够独立开发跨平台应用。以下是本文的内容概要：

        UniApp简介：介绍UniApp的背景和特点，以及适用场景和优势。

        环境搭建：指导读者搭建UniApp的开发环境，包括安装Node.js、HBuilderX等必要软件。

        项目创建与结构：讲解如何创建一个新的UniApp项目，并介绍项目的目录结构和文件组织。

        页面开发：介绍UniApp的页面开发方式，包括页面的创建、布局和样式调整等。

        组件使用：介绍UniApp内置的常用组件和功能组件的使用方法，以及如何自定义组件。

        API调用：讲解UniApp如何调用原生API和第三方插件，实现更丰富的功能和交互。

        调试与优化：分享UniApp的调试技巧和性能优化方法，帮助开发者提升应用的质量和用户体验。  

Uni-app的优势
1、跨平台更多，真正做到一套代码多端发行，支持原生代码混写和原生sdk集成。
2、运行体验更好。组件、api与微信小程序一致，兼容weex原生渲染。
3、通用技术栈，学习成本更低。Vue的语法，微信小程序的api，对于前端开发人员来说更容易上手。
4、开放生态，组件更丰富。支持通过npm安装第三方包；支持微信小程序自定义组件及sdk；兼容mpvue组件及项目；app端支持与原生混合编码；

介绍项目目录和文件作用

1. pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
2. manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
3. App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
4. main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
5. uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
6. unpackage：就是打包目录，在这里有各个平台的打包文件
7. pages：所有的页面存放目录
8. static：静态资源目录，例如图片等
9. components：组件存放目录

1. 资源路径

2. 使用@开头的绝对路径及相对路径，会经过base64转换规则校验
   静态资源在非h5平台，不转为base64
   h5平台，只有小于4kb的资源会被转换为base64
   js可使用@进行绝对路径引用，或者使用相对路径引用，不支持/开头的绝对路径
   css支持@或者/进行绝对路径引用，或相对路径引用

 

使用console.log在浏览器或微信开发者工具中进行调试
在生命周期函数中使用clog输出信息，在template中添加基本视图元素，在浏览器或微信开发者工具中运行，使用浏览器的开发人员工具，在不同的调试面板中进行调试：

【控制台】中查看clog输出的信息

【元素】中查看视图元素代码

【网络-fetch】中查看网络请求的相关信息

【应用程序】中查看应用相关数据，如缓存等

页面上方，可设置设备类型或自定义分辨率

外部资源的引入

在进行uni-app项目开发时，通常需要引入一些外部资源，如图片、视频、js脚本、CSS样式等等，以下讲解各种资源的引入方式。

1、本地图片或视频的引入

绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。

例如：<image src="https://example.com/images/image.jpg">

相对路径，需提供相对于当前文件的路径

例如：<image src="../../static/images/image.jpg">

或者

<image src="@/static/images/image.jpg">  但是要注意，这种写法既不是传统意义上的绝对路径，也不是严格意义上的相对路径，而是 uni-app 框架提供的路径别名方式，用来指向特定目录中的资源文件。

2、js文件的引入

例如：import "../../common/js/index.js"

或者：（以下写法需要js文件里面有export 导出关键字才需要这样引入）

写法一： import common from '@/utils/common.js'

写法二： import common from '../../utils/common.js'  具体相对路径请根据实际文件夹情况来设置

3、css文件的引入

写法一： @import "@/styles/common.css"

写法二： @import "../../styles/common.css"   具体相对路径请根据实际文件夹情况来设置

 页面相关语句

1.1 <template>
使用规范： <template> 标签用于定义页面的结构，其中包含了页面的HTML模板。
应用场景： 用于编写页面的HTML结构。
注意事项： 需要遵循Vue.js的模板语法规范，包括数据绑定、指令等。
常见错误： 忘记闭合标签或不正确使用Vue.js的语法。
1.2 <script>
使用规范： <script> 标签用于定义页面的逻辑，包括数据、方法等。
应用场景： 用于编写页面的JavaScript逻辑。
注意事项： 需要遵循Vue.js的组件编写规范，包括 data、methods、lifecycle hooks等。
常见错误： 数据命名不规范、逻辑错误等。
1.3 <style>
使用规范： <style> 标签用于定义页面的样式。
应用场景： 用于编写页面的CSS样式。
注意事项： 可以使用SCSS或LESS等预处理器，并注意样式的层级和作用域。
常见错误： 样式冲突、层级混乱等。
1.4 uni-app页面生命周期
使用规范： Uni-App页面生命周期包括 onLoad、onShow、onReady、onHide、onUnload等。
应用场景： 在不同的生命周期钩子中执行不同的操作，如数据加载、页面渲染等。
注意事项： 需要理解各个生命周期钩子的执行时机和用途。
常见错误： 在不恰当的生命周期钩子中执行操作，导致页面逻辑错误。
2. 组件相关语句
2.1 uni-app基础组件
使用规范： Uni-App提供了一系列基础组件，如 <view>、<text>、<button> 等。
应用场景： 用于构建页面的基本结构和交互元素。
注意事项： 需要了解各个基础组件的属性和事件，以及它们的用法。
常见错误： 不正确使用组件属性或事件，导致页面展示或交互异常。
2.2 uni-app自定义组件
使用规范： Uni-App支持自定义组件，使用 <custom-component> 标签引用。
应用场景： 当需要复用某一部分UI或逻辑时，可以将其封装成自定义组件。
注意事项： 需要遵循Vue.js的组件开发规范，包括 props、events等。
常见错误： 自定义组件的props或events使用不当，导致组件无法正常工作。
2.3 uni-app条件渲染和列表渲染
使用规范： Uni-App支持使用 v-if、v-else-if、v-else 进行条件渲染，以及使用 v-for 进行列表渲染。
应用场景： 根据条件显示或隐藏某些元素，以及遍历数组生成列表。
注意事项： 需要注意条件渲染和列表渲染的性能和用法，尽量避免在列表渲染中使用索引。
常见错误： 不正确使用条件渲染或列表渲染，导致页面显示异常或性能问题。
3. API相关语句
3.1 uni-app内置API
使用规范： Uni-App提供了丰富的内置API，如界面跳转、数据存储、网络请求等。
应用场景： 在页面逻辑中调用内置API完成各种功能，如跳转页面、获取设备信息等。
注意事项： 需要了解各个API的用法和参数，以及其调用时机。
常见错误： 参数传递错误、调用时机不当等。
3.2 uni-app扩展API
使用规范： Uni-App支持使用插件或原生扩展API扩展应用功能。
应用场景： 当内置API无法满足需求时，可以使用扩展API进行功能扩展。
注意事项： 需要了解插件或原生API的接入方式和使用方法，以及兼容性和性能影响。
常见错误： 插件或原生API接入错误、版本兼容性问题等。
4. 调试与优化
4.1 调试工具
使用规范： Uni-App提供了调试工具，如HBuilderX、微信开发者工具等。
应用场景： 在开发过程中使用调试工具进行代码调试和页面预览。
注意事项： 需要了解调试工具 [好像出错了，请稍后再试。]