抖音霸屏介绍

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

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()}})},