uniapp开发视频教程（uniapp 教程）

今天给各位分享uniapp开发视频教程的知识，其中也会对uniapp 教程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、uni-app 入门到精通 （二）
• 2、奔牛课堂的thinkphp开发商家入驻商城视频教程怎么样
• 3、uni-app开发一个小视频应用(二)
• 4、谁有百度云uniapp视频教程免费链接求分享，谢谢
• 5、uni-app入门-实战教程-十九-条件渲染
• 6、uniapp自学笔记（三）动态获取数据

uni-app 入门到精通 （二）

18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。

这一篇文章主要分享一下内容

uniapp 模板项目有两种初始化方式

由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化项目， HBuilderX 大家可以参照官方文档

这种方式是可以通过 vue 脚手架命令指定模板，这个是 dcloudio 的官方提供模板

我们选择默认模板即可，

成功后我们执行

打开浏览器地址，直接运行即可。

一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，

当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。

通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。

rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准， 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：

uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

2.uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

3.uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide

4.uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

5.uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

5.uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

以上路由API 已经满足我们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置

而进行具体路由跳转我们需要如下，需要多加一个 /

需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

uniapp 提供网络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值

不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。

奔牛课堂的thinkphp开发商家入驻商城视频教程怎么样

说说经历：之前看过他的课程，讲的很一般，后面因为想看看一个swoole开发b2b多商户平台就买了个永久会员，时间应该有2年了，之所以买这个课程是因为想看看swoole的大型项目应用，毕竟要上班没时间自己采坑，一个问题自己折腾两天还不如看视频几分钟解决。

结果呢？

加入交流群就动不动就禁言

几乎没人说过话，每次禁言都是什么所谓的总要通知，会员涨价了，现实活动，过了半个月解封了没半天又故技重施，说白了交流群屁用没有，现在想来就是怕群里的韭菜发言挡了他的新韭菜。

我们买的会员是他自己开的视频课程网站，买了后是什么状况呢？

今天开swoole多用户商城，过几天又开什么实战uniapp,然后实战什么简书之类的，反正就是新课不断，什么类型都有，但是就是不更新

目前课程的更新状态是：、

1：已经更新完的，是在百度传课或网页云课堂之前更新过的

2：还有一种技术难度低的，什么实战开发拼多多，实战开发简书之类的，你以为是什么实战课，其实就是带你写个页面就没了，比如uniapp实战简书，就写了页面打包就完了，这种有用？laravel入门就是照着文档演示一下，稍微有点点点难度的屁都没有用，你还不如自己看文档。

3：技术难度一般或高的，几乎没有更新完，不说更新完，几乎还没讲到正题，比如swoole开发把b2b多商户系统，更新了几个月更新了十几节（一节大概10来分钟）就关闭课程，然后重新开了个thinkphp6.1+swoole实战b2b多商户系统，我觉得就是他搞不定swoole才转的tp，而且这货老爱跳票，就这个b2b多商户的课程两年的，目前也就连后台系统搭建都没做完，和标题靠边的一点技术都没讲到。如此课程他那里比比皆是

4:还有很多课程，点进去基本就是一堆目录，后面是尽情期待，课程根本没有，毛都没有。

这货说白了就是技术不咋的，又想割韭菜，然后新建一堆课程又完不成，完不成继续新建课程，哪怕永久会员群也是几个月不发言，几个月不更新也没什么说法，最后一次

在永久会员群里几个月没更新，发了个公告，现在快半年了，毛都没有更，

动不动装死，装不在线，其实一直在线，一年365天大概360天在装死，从来没见过帮谁回答过疑问。

大概上星期的他的网站服务器到期无法访问，至今没有说法，我门说去举报诈骗，去查备案，干脆他直接把大牛课堂（study.tongpankt.com）和奔牛课堂（）的都备案都注销了

，现在又换了个马甲在腾讯课堂和51CTO割韭菜

买的的课是因为当时没有成体系的swoole实战课，或某些我困惑的问题没找到解决，想着swoole开发个b2b多商户系统基本上什么都可以学到了，结果呢？买了后发现课程不更新，更新的没水平，什么异常处理，系统架构，权限认证，流程思路，前后端的方法，组件封装，性能优化等等等等一个都没涉及过，他前后端开发的很多东西我都看不下去，敷衍的很，在他的网站几乎就没看过课程，当初想省时间学习的东西全他妈是我上班自己摸索出来的，现在我都会了课程还是没更，课程看不看是我的事，是我瞎才买这垃圾会员，是我的错，但是我们几百人花了钱就算不看你也得把网站维护着。

希望各位擦亮眼睛，要买课程上整个网站或哔哩哔哩，别找这种野鸡讲师。

uni-app开发一个小视频应用(二)

前情回顾uni-app开发一个小视频应用(一)上篇文章，我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件，传入视频列表渲染后已经可以上下滑动进行视频切换和播放，接下来我们将完成首页的剩余部分，左侧信息栏组件、右侧图标栏组件，以及完善视频切换动画、播放控制等功能。

左侧的信息栏组件，主要分三块: 作者名、视频标题名、音乐名。这个左侧信息栏信息是和当前播放视频相关联的，所以应该在循环视频列表的时候，将左侧信息栏组件一起渲染出来，所以左侧信息栏组件应该加到swiper-item中。

// components/list-left.vue

// components/video-list.vue

右侧图标栏组件，主要分为: 头像图标(头像设置border-radius)、收藏图标(iconfont图标)、评论图标(iconfont图标)、分享图标(iconfont图标)、音乐图标(图片设置border-radius)，右侧图标栏组件设置一个固定宽度，然后让各种图标依次排列即可，如:

// components/list-right.vue

当点击头像下部的加号图标，可以对该用户进行关注，即隐藏加号图标，还有就是收藏爱心图标颜色切换，当点击收藏爱心图标，爱心图标变成红色，再次点击收藏爱心图标，爱心图标变回白色，这里先只处理颜色的变化，具体后台交互暂不处理。

// 在头像图标下方通过绝对定位添加一个加号图标，并定位到头像底部

所谓滑动播放，即向上滑动的时候，暂停当前播放视频并且播放下一个视频，向下滑动的时候，暂停当前播放视频，播放上一个视频，而这最关键的就是如何判断是向上滑动还是向下滑动。swiper组件给我们提供了一个change事件，我们可以监听这个change事件，拿到滑动完成后滑动到了第几页，即swiper-item的序号(从0开始)，然后与滑动前的当前page相比较，就可以知道是向上滑还是向下滑了。

判断好了是上滑还是下滑后，我们还需要对上滑和下滑作出正确的处理，我们需要能够拿到每个视频播放组件，然后调用视频播放组件上的相关方法对播放进行控制，这就是涉及到了父组件如何调用子组件上方法，父组件要想调用子组件上的方法，关键是父组件要能够拿到子组件对象，我们可以通过ref实现，因为每一个视频播放组件是video-list视频列表组件的一个子组件，所以我们可以在video-list视频列表组件中给每一个video-player视频播放组件添加上一个ref="player"，即可拿到对应的视频播放组件了。

// components/video-list.vue

要想实现单击视频播放组件，视频可以进行播放和暂停切换，那么我们需要给视频播放组件添加一个isPlay属性表示视频是否处于播放中，如果是播放中，那么点击就暂停，如果不是播放中，那么点击就播放，同时，由于uni-app不支持vue的dblclick事件的，所以我们还需要对单击和双击操作进行判断，我们需要定义一个变量用于记录用户点击次数，如果300ms内用户点击次数大于等于2，那么就是双击，否则就是单击，如:

双击的时候会向video-list父组件(视频列表组件)发送一个follow事件，video-list组件监听到follow事件后再通知list-right组件调用其方法让其爱心图标变红即可，如:

之前我们的视频播放组件接收了一个index属性，即当前视频对应的索引号，我们可以通过这个索引号判断当前视频是否是第一个，然后将其video组件的autoPlay设置为true即可自动播放。

至此，首页已经完成，效果图如下:

原文地址：

谁有百度云uniapp视频教程免费链接求分享，谢谢

《uniapp视频教程》百度网盘资源免费下载

