微信小程序基于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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
JS实现简单九宫格抽奖
Jun 28 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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
PHP教程 基本语法
2009/10/23 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHP7 标准库修改
2021/03/09 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
浅谈vue首屏加载优化
2018/06/28 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python中拆分字符串的操作方法
2019/07/23 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
三维科技面试题
2013/07/27 面试题
学习党章思想汇报
2014/01/07 职场文书
药剂专业自荐书
2014/06/20 职场文书
毕业生实习证明
2014/09/19 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript