微信小程序基于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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
浅析Ajax语法
2016/12/05 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
Bootstrap Table从零开始
2017/06/30 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python PyQt5整理介绍
2020/04/01 Python
浅谈Python中的继承
2020/06/19 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
python绘制雷达图实例讲解
2021/01/03 Python
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
园林资料员岗位职责
2013/12/30 职场文书
考试不及格检讨书
2014/01/09 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
应届生简历自我评价
2015/03/11 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
老乡聚会通知
2015/04/23 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js