首页 SEO优化正文

uniapp开发实战（uniapp 成功案例）

SEO优化 2023-01-21T10:10:09 834

本篇文章给大家谈谈uniapp开发实战，以及uniapp 成功案例对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。本文目录一览： 1、uni-app开发一个小视频应用(二)

本篇文章给大家谈谈uniapp开发实战，以及uniapp 成功案例对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、uni-app开发一个小视频应用(二)
2、uni-app入门-实战教程-十九-条件渲染
3、uniapp上传图片至服务器，获得在线图片链接预览（实战）
4、uniapp框架开发技巧
5、uni-app从入门到精通

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即可自动播放。

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

原文地址：

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

v-if 满足条件 view才显示

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

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

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

uniapp上传图片至服务器，获得在线图片链接预览（实战）

功能需求：

前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。

思路如下：

前端选择本地的png、jpg、等格式的图片，将图片以二进制的形式传到后端服务器，后端对二进制图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

首先

我们看一下uniapp的官方文档：

大概是这样的

先写一个模拟的demo

1：首先我是是用了colorUI的框架，在项目里面引入

在page底下的vue文件引入

这样一来，就不需要写什么样式了，直接使用写好的就行了。

效果是这样的

每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。

在 chooseImage 选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。

若是请求成功

则返回一个图片链接

添加接口之后的，demo如下：

uniapp开发实战（uniapp 成功案例）

uniapp框架开发技巧

//以下摘自官方文档

/*Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。*/

//意思就是vue在更新视图层得数据时是异步得，可是有时候我们在代码中想要等待数据完全渲染上去dom节点之后再进行获取节点信息操作。比如使用selectorQuery.select(selector) 等相关api时，如果直接使用有时候会获取不到正确的数据，此时可以通过this.$nextTick(callback)的方式在回调函数里面进行操作dom节点