一、上传视频功能复用与测试

新建与pages同级文件夹utils,新建videoUtil.js文件

function uploadVideo() {var me = this;wx.chooseVideo({sourceType: ['album'],success(res) {console.log(res);var duration = res.duration;var tmpheight = res.height;var tmpwidth = res.width;var tmpVideoUrl = res.tempFilePath;var tmpCoverUrl = res.thumbTempFilePath;if (duration > 11) {wx.showToast({title: '视频长度不能超过10秒...',icon: "none",duration: 2500})} else if (duration < 1) {wx.showToast({title: '视频长度不能小于1秒...',icon: "none",duration: 2500})} else {//打开选择bgm的页面
        wx.navigateTo({url: '../chooseBgm/chooseBgm?duration=' + duration +"&tmpHeight=" + tmpheight +"&tmpWidth=" + tmpwidth +"&tmpVideoUrl=" + tmpVideoUrl +"&tmpCoverUrl=" + tmpCoverUrl,})}}})
}module.exports = {uploadVideo: uploadVideo
}

然后在其他文件引用

1、

2、

二、首页进入视频展示页

三、横向视频的展示

四、小程序的页面拦截

五、页面重定向

1、当用户未登陆时,不能上传视频,所以此时如果点击上传视频按键,应该做一层拦截。

2、问题又来了,当登陆成功后,就会跳转到个人信息页面,应该让他返回到登陆之前的页面,即视频详情页,重新上传视频。

六、拦截器配置与注册

package com.imooc;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;import com.imooc.controller.interceptor.MiniInterceptor;@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/**").addResourceLocations("classpath:/META-INF/resources/").addResourceLocations("file:D:/imooc_videos_dev/");}/** 在spring中注册*/@Beanpublic MiniInterceptor miniInterceptor() {return new MiniInterceptor();}/**拦截器注册*/@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(miniInterceptor()).addPathPatterns("/user/**");super.addInterceptors(registry);}}

七、拦截器编写

package com.imooc.controller.interceptor;import java.io.IOException;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.JsonUtils;
import com.imooc.utils.RedisOperator;public class MiniInterceptor implements HandlerInterceptor {@Autowiredpublic RedisOperator redis;public static final String USER_REDIS_SESSION = "user-redis-session";/*** 拦截请求,在controller调用之前*/@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object arg2) throws Exception {System.out.println("已进入拦截器");String userId = request.getHeader("userId");String userToken = request.getHeader("userToken");if(StringUtils.isNotBlank(userId) && StringUtils.isNoneBlank(userToken)) {String uniqueToken = redis.get(USER_REDIS_SESSION + ":" + userId);if(StringUtils.isEmpty(uniqueToken) && StringUtils.isBlank(uniqueToken)) {System.out.println("请登录...");returnErrorResponse(response, new IMoocJSONResult().errorTokenMsg("请登录..."));return false;}else {//如果业务要求限制一台手机上登陆,就要进行以下验证//当账号已经在登录状态时,uniqueToken已经被重新设置了,别的手机端登录uniqueToken和userToken就会不一样。if(!uniqueToken.equals(userToken)) {System.out.println("账号被挤出");returnErrorResponse(response, new IMoocJSONResult().errorTokenMsg("账号被挤出"));return false;}}}else {System.out.println("请登录...");returnErrorResponse(response, new IMoocJSONResult().errorTokenMsg("请登录..."));return false;}/*** 返回 false:请求被拦截,返回* 返回 true :请求OK,可以继续执行,放行*/return true;}public void returnErrorResponse(HttpServletResponse response, IMoocJSONResult result) throws IOException, UnsupportedEncodingException {OutputStream out=null;try{response.setCharacterEncoding("utf-8");response.setContentType("text/json");out = response.getOutputStream();out.write(JsonUtils.objectToJson(result).getBytes("utf-8"));out.flush();} finally{if(out!=null){out.close();}}}/*** 请求controller之后,渲染视图之前*/@Overridepublic void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)throws Exception {// TODO Auto-generated method stub
}/*** 请求controller之后,视图渲染之后*/@Overridepublic void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)throws Exception {// TODO Auto-generated method stub
}}

在往后台发送request请求时,在请求头上增加user.id和userToken两个参数。

转载于:https://www.cnblogs.com/bozzzhdz/p/9769236.html

