抖音霸屏介绍

先来介绍一下吧，嫌啰嗦的可以直接跳转>>>思路分析 ↓

1.抖音同城霸屏：可控制所有扫码用户发布视频的时间—实现片区域本地霸屏；

2.蓝V号增粉：顾客扫码一键领取优惠券并自动发布视频、同时自动跳转到商家蓝V号关注并了解商家更多商品优惠内容；

这是我从网上找的一些资料，好了好了，不贴图片了，我是来分享技术的，而不是来营销的。
感兴趣的可以体验一下，最后再上两个二维码吧

抖音扫描二维码，体验一下

抖音开发文档

https://open.douyin.com/platform/doc/6848834666171009035
难点（看明白文档也就那么回事）：

先获取用户的acccess_token >>>>>>>>
上传视频到服务器 >>>>>>>>>>
创建视频 >>>>>>>>>>>>

思路分析

由于时间紧迫，工期时间太短，以下思路是我们全栈总监给我分析的，并且全程指导，并且解决问题，在此非常感谢我们的全栈总监。

抖音的开发文档太坑了，没有任何前端的api，没有前端的示例，根本看不懂说的是啥，也有可能是前端实现起来太麻烦，抖音直接否决了。

首先用户用扫二维码，会进入一个抖音自带的获取用户code的页面，code在url里
此二维码需要定义一个url，在用户扫描完二维码之后，需要获取用户的acccess_token,
然后进入一个url，此url为一个展示页面,
当用户点击领取优惠（或者查看详情）之后，上传视频，然后创建视频等等（后续还有，具体看需求）

步骤

一、首先是拼接url

https://open.douyin.com/platform/oauth/connect/?client_key=1111111111111111&response_type=code&scope=user_info,video.create&redirect_uri=http://douyinshare.xswl.com/

client_key需要去申请，怎么申请自行百度吧
redirect_uri=后边重定向的url就是需要打开的链接（也是我们需要自己构造的页面）

二、redirect_uri=后面的url的布局构建

三、将我们拼接好的URL生成一个二维码，用户扫描完之后授权，会重定向，进入我们的网页，同时抖音会在url地址栏返回一个code码给我们，获取的code用来调用https://open.douyin.com/oauth/access_token/ 换取用户acccess_token。