链接:

提取码:ni74

uniapp视频教程|uni-app手册及资料.txt|9、表单及表单组件.mp4|8、基础组件.mp4|7、事件及事件绑定.mp4|6、class 及 style.mp4|5、模板语法及数据绑定.mp4|4、生命周期.mp4|3、配置相关.mp4|30、自定义组件封装及使用，组件间的消息传递.mp4|2、样式与布局.mp4|29、在 uni-app 中使用 vue （三）.mp4|28、在 uni-app 中使用 vue （二）.mp4|27、在 uni-app 中使用 vue (一).mp4|26、补充课程 - 新闻列表、详情小实战.mp4  

uni-app入门-实战教程-十九-条件渲染

v-if 满足条件 view才显示

v-show 同 v-if ，相当于 v-if 增加了 隐藏样式

{{age 30 ? '中年人' : '青少年' }} 三元运算符，如果满足条件就是第一个，不满足条件等于二个引号内容

v-if v-else-if else 判断性别使用

uniapp自学笔记（三）动态获取数据

ok，我们目前已经完成了首页，如果我们只是为了制作一个文章系统的话，首页+列表页+详情页已经足够满足我们的使用了。

所以我们开始在pages中创建这俩页面。

现在pages.json路由中增加这俩：

前面我们首页中的icon列表是一个静态页面页，我们需要连接才能跳转到列表页面。

这里我们需要用到uniapp内置的跳转方法：

这里我们先把页面之间的跳转关系完成，完成后，我们会在页面之间传递参数，再通过ajax完成动态数据交互！

如法炮制！我们把详情页面也完成：

这里涉及到了一个我们非常熟悉的知识：生命周期，我们需要在生命周期onload的时候，把数据注入到页面中。

所谓生命周期就是onload，onready之类的那一套东西，这里如果细说的话会非常的复杂。因为onshow，onhide在不同的.vue中，这里指APP.vue和子页面.vue中又稍微有所不同。

这里我整理了一个列表，感兴趣的同学可以研究研究。不愿意研究，其实你光掌握一个onload也足够你应对大多数情况了。

学会使用生命周期以后，我们接下来要进入ajax通过端口查询数据，然后渲染到页面上。

uniapp提供一个uni.request方法，帮助我们获取ajax的数据，请看例子：

uniapp的ajax使用方法就是小程序和vue的结合。这里需要注意的是，uniapp在页面跳转的时候，可以发送一个参数，在接收的页面中通过options.xx来接收。注意看上面的例子，是在onload生命周期中接收的，options就是onload的一个参数。

跳转的时候，可以发现id就是拼接进去的。

这里可能会遇到一个问题，那就是你从本地请求的端口可能会产生跨域的问题。

这里推荐两种解决方法：第一个，使用xhbuilder内置的浏览器

第二个，如果你用的是chrome浏览器，可以安装跨域 插件 来解决这个问题。

这个插件的名字是：Allow-Control-Allow-Origin。如果你打不开chrome插件市场的话，你可能要想办法翻墙一下。

这里还有一个问题，那就是，我们页面顶部的title，是在路由pages.json中设置的，但是我们的数据是动态的。

当我们点击了某一项的时候，需要动态的修改一下标题，这个时候需要使用uniapp提供的setNavigationBarTitle方法。

上面遗漏了一个知识，就是当我们通过ajax获取到了内容以后，如果这个内容是字符串还好，但是它有可能是一个富文本，就是我们常说的内容详情。

如果内容是一段html的话，我们就不能直接放到项目中，那样是无法解析出来的。这个时候我们需要使用rich-text标签。

这样就可以正确解析出内容了。

到目前为止，我们已经完成了首页， 列表页和详情页。项目的基础功能已经搭建完毕了，接下来，我们将会进入其他强大功能的学习。

因为最近有一些忙，uniapp的教程可能会暂停一段时间，这一段时期我会给大家推荐一些轻松的教程或者龙哥故事汇的一些文章，希望大家见谅哈。

uniapp开发视频教程的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uniapp 教程、uniapp开发视频教程的信息别忘了在本站进行查找喔。