小程序短视频项目———视频详情页面开发(二)相关推荐

  1. 微信小程序电商项目商品详情页开发实战之数据绑定与事件应用

    各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...

  2. 【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面规格选择功能实现

    文章目录 前言 一.商品详情页面规格选择功能实现 二.效果 前言 vant-weapp的Popup 弹出层api Props 参数 说明 类型 默认值 show 是否显示弹出层 boolean fal ...

  3. uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发

    摘要:由于市场的需求不断变化,原有的开发环境和生产环境已经无法满足需求,多环境开发已经是越来越多的公司要面临的问题.本文先介绍如何将HBuilderX创建的uni-app项目转换成vue-cli项目, ...

  4. 【小程序源码】视频壁纸支持多种分类短视频另外也有静态壁纸

    这是一款壁纸的微信小程序源码 其实这款小程序也可以说是短视频小程序都可以 该款小程序全采集, 大家应该知道小编之前也发过一款动态壁纸的小程序 不过那款是没有分类的,而这款不一样了,内包含了多种分类 相 ...

  5. 微信小程序导航:免费视频+精品教程+DEMO集合(长期更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  6. 微信小程序点播插件_微信小程序 wxParse插件显示视频问题

    修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...

  7. uniapp小程序腾讯云视频调用实现1V1会话和踩坑分享

    第一步:下载官方demo,附地址:https://github.com/undefineders/WXMiniByUniapp-TRTC,然后导入本地HbuilderX中,运行到小程序,如果运行成功进 ...

  8. chatgpt智能问答微信小程序+后端源码+视频搭建教程

    chatgpt智能问答微信小程序+后端源码+视频搭建教程,这是一套微信小程序,后端是thinkphp框架为接口的,后端是前后端分离用elmentUI的源码框架. 小狐狸GPT付费体验系统是一款基于Th ...

  9. 小程序如何实时音视频聊天

    1.先在项目里引入声网(https://www.agora.io/cn)的SDK 可以直接下载下来放入自己项目的库文件里面 下载下来的SDK 文件 更名为mini-app-sdk-production ...

  10. 微信小程序实现上传视频功能(后端代码是java)

    微信小程序实现上传视频功能(后端代码是java) 1.前端 ​ wxml文件 <image bindtap="uploadVideo" length="3" ...

最新文章

  1. 讨论:对于神经网络,不需要弄明白原理,只需要应用,是这样吗?
  2. python编写单实例总结
  3. Nginx反向代理以及负载均衡配置
  4. Web 趋势榜:上周最有意思、又实用的 10 大 Web 项目 - 210730
  5. 大一java期末考笔试_大学java期末考试试题和答案
  6. NET Core中使用Irony实现自己的查询语言语法解析器
  7. CVE-2017-7529Nginx越界读取缓存漏洞POC
  8. 与计算化学相关的计算机程序,计算机引发化学工程革命
  9. 纠结的rename命令
  10. matlab 函数整理(资料备份儿)
  11. 管理感悟:独当一面,很难
  12. IoC容器4——依赖
  13. 怎么测试dpi测试软件,如何测试鼠标DPI?
  14. 把html转换成word,怎么把html转换成word
  15. 什么,缺“Java项目经验”找不到工作?锋哥送你80个“项目经验”
  16. 深度学习:词向量和句向量(Embedding)
  17. csgo查询服务器延迟,《csgo》网络延迟怎么查看 网络延迟ping查看方法分享
  18. Django——09.spaceless, autescape, verbatim标签
  19. filecoin-存储证明子系统(rust-fil-proofs)[翻译]
  20. 视频倍速 - 在线调倍速的加速器APP工具

热门文章

  1. php new mpdf,php – PDF不合并大于使用mPDF的PDF-1.5版本
  2. 电脑连接电视方法详解_笔记本连接电视有哪些设置方法
  3. java filter的类_Java FilterOutputStream类
  4. tornado celery mysql_tornado中使用celery实现异步MySQL操作
  5. 是不是每一个型号的单片机都要学一遍
  6. 手把手教你Windows环境下配置Git环境
  7. [渝粤教育] 西南科技大学 土木工程材料 在线考试复习资料
  8. 【渝粤教育】电大中专药剂学基础知识作业 题库
  9. 大型项目编译注意事项
  10. day13-面向对象