開發微信小程序的URL Scheme - 前后端實戰項目

項目提要

你司開發了微信小程序，現在需要通過短信等方式向自己的潛在客戶進行營銷。

通過服務端接口可以獲取打開小程序任意頁面的 URL Scheme。適用于從短信、郵件、微信外網頁等場景打開小程序。

微信開發文檔

作為PHP和VUE的初學者，我解決的問題基本上靠百度和QQ群里的熱心網友，還有一些專業書籍，在接下來的教程內容中，您將會深刻的體會到這一點。

自知力弱，不堪大作。唯碼可用，助君一力。

項目要求

• 點擊鏈接即可打開微信小程序
• 點擊鏈接后，可自動打開微信小程序

技術選型

• 最近在學PHP和VUE，正好拿來練手
• 擅長使用百度，用百度搜索引擎來尋找解決方法

文檔

• 獲取 URL Scheme
• 獲取 scheme 碼
• AccessToken
• H5免鑒權跳轉小程序常見問題解答
• 靜態網站 H5 跳小程序

限制

閱讀相關文檔后，我知道了有以下限制

• 每天生成 URL Scheme 總數量上限為50萬
• URL Scheme有效期最長 30 天
• 每個獨立的URL Scheme被用戶訪問后，僅此用戶可以再次訪問并打開對應小程序
• 針對非個人主體小程序開放
• access_token?的有效期目前為?2 個小時

編程思路

閱讀文檔后，找到自己的編程思路。

我們在PHP服務器中，新建一個文件夾“wxtc”，用來存儲我們編寫的代碼。

獲取AccessToken

一、：構造鏈接

獲取Token需要小程序的?AppID和?AppSecret，您可以在小程序的「微信公眾平臺?- 開發 - 開發管理 - 開發設置」頁中獲得。（需要已經成為開發者，且帳號沒有異常狀態）。

• AppID：微信小程序 - 開發管理 - 開發設置
• AppSecret：微信小程序 - 開發管理 - 開發設置

現在，我們根據要求，通過get方法，通過組合的鏈接獲取到含有AccessToken的數組即可。

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

將鏈接中的APPID和APPSECRET替換成您自己獲取的數據（公司數據，不便泄露）

二、：調試鏈接

為了方便接口的調試，我使用了ApiPost的服務，

• 打開ApiPost官網，選擇右上角立即使用，
• 選擇最后一個標簽頁，請求方式在下拉框中選擇get

在接口地址中填入我們構造好的鏈接，點擊右側藍色發送按鈕，在下方的“實時響應”一欄中，即可看到我們需要的數據。

其中的access_token的值，就是我們需要的AccessToken。

三：撰寫代碼

點擊標簽欄中的“生成代碼”，選擇“php(curl)”，接口拿到外面需要的代碼

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "我們構造的鏈接",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

四：調用access_token

我們完善下代碼，讓我們能拿到外面需要的access_token的值，

創建文件wx_token.php，填入以下代碼

<?php
//生成授權文件
//https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
//appid=http://m.kartiktrivedi.com/276458.html
//secret=QQ:1355471563
?>
<?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=Npcink&secret=1355471563",
      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;


?>

注意：這里獲取的方式為“POST”，我們最好按照官方文檔要求來，但是這個代碼是可用的，我就先不改了。（如果代碼是可用的，那我就不會再去動它）

這樣，通過wx_token.php文件，我們就能拿到我們需要的access_token文件了。

獲取URL Scheme

根據文檔“獲取 scheme 碼”，我們需要通過上面獲取的access_token來構造鏈接，獲取URL scheme

https://api.weixin.qq.com/wxa/generatescheme?access_token=我們獲取的ACCESS_TOKEN 

同樣的，我們根據“獲取AccessToken”一樣的方法，驗證構造鏈接有效性，獲取代碼，編寫代碼。

新建文件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_url.php文件，我們就能拿到我們需要的URL Scheme鏈接了。

前端展示URL Scheme

鏈接已經準備好了，接下來，就是前端調用展示了。

我們新建PHP文件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);
?>

這個代碼會輸出以下內容：

{"url_scheme":{"url":"weixin://dl/business/?t=10P2Q3P7wZf"}}

文件已備好，我們前端來調用，新建index.html文件，輸入以下代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>展示微信URL Scheme鏈接</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <p>展示微信URL Scheme鏈接</p>
        <ol>
            <li>微信鏈接</li>
            <li v-for="sites in info">{{sites.url}}</li>
        </ol>
        <button @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>

注意，代碼中存放xcx_url.php文件的位置，一般長這樣

http://m.kartiktrivedi.com/wx/xcx_url.php

這個代碼會輸出以下內容，截圖如下：

跳轉指定頁面或文章

先看代碼，我們在上一步已經拿到了token

<?php

//每次訪問，產出一個二維碼鏈接

include('./token.php');
//獲取小程序鏈接
$xcx_url= 'https://api.weixin.qq.com/wxa/generatescheme?access_token='.$wx_token;


$params = array(
    "jump_wxa" => array(
         "path" => 'pages/single/post',
        "query" => 'id=300485',
        //"env_version"=>''
    ),
    
);

$data = json_encode($params);


$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => $xcx_url,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => $data,
]);

$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);


//將token的值保存在變量$wx_token中
$wx_url =  $json_url['openlink'];

//echo '您的scheme 碼鏈接'.$xcx_url."<br />";
 // echo $wx_url;

//print_r($json_url);


在這里，我們給請求添加了一些參數，參數的格式如下

訪問頁面

頁面路徑：pages/circle/index.html

參考代碼

$params = array(
    "jump_wxa" => array(
         "path" => 'pages/circle',
        "query" => '',
        //"env_version"=>''
    ),
    
);

訪問指定文章

頁面路徑：pages/single/post.html?id=300485

參考代碼

$params = array(
    "jump_wxa" => array(
         "path" => 'pages/single/post',
        "query" => 'id=300485',
        //"env_version"=>''
    ),
    
);

技術細節

• setTimeout定時執行一個函數 - Vue3
• Axios溝通前后端 - Vue3
• 如何處理并拿到需要的JSON數據 - PHP
• 判斷數據類型 - PHP
• 如何將PHP的變量傳給js?

使用注意

• 本人才疏學淺，漏洞百出，代碼只是堪堪能用，請您自行審查安全和性能問題
• 本項目的代碼，每次生成一個URL Scheme，都hi刷新一次AccessToken，
• 本項目的代碼均部署在同一文件夾下，若您遇到跨域問題，請小心處理。
• 本項目代碼只能生成打開微信小程序首頁的URL Scheme，
• 幫助：請您在本平臺私信我即可

相關參考

• 利用URL Scheme接口無感跳轉微信小程序教程
• 遠程柜臺小程序指引
• ApiPost接口調試