微信小程序基于ColorUI构建皮皮虾短视频去水印组件


Posted in Javascript onNovember 04, 2020

没错,我是皮友,我想学习舞蹈(/doge)和瑜伽 ,要无水印的那种有助于我加深学习。

1.组件效果展示

微信小程序基于ColorUI构建皮皮虾短视频去水印组件

2.组件引入准备

https://spider.apisev.cn加入合法request域名列表如果需要下载视频功能的话,把https://v6-ppx.ixigua.com加入downloadFile合法域名列表样式基于colorui,请在全局或者组件样式文件内引入colorui

3.组件引入并使用

组件建议在一个空白页面进行引入,配置json文件

"navigationStyle": "custom"//自定义需要配置的内容

或者也可以在全局引入该配置

"window": {
 "navigationStyle": "custom"
}

2.全局引入组件并使用

"usingComponents": {
 "spider":"components/spider/spider"
 }

在页面中使用组件

<!--么错,就是这么简单-->
<spider>
</spider>

4.API构建思路

  1. 根据短链接请求的response溯源视频的item_id信息
  2. 配置合理的header置换真实的视频地址
  3. 根据item_id请求api置换无水印视频地址
  4. 请求结果存放在缓存中,如果短时间内有类似查询,可以迅速返回结果 age = 3600 * 24

不提供接口源码,不做盈利使用,仅供皮友们学习娱乐

5.去水印插件

可以删除uload,那是我自定义的loading动画,可以使用 wx.showLoading来替代

spider.js

// components/spider/spider.js
Component({
 options: {
 addGlobalClass: true,
 multipleSlots: true
 },
 /**
 * 组件的属性列表
 */
 properties: {

 },

 /**
 * 组件的初始数据
 */
 data: {
 url:'',
 vis:false,
 mname:'',
 videourl:''
 },

 /**
 * 组件的方法列表
 */
 methods: {
 hideModal(e) {
  this.setData({
  mname: null
  })
 },
 urlinput(e){
  this.setData({
  url:e.detail.value
  })
 },
 parse(){
  var url = this.data.url;
  this.setData({vis:true})
  wx.request({
  url: 'https://spider.apisev.cn/cvideo/v1/pipixia?url='+url,
  success:res=>{
   console.log(res)
   this.setData({
   vis:false,
   mname:'bt',
   videourl:res.data.videourl
   })
  },
  fail:res=>{
   console.log(res)
  }
  })
 }
 }
})

spider.wxml

<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
	<view slot="backText">返回</view>
	<view slot="content">去水印解析</view>
</cu-custom>
<view class="cu-form-group margin-top">
		<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="urlinput" placeholder="请输入视频链接"></textarea>
</view>
<view class="padding flex flex-direction">
 <button class="cu-btn bg-green margin-tb-sm lg" bindtap="parse">解析</button>
</view>
<uload
visible="{{vis}}"
text="正在解析"
>
</uload>
<view class="cu-modal bottom-modal {{mname=='bt'?'show':''}}">
 <view class="cu-dialog">
 <view class="cu-bar bg-white">
  <view class="action text-green">下载</view>
  <view class="action text-blue" bindtap="hideModal">关闭</view>
 </view>
 <view class="padding-xl">
  <video src="{{videourl}}" ></video>
 </view>
 </view>
</view>

参考文档

CVideo 接口文档 皮皮虾无水印接口V1 - CVideo接口文档 - 飞光 (apisev.cn)

到此这篇关于微信小程序-基于ColorUI构建皮皮虾短视频去水印组件(仅供学习使用)的文章就介绍到这了,更多相关微信小程序短视频去水印内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
详解javascript高级定时器
Dec 31 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 #Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 #Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 #Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 #Javascript
如何利用vue实现波谱拟合详解
Nov 05 #Javascript
关于Vue中$refs的探索浅析
Nov 05 #Javascript
JavaScript 实现轮播图特效的示例
Nov 05 #Javascript
You might like
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
学习python (2)
2006/10/31 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
Python实现结构体代码实例
2020/02/10 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
人民教师的自我评价分享
2014/02/21 职场文书
大学生作弊检讨书
2014/09/11 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL