JavaScript
ВНИМАНИЕ! В методах ВКонтакте API произошли изменения.
С 1 ноября 2012 года методы getUserBalance, secure.getBalance и secure.withdrawVotes будут отключены.
Используйте актуальный способ - Payments API.
В этом уроке я приведу часть кода, который используется в приложении «Реклама ссылок» http://vkontakte.ru/app1980660
Этот код только для клиентской части приложения. Серверная часть со списанием голосов здесь не описана.
В уроке показано:
- работа с методом getUserBalance
- алгоритм работы приложения в зависимости от баланса: если голосов на балансе хватает, то отправляем данные на сервер, если не хватает, то просим пользователя пополнить баланс и после этого снова автоматически проводим попытку отправки данных на сервер.
- отправка данные на сервер с помощью jQuery
- правильные окончания "1 голос, 2 голоса, 5 голосов"
- использование изображения предзагрузчика
code.js
Код: Выделить всё
/* http://flapps.ru/forum - форум о создании приложений */ $(document).ready(function(){var viewer_id;var auth_key;var wasPayBox = false; // было открыто окно "Внесите 1 голос", при нажатии на кнопку "Добавить" VK.init(function() { VK.loadParams(document.location.href); viewer_id = VK.params.viewer_id; auth_key = VK.params.auth_key; getBalance(); updateLinks(); }); // функция обновления балансаfunction getBalance(){ VK.api("getUserBalance", function(data) { // если баланс меньше 1 голоса, то выводим ссылку "пополнить" votes = parseInt(data.response)/100; if (votes<1) { $('#balance').html('Ваш баланс: ' + votes + ' ' + num_ending(votes)); $('#addVotes').show(); } else { $('#balance').html('Ваш баланс: ' + votes + ' ' + num_ending(votes)); } });} // клик по "Ваш баланс" - обновить$('#balance').click(function() { getBalance(); return false;}); // клик по "Пополнить баланс"$('#addVotes').click(function() { VK.callMethod("showPaymentBox"); return false;}); // баланс был измененVK.addCallback("onBalanceChanged", onBalanceChanged); function onBalanceChanged(settings) { getBalance(); if (wasPayBox) { // если вызывали окно пополнения, то вероятно пользователь пополнил баланс wasPayBox = false; // пробуем отправить данные снова $('#addLink_btn').click(); }} // отправляем на сервер$('#addLink_btn').click(function() { // проверяем баланс VK.api("getUserBalance", function(data) { // если баланс меньше 1 голоса, то выводим окно "пополнить на 1 голос" if (data.response<100) { VK.callMethod("showPaymentBox",1); wasPayBox = true; } else { var error = false; var t = ''; // текст ошибок var url = $('#url').val(); var title = $('#title').val(); // проверяем ссылку if (url.indexOf('http://vkontakte.ru/app')!==0 && url.indexOf('http://vkontakte.ru/club')!==0 && url.indexOf('http://vkontakte.ru/id')!==0 && url.indexOf('http://vkontakte.ru/video')!==0 && url.indexOf('http://vkontakte.ru/photo')!==0 && url.indexOf('http://vkontakte.ru/note')!==0 && url.indexOf('http://vkontakte.ru/public')!==0) { t += 'Вы можете добавить ссылку только на страницу сайта вконтакте.'; error=true; } if (url.length>50) { // if (error) - проверка, содержит ли переменная с ошибками какой-то текст, чтобы не делать лишний перенос строки if (error) { t += '<br />';} t += 'Максимальная длина ссылки 50 символов!'; error=true; } // проверяем заголовок if (title.length<5) { if (error) { t += '<br />';} t += 'Вы ввели слишком короткое описание!'; error=true; } if (title.length>35) { if (error) { t += '<br />';} t += 'Максимальная длина описания ссылки 35 символов!'; error=true; } // если есть ошибки if (error) { $('.error').html(t); $('.success').slideUp(); $('.error').slideDown(); } else { $('.error').hide(); // скрываем блок с ошибкой (он мог быть открыт) // показываем предзагрузчик $('#loader').show(); // отправляем данные на сервер $.post('http://flapps.ru/apps/test/addlink.php', { "title": title, "url": url, "viewer_id": viewer_id, "auth_key": auth_key }, function(data){ if (data.success) { $('.success').html(data.success.msg); $('.error').slideUp(); $('.success').slideDown(); } else { $('.error').html(data.error.msg); $('.success').slideUp(); $('.error').slideDown(); } // обновляем баланс getBalance(); // скрываем предзагрузчик $('#loader').fadeOut(1000); }, "json"); } } });return false;}); }); function num_ending(number) { var endings = ['голосов','голос','голоса']; var num100 = number % 100; var num10 = number % 10; if (num100 >= 5 && num100 <= 20) { return endings[0]; } else if (num10 == 0) { return endings[0]; } else if (num10 == 1) { return endings[1]; } else if (num10 >= 2 && num10 <= 4) { return endings[2]; } else if (num10 >= 5 && num10 <= 9) { return endings[0]; } else { return endings[2]; }} /* flapps.ru */Код: Выделить всё
/* http://flapps.ru/forum - форум о создании приложений */body { font-family: Arial, Verdana, sans-serif; font-size: 12px;} /* изображение прелоадер */#loader { width: 100%; height: 100%; position: fixed; text-align: center; z-index: 1000; background-color: #fff; opacity: 0.80;} #loader img{ position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px;} /* блоки с сообщениями */.success { background-color: #EFFFE8; border: 1px solid #9BE888; font-size: 11px; margin: 8px; padding: 8px 11px;}.error { background-color: #FFEFE8; border: 1px solid #E89B88; font-size: 11px; margin: 8px; padding: 8px 11px;}Код: Выделить всё
<html><head><script src="js/jquery-1.6.1.min.js" type="text/javascript"></script><script src="js/code.js" type="text/javascript"></script><link rel="stylesheet" href="css/style.css" type="text/css" /> <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script> </head><body><!-- это блок с изображением прелоадером --><div id="loader" style="display:none;"><img src="http://vk.com/images/upload.gif" alt="" width="32" height="8" border="0" /></div> <h1 style="text-align:center; border:none;">Добавить ссылку</h1><a href="#" id="balance" title="Кликните, чтобы обновить баланс">Ваш баланс:</a> <a href="#" id="addVotes" title="Кликните, чтобы пополнить баланс" style="display:none; font-style:italic;">(пополнить)</a><br /><br /> Ссылка:<br /><input type="text" id="url" name="url" value="http://vkontakte.ru/" maxlength="50" /><br />Описание:<br /><input type="text" id="title" name="title" value="" maxlength="35" /><br /><a href="#" id="addLink_btn">Добавить</a><br /><br /> <div class="error" style="display:none;"></div><div class="success" style="display:none;"></div> <br /><a href="http://flapps.ru/">http://flapps.ru/</a> </body></html>Код: Выделить всё
<?/* http://flapps.ru/forum - форум о создании приложений */ /* Здесь нужно провести весь процесс проверки полученных переменных (ссылка, заголовок) и списание голоса, проверку auth_key и баланса пользователя в приложении.*/ // просто выводим сообщениеecho '{"success": { "msg":"Всё прошло успешно!" } }'; // сообщение с ошибкой/*echo '{"error": { "msg":"Произошла ошибка!" } }';*/ ?>
