本帖最后由 yuupuu 于 2023-9-30 14:44 编辑
目的
抖音内部的网页是需要使用白名单的域名才能正常打开页面否则无法使用。否则就是下面这样：
经过研究得知，一些知名网站都是可以正常打开的，但是我们不可能在知名网站上传自己的代码去实现页面。但是一些文件储存的域名是可以正常打开，所以我这里以阿里云文件储存为例。如果你有条件开通火山引擎会更好，火山引擎仅限企业开通。
阿里云OSS
阿里云OSS是一个文件存储对象，简单来说就是阿里云提供的“网络硬盘”，你可以实现上传、读取、下载。它提供了一个域名去访问你上传的文件，例如你在阿里云OSS上传了一个名为jinitaimei.jpg，阿里云OSS提供了一个域名为：ikun.oss-cn-guangzhou.aliyuncs.com，你将jinitaimei.jpg上传至根目录，那么你想要读取或下载这个jinitaimei.jpg，你只需要在浏览器访问：https://ikun.oss-cn-guangzhou.aliyuncs.com/jinitaimei.jpg 即可。
神奇的就是 ikun.oss-cn-guangzhou.aliyuncs.com 在抖音打开是无拦截的，这就可以借用这个优点在抖音内部无障碍打开这个域名。
阿里云OSS除了可以上传图片、视频、压缩包、音频等各类格式的文件之外，还支持html文件的上传和运行！
也就是说，我可以编写一个静态html页面，上传至OSS，然后访问，就可以实现在抖音推广了！
设置：
1、登录阿里云OSS控制面板
2、点击Bucket 列表并创建一个Bucket
3、读写权限选择“公共读”，其它默认
4、创建完成，点击你创建的Bucket进入
5、将下面的HTML代码保存为index.html，上传到根目录
6、设置HTTP头为”text/html; charset=UTF-8“
7、OSS本身不适合作为网页服务器，但是如果你设置了静态页面，那么是支持html页面以及js脚本的运行的。
所以你需要设置静态页面，才可以正常访问html，否则会弹出下载。
点击数据管理，静态页面，设置首页为index.html即可
8、获取链接，在index.html的详情点击，即可获取刀链接，将链接生成二维码，用抖音扫码，扫码后，右上角分享出去，就是一张卡片，点击卡片就可以跳转到微信指定页面
index.html
[Asm] 纯文本查看 复制代码 <html>
<head>
<!-- 这里更换标题 -->
<title>抖音跳转到微信引流页面</title>
<meta name="wechat-enable-text-zoom-em" content="true">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="origin-when-cross-origin">
<meta name="referrer" content="strict-origin-when-cross-origin">
<!-- 这里更换图标URL -->
<link rel="shortcut icon" href="http://p17.qhimg.com/t01b59eeec1fcf42263.jpg">
<style>
*{
padding: 0;
margin: 0;
}
#app{
background: #fff;
width: 100%;
height: 100%;
}
#app p{
text-align: center;
margin-top: 60px;
font-size: 17px;
}
#app button{
padding: 13px;
height: 50px;
margin: 30px auto;
display: block;
background: #05C363;
border: none;
border-radius: 10px;
color: #fff;
font-size: 16px;
}
</style>
</head>
<body>
<!--app根节点-->
<div id="app">
<p>正在跳转至微信...</p>
<button>点击跳转到微信</button>
</div>
<script type="text/javascript">
function jumpWX() {
// 跳转
location.href="https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html";
}
// 自动跳
location.href="https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html";
</script>
</body>
</html>
以上代码的链接是微信小程序示例页面，非引流页面。你使用后，请替换为自己的引流页面，一般是企业微信客服，或者是自己的小程序url scheme链接
演示视频
https://pan.baidu.com/s/1N-nz8l1F39IIpnd74XxsKg?pwd=exai
完整代码下载：
index.zip
(1.06 KB, 下载次数: 264)
| 
[复制链接]
发表于 2023-10-10 23:03
收藏
淘帖
有用
分享到朋友圈
