学习uniapp的心得与体会

关于Vue.js框架下的跨平台开发教程，通过课程的学习，让我更加深入理解前端框架的特点和应用，并在跨平台开发和用户体验方面获得了更多启示。以下是我对于学习Uniapp的收获和体会：

首先，通过学习Uniapp，我对前端框架的特点和应用有了更为深入的理解。Vue.js作为Uniapp的底层框架，具有数据双向绑定和组件化开发的优点。Uniapp是一个使用Vue.js开发多平台应用的JavaScript框架，通过该框架可以实现在不同平台上的一致性体验。通过学习Uniapp，我学会了巧妙利用Vue.js的双向绑定、组件化开发等特性，精简代码，减少重复开发，大大提高了开发效率。双向绑定可以让开发者不需手动维护DOM，极大程度地提高开发效率，组件化开发则可以让我们将页面代码复用、构建项目模块化。

Uniapp是一个基于Vue.js框架的跨平台开发框架，可用于开发微信小程序、H5、Android和iOS应用等。在学习这门课程的过程中，我深受其启发，对于跨平台开发和前端技术等方面有了更深刻的理解和认识。Uniapp是一种跨平台开发框架，而Vue是一种前端MVVM框架，两者有以下区别：

1. 跨平台开发：Uniapp专注于解决跨平台开发的问题，支持编写一次代码，发布多个平台，包括微信小程序、支付宝小程序、H5、App等多个平台。Vue则主要用于开发Web前端应用。

2. 组件库：Uniapp提供了Uni-UI，是专为Uniapp设计的整体UI框架，包含了常用的组件和服务；Vue则提供了Element-UI等多个成熟的UI组件库，可以根据实际需求进行选择。

3. 预渲染和SSR：Uniapp提供了预渲染和服务端渲染（SSR）的支持，可以在页面展示前预先生成HTML文件，提高了页面的渲染速度和SEO效果。Vue也支持SSR，但是需要进行一些额外的配置和开发。

4. API和生命周期：Uniapp提供了专门针对跨平台开发的API，例如API和组件之间的差异解决方案等。它的生命周期按照不同的平台会有所不同，需要开发者根据实际情况进行适配。而Vue的生命周期完全一致，没有平台差异，API和组件也没有针对特定平台的差异解决方案。

Uniapp是为了解决跨平台开发问题而开发的框架，可以让开发者通过一次代码编写，发布到多个不同的平台。Vue则专注于开发Web前端应用，提供了成熟的UI组件库和健全的开发生态系统。     

其次，Uniapp有一套完整的开发规范，面向不同平台的开发也有相应的差异，需要针对性地进行开发。例如，在微信小程序开发中需要应用微信的API接口和规范，而在Android和iOS开发中则需要参考页面设计、导航和菜单规范等。在学习Uniapp过程中，我注意到了这些差异，学会了如何针对不同平台进行开发。

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

 

二、pages.json配置

​

Uniapp这门课程是一门非常实用和有意义的课程。以下是我对这门课程的分析：

优点：

1. 简单易懂：课程从基础开始讲起，把前端框架的核心知识点都详细讲解，使初学者也能很快上手。
2. 实战性强：课程采用实际开发案例来进行教学，并结合最新的技术趋势和最佳实践，让学生能够掌握实际开发过程中面临的挑战和解决方案。
3. 跨平台应用：Uniapp是一种跨平台应用的解决方案。通过该课程的学习，学生们能够掌握跨平台应用开发技术，实现在不同平台上的一致性体验。
4. 用户体验：课程注重用户体验的讲解，从设计的角度出发讲解如何提升用户体验，让学生们能够在实际开发中做到更好的用户体验，提高产品的竞争力。
5. 知识系统化：课程把前端框架、跨平台应用、用户体验等内容都进行系统化整理，提供完整的知识体系，让学生能够更好地理解前端技术的运用。

缺点：

