用来下载短视频解析的微信小程序简易代码+php后端处理
本帖最后由 勤勤学长 于 2019-7-24 16:28 编辑初学小程序，给大家分享一下我的代码。
可能是我的原因，我需要知道我想做的要如何实现，我才能有这个心学习。
看了差不多一天小程序的教程，没耐心从头看起，直接通过百度 关键词 实现的功能，
短视频解析这个接口就不分享了，实际效果图。
已知，只能下载后台设置域名的文件，那就意味着，获取到无水印地址之后，需要保存到本地服务器，用户再能下载。
（登录小程序后台-开发-开发设置）
所以，整个业务流程是：解析-下载到服务器-下载到客户手机
简易的前端代码
<view class="section">
<video src="{{douyinUrl}}" ></video>
</view>
<view >
<form bindsubmit="bindFormSubmit">
<textarea placeholder="粘贴你复制到的文本内容" name="textarea" value='' />
<button form-type="submit"> 解析 </button>
<button bindtap="bindButtonTap">保存到手机{{progress}}</button>
</form>
</view>
progress 这个是用来显示下载进度的，后边的js会提到
video说明 https://developers.weixin.qq.com/miniprogram/dev/component/video.html
textarea说明 https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html
（要获取到textarea 的内容需要放在form里边？搜了一大圈没找到答案）
下边是js文件
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
douyinUrl:'',
mp4Url:""
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
bindFormSubmit: function (e) {
//这个是解析按钮点击之后发生的事情
var that = this;
that.setData({
douyinUrl: ''
});
//下边的post提交就是把内容提交的后端进行处理
wx.request({
url: 'https://wechat.11ak.cn/index/index/解析地址', //仅为示例，并非真实的接口地址
method: 'POST',
data: {
msg: e.detail.value.textarea
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
//正确返回内容之后，把解析到的地址赋值到前端的douyinUrl，全局变量
that.setData({
douyinUrl: res.data
});
console.log(res.data)
}
})
//到这里，解析任务完成
},
bindButtonTap: function(e) {
//下边是保存到手机按钮的事件
var that = this;
var mp4Url = that.data.douyinUrl;
//到这里就获取到了解析后的douyinUrl的内容，因为是全局变量，所以可以直接取值。
console.log(that.data.douyinUrl)
//下边是执行下载操作
//相关文档
//downloadFile文件下载 https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html
//监控下载进度文档 https://developers.weixin.qq.com/miniprogram/dev/api/network/download/DownloadTask.html
//保存文件到手机，需要授权 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.openSetting.html
const downloadTask = wx.downloadFile({
url: mp4Url, //本地视频下载地址
success(res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log(res.tempFilePath)
wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res.errMsg)
console.log('3');
wx.showToast({
title: '保存成功',
icon: 'success'
});
},
fail(err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
console.log("用户一开始拒绝了，我们想再次发起授权")
console.log('打开设置窗口');
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败，给出不给权限就无法正常使用的提示')
}
}
})
}
console.log(err);
}
})
}else{
}
}
})
downloadTask.onProgressUpdate((res)=>{
if (res.progress === 100) {
this.setData({
progress: ''
});
}else{
this.setData({
progress: res.progress + '%'
});
}
console.log('下载进度', res.progress)
// console.log('已经下载的数据长度', res.totalBytesWritten)
//console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})
}
})
php解析代码
$msg = input('post.msg');
preg_match('/+:\/\/[^\s]*/', $msg, $matches);
$douyin_url1 = $matches;
if(empty($douyin_url1)){
return '解析失败,请先核对链接格式是否正确,链接无误能正常打开的话,联系我检查，QQ/微信xxx';
}
$url = $this->kuaishou($douyin_url1);
//得到解析后的地址，下边是保存到服务器的代码
$path = 'uploads/'.date("Ymd");//创建目录
if(!is_readable($path))
{
is_file($path) or mkdir($path,0700);
}
$save_to = $path.'/'.date("His").mt_rand(1000,9999).'.mp4';//保存位置和文件名字
$source = $url;
$ch = curl_init();//初始化一个cURL会话
curl_setopt($ch,CURLOPT_URL,$source);//抓取url
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);//是否显示头信息
curl_setopt($ch,CURLOPT_SSLVERSION,3);//传递一个包含SSL版本的长参数
$data = curl_exec($ch);// 执行一个cURL会话
$error = curl_error($ch);//返回一条最近一次cURL操作明确的文本的错误信息。
curl_close($ch);//关闭一个cURL会话并且释放所有资源
$destination = $save_to;
$file = fopen($destination,"w+");
fputs($file,$data);//写入文件
fclose($file);
return 'https://网站域名/'.$save_to;
对了，原本是我想执行下载操作的时候，再进行保存到服务器，也就是保存的时候，post提交解析得到的视频地址，后端再进行下载。但是，我提交post还没响应的时候，代码就开始往下执行了，所以现在是解析完成之后，就下载到服务器了，实际返回得到的地址是已经下载到服务器了的。不知道如果解决，懂的大佬麻烦提供一下思路。
进来学习下经验 liphily 发表于 2019-7-24 17:32
我记得视频在官方服务器上本来就是无水印的，只是在播放的时候从本地加的。
所以一般的无水印解析都是直接 ...
每个微信小程序必须事先设置一个通讯域名，并通过 HTTPS 请求进行网络通信，不满足条件的域名和协议无法请求。也就是说，请求 request 地址必须是合法域名，需要有 SSL 证书认证过。
解析得到的http。如果不保存到本地服务器，怎么才能得到https的链接呢？
哪里错了。点了解析没反应 上面第一段 代码 加入index.wxml 和 index\index.js代码内 有几个参数要修改的 ？ shipon 发表于 2019-7-30 09:34
哪里错了。点了解析没反应 上面第一段 代码 加入index.wxml 和 index\index.js代码内 有几个参数要修 ...
看调试工具，返回什么 勤勤学长 发表于 2019-7-30 19:18
看调试工具，返回什么
这个吗？ 路过，看个热闹 大佬， 这个小程序解决了吗？可以分享一下后端源码不，想学习一下感谢！
页:
[1]