微信小程式--基於ColorUI構建皮皮蝦短視訊去水印元件(僅供學習使用)
阿新 • • 發佈:2020-11-02
微信小程式--基於ColorUI構建皮皮蝦短視訊去水印元件(僅供學習使用)
沒錯,我是皮友,我想學習舞蹈(/doge)和瑜伽 ,要無水印的那種有助於我加深學習。
1.元件效果展示
2.元件引入準備
https://spider.apisev.cn
加入合法request
域名列表- 如果需要下載視訊功能的話,把
http://v6-ppx.ixigua.com
加入downloadFile
合法域名列表 - 樣式基於
colorui
,請在全域性或者元件樣式檔案內引入colorui
3.元件引入並使用
-
元件建議在一個空白頁面進行引入,配置
json
檔案"navigationStyle": "custom"//自定義需要配置的內容
或者也可以在全域性引入該配置
"window": { "navigationStyle": "custom" }
-
全域性引入元件並使用
"usingComponents": { "spider":"components/spider/spider" }
在頁面中使用元件
<!--麼錯,就是這麼簡單--> <spider> </spider>
4.API構建思路
- 根據短連結請求的
response
溯源視訊的item_id
資訊 - 配置合理的
header
置換真實的視訊地址 - 根據
item_id
請求api
置換無水印視訊地址 - 請求結果存放在快取中,如果短時間內有類似查詢,可以迅速返回結果
age = 3600 * 24
不提供介面原始碼,不做盈利使用,僅供皮友們學習娛樂
5.去水印外掛
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)