微信公眾平台自定義菜單配置工具的實現

由於JS腳本跨域訪問的問題，無法通過jQuery的Ajax方法直接調用微信的API，故采用服務器端轉發的方式與微信API交互。

配置自定義菜單須先獲取Access Token，前端JS代碼如下：

        function getAccessToken()
        {
            var appidParam = $("#appid").val();
            var secretParam = $("#secret").val();
            var date = new Date();
            var url = "get_access_token.php?appid="+appidParam+"&secret="+secretParam+"&time="+date.getTime();
            $.get(url, function (data,status) {
                var result = eval("("+data+")");
                $("#info").css("display","block");
                if(typeof (result["errcode"])!="undefined")
                {
                    var errorInfo = "錯誤代碼："+result["errcode"]+";錯誤信息："+result["errmsg"];
                    $("#info").html(errorInfo);
                    $("#changeBtn").attr("disabled","disabled");
                }
                else
                {
                    var successInfo = "獲取Access Token 成功：" + result["access_token"];
                    $("#accessToken").val(result["access_token"]);
                    $("#info").html(successInfo);
                    $("#changeBtn").removeAttr("disabled");
                }
            })

        }

服務器端使用PHP的curl工具進行轉發，代碼如下：   

$appid = $_GET["appid"];
$secret = $_GET["secret"];
$api_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$api_url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
$json_result = curl_exec($ch);
curl_close($ch);
echo $json_result;

利用獲取到的 Access Token，下一步可以配置自定義菜單。目前還需要自己編寫自定義菜單的JSON，以后有時間會加上可視化界面。通過POST方法向服務器提交JSON的JS代碼如下：

        function changeButton()
        {
            var url = "button_manage.php?access_token="+$("#accessToken").val();
            var button_json = $("#buttonBody").val();
            $.post(url,{"button_json":button_json}, function (data,status) {
                var result = eval("("+data+")");
                if(result["errcode"] == 0)
                {
                    alert("配置成功");
                }
                else
                {
                    alert("配置失敗，錯誤代碼："+result["errcode"]+"錯誤信息："+result["errmsg"]);
                }
            })
        }

服務器端的PHP代碼如下：

    $access_token = $_GET["access_token"];
    $api_url = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token={$access_token}";
    $button_json = $_POST["button_json"];
    $ch = curl_init();
    curl_setopt($ch,CURLOPT_URL,$api_url);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $button_json);
    $json_result = curl_exec($ch);
    curl_close($ch);
    echo $json_result;

實現效果可訪問：

http://leo07.sinaapp.com/button_manage.html