uni-app心得体会

本学期我们学习了uni-app这门课程，作为一名uni-app的初学者，在老师的带领下我们一起走进了uni-app的书界，在学习过程中我不但学会了uni-app的开发技巧，而且还学会了许多编程的技巧和开发的经验。

关于uni-app：

uniapp是一个基于vue.js的框架，它允许我们使用vue.js开发跨平台的应用程序，包括iOS、Android、小程序、H5等。在这个项目中，我们使用了uniapp来构建整个客户端应用程序。uniapp的优点是它具有简单的API、丰富的组件库、支持TypeScript等，这使得我们能够快速地开发出高质量的应用。

入门的uni-app：

入门Uni-app需要具备一定的HTML、CSS和JavaScript的基础知识，特别是Vue.js框架的基础知识。此外，还需要了解如下内容：

1、Uni-app框架的基础知识，包括其整体结构、开发工具、基本配置等。

2、Vue.js框架的基础知识，如Vue组件、指令、生命周期等。

3、Uni-app提供的组件和插件的使用方法，能够快速开发应用。

4、掌握前后端数据交互的方式，如Ajax、axios等。

5、跨平台开发的基础知识，如小程序、H5、APP等平台的特点和开发方式。

uni-app的优势和劣势:

uniapp的优势包括跨平台、简易编写、内置组件、支持插件和性能优秀；劣势包括不支持所有原生特性、组件库限制、难以实现定制、性能挑战和依赖第三方平台。

uni-app的开发环境配置

HBuilderX是一款轻量级的前端开发IDE，由DCloud开发，支持编写uni-app、H5、小程序和Flutter等多种类型应用程序，集成了多种编码、调试功能，能够显著提高前端开发效率。该工具同时也包含了众多实用的功能，例如自动完成和代码片段等。

安装HBuilder X

进入官网下载安装HBuilder X，选择自己所需要的系统和版本即可。

学习uni-app途中遇到的问题：

问题一：

tabbar导航栏问题

在写项目的时候前期需求要求底部导航栏中间部分凸起，样式为一个蓝色的圈圈（发布按钮），而原生的uniapp不支持自定义底部导航栏，于是需要进行自定义修改。

解决方法：

在uniapp官网的插件市场中，根据别人写的插件，使用非原生的方式自行实现底部导航栏和页面跳转（此时pages.json对底部导航栏的功能将不再使用） 

实现原理： 

将一个需要跳转的页面写成一个组件，当点击导航栏的时候，去判断自定义的底部导航栏index，不同的index，使不同的组件出现或消失 

优点：

可以方便的对底部导航栏进行自定义，不受原生uniapp的约束 

 缺点：

在页面跳转的过程中，原生的跳转速度要比它快 

问题二：

video中initial-time失效
猜测应该是只有当video第一次初始化，然后加载视频时有用，而我获取视频是在onLoad中加载视频，而video组件出现是在onShow中。

onLoad中请求后台视频数据时，video可能已经在页面加载，而此时还没有设置url，导致视频会出现加载失败，此时initial-time自然无效。

当onLoad中请求了视频数据后，给video设置了url后，虽然能播放后台数据，但此时initial-time已经没有效果了。

经验证，上述猜测错误，真正原因是在playVideo方法中，将response的返回状态码设置为200，而不是206。

返回206是客户端表明自己只需要目标URL上的部分资源的时候返回的，比如video组件只需要先知道视频的长度，而不需要全部加载视频。

而200则让完全加载视频信息等。

问题三：是视频流的跨域问题

com.lw.familysystem.video.VideoService#playVideo

直接在此方法中加入允许跨域请求，

response.addHeader("Access-Contro1-A11ow-0rigin","*");

后记：其实还是会经常出现这个问题，但是不影响播放。

问题四：乱码问题

路径变成了ascii码，统一编码。

其实最好路径不要用中文，就不会有乱码。

总结采坑：

1.覆盖原生组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成cover-view，且icon无法显示，可以用cover-imaga代替。

2.小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行操作，此时可以判断app.vue中的options，如果按小程序文档中来说当options.scene === 1038时是小程序跳回来的场友歼景，但是部分手机跳回好饥冲来是options.scene为1001，只能将这2种都作为跳转判断的条件。

3.小程序跳转回来app中的onshow有时不执行，这个原因暂未找到

4.在uniapp的H5版本 ，接入 腾讯云滑动验证 ，示例的点击滑动验证元素是通过dom操作的，但是无效，可能跟uniAPP不支持dom操作有关系，采用定制接入方法一，手动调用。

总结：

总之，学习了uni-app这门课程可以让初学者掌握uniapp框架的前端开发技术，促进从HTML、CSS、JavaScript等基础知识向uniapp应用发布所需的技巧与思维方式转变。这种经验和技能将对未来的前端开发和项目管理工作都有很大的指导价值。