专栏首页编程坑太多「小程序JAVA实战」小程序的横向视频和页面拦截(59)

「小程序JAVA实战」小程序的横向视频和页面拦截(59)

在手机拍摄视频的时候,存在2个情况,手机横这和手机竖着。如果是横着的情况下,我们竖着拿手机观看模式,包括抖音,快手,他们的解决方案都是上下出现黑色变宽,对视频进行等比例压缩。老铁我也参考这个来完成。另外如果用户为登录的情况下,想进入我的需要登录才可以,这个也需要页面通过缓存中获取用户信息来进行控制。源码:https://github.com/limingios/wxProgram.git 中No.15

详情页面横竖屏的控制

如果视频的宽度大于高度,video的填充模式就修改为正常的情况。不进行填充

var videoUtils = require('../../utils/videoUtils.js')
const app = getApp()
Page({

  data: {
    cover:'cover',
    videoContext:"",
    videoInfo:{},
    videId:'',
    src:''
  },


  showSearch:function(){
    wx.navigateTo({
      url: '../videoSearch/videoSearch',
    })
  },
  onLoad:function(params){
    var me = this;
    me.videoContext = wx.createVideoContext('myVideo', me);
    var videoInfo = JSON.parse(params.videoInfo);
    var videoWidth = videoInfo.videoWidth;
    var videoHeight = videoInfo.videoHeight;
    var cover = 'cover';
    if (videoWidth > videoHeight){
      cover = '';
    }
    me.setData({
      videId: videoInfo.id,
      src: app.serverUrl + videoInfo.videoPath,
      videoInfo: videoInfo,
      cover: cover
    })


  },
  showIndex:function(){
    wx.redirectTo({
      url: '../index/index',
    })
  },

  onShow:function(){
    var me = this;
    me.videoContext.play();
  },
  onHide:function(){
    var me = this;
    me.videoContext.pause();
  },
  upload:function(){
    videoUtils.uploadVideo();
  },
  showMine: function () {
    var me = this;
    var userInfo = app.getGlobalUserInfo();
    if (userInfo.id == '' || userInfo.id == undefined){
      wx.navigateTo({
        url: '../userLogin/userLogin',
      })
    }else{
      wx.navigateTo({
        url: '../mine/mine',
      })
    }


  },
})

详情跳转到个人页面

判断缓存中是否存在用户信息,存在跳转到个人信息页面,不存在,跳转到登录页面

PS:小程序一般的开发思路就是尽量前端能办的少麻烦后端,减少交互。这样用户体验就上去了。

本文分享自微信公众号 - 编程坑太多(idig88),作者:诸葛阿明

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「小程序JAVA实战」小程序视频列表到详情功能(58)

    PS: 页面的跳转传值在html和jsp开发中也比较普遍,千万不要有老铁通过缓存的方式传值,可以是可以但是不清晰了。

    IT故事会
  • 「docker实战篇」python的docker- 抖音视频抓取(中)(25)

    IT故事会
  • 「小程序JAVA实战」小程序视频上传方法的抽象复用(57)

    IT故事会
  • Webassembly初识

    首先,它是一种解释性语言,大神最开始的设计目标用户就是“非专业编程人员和设计师”,避免了非专业人士对编译器了解的需要,解释性语言就是边解释边执行,与编译性语言的...

    CIKEY
  • Asp.Net Mvc中的一些初级问题整理

    1.如何让Controller不返回视图?(比如仅执行一些数据库操作) 很简单,只要在Controller中定义一个void类型的public方法即可 publ...

    菩提树下的杨过
  • let与const

    ES2015(ES6)新增加了两个重要的JavaScript关键字: let和const。

    WindrunnerMax
  • 设计模式之单例模式与场景实践

    单例介绍 上次总结了设计模式中的module模式,可能没有真真正正的使用在场景中,发现效果并不好,想要使用起来却不那么得心应手, 所以这次我打算换一种方式~~从...

    okaychen
  • Layui常用方法

    layui中的input radio单选框监听选择触发事件: 根据给input绑定的 lay-filter 进行查找input,然后进入函数判断 ...

    二十三年蝉
  • vue菜鸟从业记:公司项目里如何进行前后端接口联调

    最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言。

    闰土大叔
  • 《Experiment with MATLAB》读书笔记(三)

    读书笔记(三) 这是第三部分日期函数 将代码复制到m文件即可运行 函数部分需新建m文件保存 %% 获取当前时间 format bank % ...

    万木逢春

扫码关注云+社区

领取腾讯云代金券