如何部署一个永久的链接跳转小程序的程序?
本文最后更新于 211 天前,其中的信息可能已经有所发展或是发生改变。

前情提要

在我弄了一个快递小程序之后,我急切地需要从除了微信以外的地方给我的小程序进行引流,然后问题又来了,我如果单纯发小程序码或者所谓的"小程序链接",在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

最后实现的效果大概如下

相关参考

https://www.npc.ink/276458.html (开发微信小程序的URL Scheme - 前后端实战项目)
https://www.freecodecamp.org/chinese/news/a-quick-guide-to-styling-buttons-using-css/ (前端开发教程之用 CSS 美化按钮)

评论

  1. Windows Edge
    6月前
    2023-11-21 21:23:20

    打车、寄件、外卖、点餐多用寒小辞小程序谢谢喵

    • 博主
      繁花
      Windows Chrome
      6月前
      2023-11-24 17:13:28

      好好好 滚

  2. 官方
    Windows Chrome
    4月前
    2024-1-22 9:53:04

    现在用不了了?

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