本文最后更新于 566 天前，其中的信息可能已经有所发展或是发生改变。

前情提要

在我弄了一个快递小程序之后，我急切地需要从除了微信以外的地方给我的小程序进行引流，然后问题又来了，我如果单纯发小程序码或者所谓的 "小程序链接"，在 QQ 和浏览器的大部分场景下都是无法使用的，这就要求我们达到一种从除了微信以外的 “私域” 跳转的效果，所以我参考了一些资料和一些教程，求助了一些大佬，总结了一些经验，把这篇教程呈现给大家（水一水
并且
你鹅厂最近干了一些很司马的事情

这一规定直接导致了一个链接不能持续的使用，那怎么行！直接开干！
首先给大家康康实例！ https://api.xiaolii.com

过程

我们这篇文章就不侧重于讲述代码的作用，主要来讲一下比较关键的点

你需要一台有公网的服务器（海内外无所谓）这个就不多赘述如果不懂的可以留言
在服务器中建立网站
在网站文件中建立以下几个文件将其都放在同一个路径之下
在微信公众平台获取好你的小程序 APPID 和 APPSECRET

第一个文件命名为 xcx_url.php

 <?php
    //展示微信URL Scheme链接的数组
 
    include('./wx_url.php');
 
    header('Content-Type:application/json');//加上这行,前端那边就不需要var result = $.parseJSON(data);
 
    //创建数组
    $xcx_url=array(
        "url_scheme"=>array( "url"=>$wx_url,)
    );
 
    //打印数组,供前端调用
    echo json_encode($xcx_url,true);
?>

第二个文件命名为 wx_url.php

 <?php
 
    //每次访问，产出一个微信URL Scheme链接
 
    include('./wx_token.php');
 
    //获取小程序构造链接
    $wx_url_gz= 'https://api.weixin.qq.com/wxa/generatescheme?access_token='.$wx_token;
 
    $curl = curl_init();
 
    curl_setopt_array($curl, [
      CURLOPT_URL => $wx_url_gz,
      CURLOPT_RETURNTRANSFER => true,
      CURLOPT_ENCODING => "",
      CURLOPT_MAXREDIRS => 10,
      CURLOPT_TIMEOUT => 30,
      CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
      CURLOPT_CUSTOMREQUEST => "POST",
    ]);
 
    $response = curl_exec($curl);
    $err = curl_error($curl);
 
    curl_close($curl);
 
    if ($err) {
      echo "cURL Error #:" . $err;
    } else {
      //echo $response;
    }
 
    //拿到小程序链接
    $json_url=json_decode($response,true);
 
    //将URL Scheme链接的值保存在变量$wx_url中
    $wx_url =  $json_url['openlink'];
 
    //echo '您本次的URL Scheme链接是：<br />'.$wx_url."<br />";
?>

第三个命名为 wx_token.php

 <?php
//生成授权文件
?>
<?php
//编写函数，方便调用
function wx_json_token() {
 
    $curl = curl_init();
    curl_setopt_array($curl, [
      CURLOPT_URL => "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的小程序APPID&secret=你的小程序APP SECRET",
      CURLOPT_RETURNTRANSFER => true,
      CURLOPT_ENCODING => "",
      CURLOPT_MAXREDIRS => 10,
      CURLOPT_TIMEOUT => 30,
      CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
      CURLOPT_CUSTOMREQUEST => "POST",
    ]);
 
    // 抓取URL并把它传递给浏览器
    $response = curl_exec($curl);
    //$err = curl_error($curl);
 
    // 关闭cURL资源，并且释放系统资源
    curl_close($curl);
 
    //返回函数生成的内容
    //获取token文件
    //将数组变为变量
    $json_token=json_decode($response,true);
    //将token的值保存在变量$wx_token中
    $token =  $json_token['access_token'];
    return $token;
};
    //执行函数拿token
    $wx_token = wx_json_token();
    //echo '您的token是：<br />'.$wx_token;
?>

最后我们需要做一个前端界面这个我是参考了原作者的界面之后自己写的。
比较粗糙，各位大佬可以自行改动 CSS 部分！
本文件命名为 index.html

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跳转</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
    <style>
    body {
            background-image: url('./bg.jpeg');
background-size:cover
 
    }
.btn {
  background: #eb94d0;
  /* 创建渐变 */
  background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
  background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
  /* 给按钮添加圆角 */
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 3px 2px 1px #9daef5;
  -webkit-box-shadow: 6px 5px 24px #666666;
  -moz-box-shadow: 6px 5px 24px #666666;
  box-shadow: 6px 5px 24px #666666;
  font-family: Arial;
  color: #fafafa;
  font-size: 27px;
  padding: 19px;
  text-decoration: none;
}
/* 悬停样式 */
.btn:hover {
  background: #2079b0;
  background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
  background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
  text-decoration: none;
}
    </style>
 
</head>
<body>
 
    <div id="app" align="center">
<br>
<button class="btn" @click="openWeapp()">点击跳转小程序哦</button>
    </div>
    <script>
        const App = Vue.createApp({
            data() {
                return {
                    //空数组，准备接收
                    info: [],
                }
            },
            methods: {
                openWeapp() {
                    //
                    location.href = this.info.url_scheme.url;
                }
            },
            mounted() {
 
                //定时执行，自动打开按钮
                setTimeout(this.openWeapp, 1000);
                axios
                    .get('./xcx_url.php')
                    .then(response => {
                        console.log(response);
                        this.info = response.data;
                    })
                    .catch(function (error) {
                        alert(error)
                    })
            }
        })
        App.mount("#app")
    </script>
</body>
</html>

最后记得在这个目录放一个背景图片命名为 bg.jpeg

最后实现的效果大概如下

前情提要

过程

相关参考

评论

发送评论编辑评论

前情提要

过程

相关参考

分享到微信

评论

发送评论 编辑评论

推荐文章

发送评论编辑评论