天天外链H5接入天天外链教程

天天外链 • 2023年07月06日

如果您希望在自己的静态/动态H5页面使用天天外链，天天外链支持完全自定义开发界面，只需要30分钟即可完成对接。

一、使用前准备

已认证的服务号，注意：必须是已认证
前往小程序平台，绑定您的 "JS接口安全域名"，就是您H5的域名。
添加客服好友提供服务号AppID和服务号AppSecret,配置结束后即可使用。

二、H5对接使用

1、引用天天外链JS/CSS：

天天外链基于jquery开发。

<link rel="stylesheet" href="https://wailiancn.oss-cn-beijing.aliyuncs.com/assets/js/v1/wailian-1.0.min.css"></link>
<script src="https://wailiancn.oss-cn-beijing.aliyuncs.com/assets/js/v1/wailian-1.0-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、按钮代码：

您可以完全修改按钮style样式或添加Class，其他不建议修改。

<!-- 微信内浏览器加载样式 -->
<wx-open-launch-weapp id="wechatbtn" username="" path="" style="width: 100%;float: left;display: none;">
    <template>
        <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;background-color: #0F7FFE;color: #FFFFFF;">
            测试微信内打开
        </div>
    </template>
</wx-open-launch-weapp>

<!-- 微信外加载样式 -->
<a id="wailian_web_jump" href="#" style="width: 100%;height: 50px;line-height: 50px;text-align: center;background-color: #0F7FFE;color: #FFFFFF; display: none;float: left;text-decoration: none;">
    测试微信内打开
</a>

3、调用天天外链跳转

您可以加载跳转微信，也可以点击调用请求跳转微信。

# false需点击调起微信，true直接触发调起微信
var redirect = false;
# 外链ID，例:https://ding7.cn/l/AN1SNPp8tq 中的 AN1SNPp8tq 就是 links_id
var links_id = "services";
tianTianWaiLian(links_id,false);

完整代码:

测试地址：http://aixin7.cn/demo/services

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <title>天天外链自定义Demo</title>

    <link rel="stylesheet" href="https://wailiancn.oss-cn-beijing.aliyuncs.com/assets/js/v1/wailian-1.0.min.css"></link>
    <script src="https://wailiancn.oss-cn-beijing.aliyuncs.com/assets/js/v1/wailian-1.0-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <!-- 微信内浏览器加载样式 -->
    <wx-open-launch-weapp id="wechatbtn" username="" path="" style="width: 100%;float: left;display: none;">
        <template>
            <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;background-color: #0F7FFE;color: #FFFFFF;">
                测试微信内打开
            </div>
        </template>
    </wx-open-launch-weapp>

    <!-- 微信外加载样式 -->
    <a id="wailian_web_jump" href="#" style="width: 100%;height: 50px;line-height: 50px;text-align: center;background-color: #0F7FFE;color: #FFFFFF; display: none;float: left;text-decoration: none;">
        测试微信内打开
    </a>

    <script> 
        $(function () {
            // 调用天天外链,点击才跳转微信
            tianTianWaiLian('services',false);
            // 调用天天外链,加载就请求微信
            // tianTianWaiLian('services',true);
        });
    </script>
</body>
</html>

天天外链文档