created () {// 在页面加载的时候获取地址栏的地址，因为地址栏有我们需要的code码var url = window.location.href
// 截取URL上的code并赋值var code = url.substring(35, 71)
// this指向var that = this
// axios 的get请求axios.get('/api/oauth/access_token/', {// 需要传的参数params: {client_key: '申请的自己的 client_key',client_secret: '申请的自己的  client_secret',grant_type: 'authorization_code',code: code}}).then(function (res) {console.log(res.data.data， '1111111111')
//  获取到用户的两项，并赋值that.baba = res.data.data.access_tokenthat.id = res.data.data.open_id}).catch(function (error) {console.log(error, '======>2')})},

四、用户点击领取的时候，我们需要提示用户，当用户确认的时候我们需要上传视频并且创建视频，然后定向到我们需要展示的商家的抖音号里


// 在创建视频之前需要先定义一个发布视频的方法：
// 请求POST抖音，创建视频fabu () {axios.post(// 拼接抖音需求文档的url"/api/video/create/" + "?open_id=" + this.id + "&access_token=" + this.baba,{// 传参// open_id: this.id,// access_token: this.baba,// Content_Type: 'video/mp4',// video: Ajson// video: bytarrvideo_id: this.video_id,text: '棉柔王国满足你对棉的一切想象，订购热线053266697666',poi_id: '111',poi_name: '111科技有限公司'},{// 请求头headers: {'Content-Type': 'application/json'}}).then(function (response) {console.log('3======>' + JSON.stringify(response), response)}).catch(function (error) {console.log(error + '4')})}// 因为某些限制，axios的post请求不能发multipart/form-data，所以我们换一种请求方式
// 思路是先get请求本地的转换好的二进制文件，然后作为参数来传post// get请求本地的二进制文件(此二进制文件为视频转换成的)， 用xhr来发送post请求，得到抖音返回的视频idauthorization () {// videoPostData.txt为后端大佬自创的软件，用来给我转换格式的// 格式为xhr.setRequestHeader里面的'multipart/form-data;charset=utf-8; boundary=123456789'axios.get('../../videoPostData.txt', {responseType: 'blob'}).then(res => {console.log(res.data, 66666666666666666666666)var that = this// (1).开始XMLHttpRequest请求var xhr = new XMLHttpRequest()var url = 'https://open.douyin.com/video/upload/' + '?open_id=' + this.id + '&access_token=' + this.baba// (2).设置请求方法和地址xhr.open('post', url)// (3).设置请求头（post请求才需要设置 以下为抖音发送的格式）xhr.setRequestHeader('Content-Type','multipart/form-data;charset=utf-8; boundary=123456789')xhr.send(res.data)// (5).注册回调函数xhr.onload = function () {console.log(xhr.responseText, 7)console.log(url, 8)console.log(JSON.parse(xhr.response), 10)console.log(JSON.parse(xhr.responseText), 11)console.log(JSON.parse(xhr.responseText).data.video.video_id, 9)console.log(that.video_id)console.log(that)// 将抖音返回的video_id获取到，赋值到datathat.video_id = JSON.parse(xhr.responseText).data.video.video_id// 调用方法，发布视频that.fabu()}})},

可以参照我的代码，和抖音的官方文档来

完结撒花

★,°:.☆(￣▽￣)/$:.°★。撒花！

抖音上传视频（纯前端实现霸屏软件的功能）进店转发视频功能，详情搜索抖音霸屏软件相关推荐

抖音显示服务器审核为什么,抖音上传的视频为什么一直正在审核是违规吗不给显示出来吗...
抖音正在审核是违规吗,当让不是了,一般来讲正在审核就是正在审核.因为直播乱层出,国家加大了管理的力度,现在审查越来越严格,所以需要的时间也更长.长时间审核的原因有如下:1.可能是因为是新用户,一般来讲 ...
抖音怎么上传无损画质_抖音上传视频为什么会模糊？如何才能上传高清无损视频？...
抖音上传视频为什么会模糊?如何才能上传高清无损视频? 文章首发"公众号"[四爷课堂],专注分享短视频运营干货,关注可领取100G抖音运营资料,仅限50个名额. 四哥初入抖音的时候, ...
抖音上传视频模糊怎么办？都有哪些原因造成的丨国仁网络
抖音上传视频有时候会遇到视频不清晰的情况,那么自己在遇到不清楚的情况之下怎么办呢,抖音上传视频模糊怎么办,我们要怎么调整? 一:抖音上传视频模糊的原因是什么? 1.1.前期拍摄不清晰 2.2.视频压缩 ...
上传失败已保存至草稿_我告诉你抖音上传失败保存至草稿
抖音上传失败保存至草稿的原因:1.检查连接的网络是否正常,如果网速过慢或者网络突然没法使用,会导致抖音上传失败,然后保存到草稿箱中.可以更换当前的网络后上传视频. 2.检查上传的抖音视频中是否有不合规 ...
上传失败已保存至草稿_抖音上传失败保存草稿箱怎么回事，抖音上传失败已保存至草稿箱...
抖音上传失败保存草稿箱怎么回事,抖音上传失败已保存至草稿箱抖音上传失败保存草稿箱的原因可能有: 1.网络信号不好,建议到一个信号好的地方上传: 2.抖音版本过低,建议升级最新版本: 3.视频格式不正 ...
抖音上传视频显示转成mp4怎么设置_如何剪辑抖音短视频？视频剪辑软件推荐及操作流程（一）...
随着抖音的爆火,大家都想在这个风口分一杯羹,但是呢,很多人都跟小编一样,既不喜欢露脸也没有能秀的才艺,所以才一直迟迟没有行动. 不过我在刷抖音的时候,也发现同样没有露脸没有才艺的人能上热门爆红,因为他 ...
webp文件上传格式转换前端解决方案及php端解决方案
webp文件上传到服务端后,本来所有的图片文件都使用的GD库进行尺寸压缩,但getimagesize函数获取webp文件信息失败,导致脚本运行异常中断尝试了两种解决方案 1.前端监听文件选择后,将文 ...
使用pre-signed URLs通过浏览器上传无中间件前端直传 minio
使用presigned URLs,你可以让浏览器直接上传一个文件到S3服务,而不需要暴露S3服务的认证信息给这个用户.下面就是使用minio-js实现的一个示例程序. 服务端代码 const MinI ...
如何上传html验证文件大小,input上传文件，前端判断文件的大小及类型
由于项目需朋不功事做时次功好来多这开制的请一例农在要,需要实现该功能纪录如下是能览调不页新代些事几求事都时学下是事. 上传文件时,接愿目的那前机专容图缩近上意对这些端制门由前端判断文件的大小及类型.举 ...

抖音上传视频（纯前端实现霸屏软件的功能）进店转发视频功能，详情搜索抖音霸屏软件

抖音霸屏软件

抖音霸屏介绍

先来介绍一下吧，嫌啰嗦的可以直接跳转>>>思路分析 ↓

抖音开发文档

思路分析

步骤

抖音上传视频（纯前端实现霸屏软件的功能）进店转发视频功能，详情搜索抖音霸屏软件相关推荐

最新文章

热门文章