Uniapp是一门非常有前景的技术课程。通过学习该课程，我们可以了解跨平台开发的最新技术和应用，同时能够提升开发者的技术水平和开发效率，适应未来跨平台应用开发的趋势`。未来对于Uniapp的发展，应该更加重视API的完善和技术更新的及时性。

1. 知识内容有一定难度，需要一定的前端基础，对于初学者来说，有时候可能会难以理解。
2. 课程需求较多，需要学生有一定的时间投入和精力投入。
3. 跨平台应用在实际开发中面临的问题较多，课程中不免存在一些问题和疑问需要深入考虑Uniapp是一门关于使用Vue.js框架下的跨平台开发教程，具有以下一些特点和优缺点：优点：
4. 跨平台开发：Uniapp支持一次开发，多端适配，解决了不同平台下应用适配和开发成本过高的问题。
5. 简单易用：Uniapp的学习曲线比较平滑，也比较容易上手，而且框架和API也相对简单易懂。
6. 开发效率高：Uniapp采用了vue.js的开发框架，易于维护和修改，同时支持vue.js的大量组件库，可以很好地提升开发效率。
7. 应用体验好：Uniapp可以使用原生组件开发跨平台应用，提高了应用的性能和稳定性。
8. 开发难度较大：在初步学习Uninapp时，需要有一定好的前端基础，否则难以理解其基础知识和开发方法。
9. 功能不足：虽然Uniapp支持多个平台开发，但是在某些特定领域仍然需要开发者自行加入一些额外的功能，比如H5场景下的某些API。
10. 课程更新不够及时：Uniapp是一门技术较新的课程，但课程更新与框架更新的速度不一致可能影响到课程内容的及时性和完整性。
    • 先进的技术：Uniapp使用了最新的技术，比如Vue.js框架和Webpack构建工具，保证了其领先技术水平和功能完善。
    • Uniapp提供了一种名为request的HTTP请求API，request是一种基于promise封装的网络请求方式，通过它可以轻松地处理http请求。request支持对多种聚合方式封装的网络请求库（如axios等），同时也支持对原生的请求方式进行封装，可以广泛应用于各种前端开发场景中。

request拥有以下特点：

• • 简单易用：request提供了一系列简单易用的API，可以方便快捷地进行http请求操作。
  • 支持多种请求方式：包括GET、POST、PUT、DELETE等多种请求方式，同时也支持文件上传和下载等操作。
  • 支持interceptor拦截器拦截：拦截器可以拦截请求和响应，并对其进行处理，例如添加通用请求头、错误处理等。
  • 支持自定义配置：request可以通过配置对象进行高度个性化配置，包括请求和响应拦截器、baseURL、请求超时时间、响应数据类型等。

 request可以大大简化开发者在Uniapp中发起http请求的流程，提高开发效率。同时，它支持多种请求方式和拦截器等高度个性化配置，满足了各种前端开发场景下的需求。

这门Uniapp课程在贴近时代潮流的基础技术选型上选择了一个非常好的方向，内容可行性和实际应用性都得到较好的保证。同时，由于前端框架持续升级和迭代，这门课程也需要时刻更新相应的知识内容，以及提供更多的案例和学生互动。

随着移动互联网的不断发展和用户需求的改变，跨平台应用的需求越来越大。Uniapp作为目前最为流行的跨平台开发框架之一，未来发展前景无疑非常广阔，以下是我对Uniapp这门课程未来发展方向的一些分析和观点：

1. 更加智能化的开发工具：随着开发工具的智能化和自动化程度的提高，开发人员能够更快速、高效地完成开发工作，并且减少出错的可能性。因此，未来Uniapp的开发工具会更加智能化和便捷化，减少开发人员的工作量，提高开发效率。

2. 核心技术的持续升级：Uniapp框架的核心技术越来越成熟，未来还将以更高的速度和更好的质量向前发展，加强核心技术体系的稳定性和可扩展性，更好地符合开发者的需求。

3. 渐进增强的特性支持：随着Uniapp的发展，其功能特性也将会更加完善和丰富。Uniapp将会持续推出更多渐进增强特性，以满足更多不同场景下的需求，更好地支持开发者做好跨平台应用的开发和应用。

4. 应用场景的不断拓展：目前Uniapp主要应用领域在微信小程序、H5站点和移动端应用上，但未来其应用场景也将不断扩展。比如，智能家居、工业互联网和智慧城市等领域，Uniapp框架也将会成为开发者的首选跨平台框架。

总之，Uniapp将成为跨平台开发的重要解决方案之一，因为其具有非常显著的优势。在未来的发展过程中，Uniapp需要根据市场的需求和开发者的反馈，不断跟进和更新技术，为开发者提供更具有实际应用价值的解决方案。

最后，通过学习Uniapp，我明白了前端技术快速迭代的特性和追求用户体验的重要性。Uniapp不断在更新和完善中，同时也推动了其他前端技术的发展和应用，这也给开发者们提供了不断学习和探索的空间。同时，对于前端开发而言，用户体验是至关重要的一环，通过Uniapp课程的学习和实践，我更加深刻地认识到了这一点。课程中详细的介绍了不同平台的开发规范、差异和要点。例如，在微信小程序中，开发者需要遵循微信小程序的开发规范，使用微信小程序提供的API进行开发，而在其他平台中，也需要关注不同平台的特性和规范，确保页面在各个平台上面的应用效果都有良好的体验。学习过Uniap，我对于跨平台开发的技术和规范有了更多的认识和了解，可以更好地应用在实际开发中。Uniapp的学习使我更加重视了用户体验和开发效率。开发项目时，更加注重了设计方案，保证页面清晰、美观、易用，从而方便用户使用产品。同时，在开发上也使用了更为智能化的功能，优化代码、提高控件复用性，提升开发效率。

Uni-UI是Uniapp官方推出的一套UI框架，它提供了一系列UI组件和服务，包括底部菜单、轮播图、表单、列表、弹窗等常用组件。Uni-UI的特点如下：

1. 功能全面：Uni-UI涵盖了日常应用开发中常用的各种UI组件，如图标、按钮、表单、提示框、加载中等等，可以有效提高开发效率和一致性。
2. 简单易用：Uni-UI的组件使用简单，开发人员无需编写繁琐的CSS，只需要简单的配置即可完成UI设计。
3. 默认样式美观：Uni-UI提供了一套默认的样式，可以快速构建出美观的应用界面。
4. 开放式设计：Uni-UI提供了开放式设计，可以根据需要对组件进行二次开发和优化调整。同时也可以根据需要按需引入组件库中的组件。

总之，Uni-UI是Uniapp 框架的官方 UI 库，提供了丰富的UI组件和服务，可以方便、高效地快速构建出美观的应用界面并提高应用的价值。

创建项目：

通过HBuilderX可视化界面创建第一个uni-app应用

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

第二步：选择

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。 

小程序运行到微信小程序当中

选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示

第二步：安装并配置完毕之后，打开HBuilderX，进入项目，选择“运行”-->"运行到小程序模拟器“-->"微信开发者工具“命令，即可在微信开发者工具中体验uni-app，如图

注意：

如果是第一次使用，需要先配置小程序IDE的相关路径，才能运行成功。如下图所示，需在输入框输入微信开发者工具的安装路径。选择“运行”-->"运行到小程序模拟器“-->"运行设置“命令，在如图位置输入微信小程序开发者工具的安装路径即可。

PS:如果想要把小程序运行到真机的微信小程序当中，则需要在微信公众平台申请小程序账号，流程为：

申请小程序账号：

① 进入微信公众平台官网，然后点击右上角的“立即注册”链接（如果已经注册了可以直接登录，登录方式可以选择账号密码登录或者微信扫码登录）。

② 点击“立即注册”链接进入注册页面，此页面提供了四种类型的账号注册，分别为：订阅号、服务号、小程序、企业微信。我们选择小程序进行注册。

④ 点击激活链接后，继续下一步的注册流程，选择注册的主体类型，并完善主体信息和管理员信息。（主体类型选择个人即可）

最后，小程序账号申请成功，就可以再次进入进入微信公众平台官网页面进行登录，登录成功之后进入小程序管理界面中的 "开发"-->"开发管理"-->"开发设置"，可以看到此页面有一个AppID(小程序ID)，记住这个id的获取方式，后期需要用到。

关于uniapp的组件周期：

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

beforeCreate：初始化之前

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

beforeMount：挂载之前

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

beforeUpdate：数据更新之前

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

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

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

条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

 组件的生命周期函数

 条件编译：

1，什么是条件编译？

2，语法

3，css条件编译

4，js条件编译

5，条件编译

对Uniapp这门课程未来的学习规划，我建议从以下几个方面来考虑：

1. 深入掌握Vue.js的基础知识：Vue.js是Uniapp的基础框架，如果对Vue.js的基础知识了解不够透彻，就无法更好地理解和应用Uniapp。因此，我们可以花更多的时间在Vue.js的基础知识上，尤其是Vue.js的组件化开发思想，这将对我们在Uniapp开发过程中有很大帮助。
2. 学会应用Uniapp开发跨平台应用：我们应该在实践中掌握Uniapp的应用开发和调试技巧，开发并实现跨平台应用，以提高自己的实践能力和开发水平。可以结合实际场景和业务进行开发，不断完善自己的项目和经验，培养更好的开发习惯。
3. 深入了解Uniapp的API和插件：Uniapp支持大量的API和插件，可以适配多种不同的场景。我们应该了解这些API和插件，学会如何使用它们以提升应用的功能和体验。
4. 关注Uniapp的更新和最佳实践：由于Uniapp是一个不断更新和发展的框架，我们应该及时关注其更新动态和最佳实践。了解Uniapp框架的最新特性和应用场景，尝试寻找并学习最佳实践，可以使我们更好地跟上Uniapp技术的发展步伐。

总之，对于Uniapp的未来学习规划，我们需要把握好学习节奏，结合实践进行学习，深入了解Uniapp的API和插件，同时关注框架的更新。只有将Uniapp技术灵活运用于实际中，才能更好地提高我们的技术能力和开发水平。

Uniapp的学习使我更加重视了用户体验和开发效率。开发项目时，更加注重了设计方案，保证页面清晰、美观、易用，从而方便用户使用产品。同时，在开发上也使用了更为智能化的功能，优化代码、提高控件复用性，提升开发效率。学习了Uniapp课程之后，我对前端框架和跨平台开发有了更加深入的了解，同时更加重视了用户体验和开发规范。学习Uniapp不仅仅是为了掌握一门技术，更是为了追求更好的开发体验和用户体验，让我们的开发变得更加高效和优秀。

​