Skip to content

Instantly share code, notes, and snippets.

@naoyeye
Last active August 29, 2015 14:19
Show Gist options
  • Save naoyeye/42352651e63c52d975ff to your computer and use it in GitHub Desktop.
Save naoyeye/42352651e63c52d975ff to your computer and use it in GitHub Desktop.
// <script src="/javascripts/www/campaign/jquery-1.11.1.min.js"></script>
// <script src="/components/underscore/underscore-min.js"></script>
// <script src="/components/fastclick/lib/fastclick.js"></script>
// <script src="/components/history.js/scripts/bundled-uncompressed/html4+html5/jquery.history.js"></script>
// <script src="/components/velocity/velocity.min.js"></script>
// <script src="/components/velocity/velocity.ui.min.js"></script>
// <script src="/javascripts/www/campaign/avos.min.js"></script>
// <script src="/javascripts/www/jweixin-1.0.0.js"></script>
// <script src="/javascripts/www/campaign/scrollTo.min.js"></script>
// campaignTools.js 是豌豆荚移动端 webview 接口汇总插件
// https://gist.github.com/naoyeye/c4471d8052b36935e7d1
// <script src="/javascripts/www/campaign/campaignTools.js"></script>
// <script src="/javascripts/www/campaign/campaign-aprilfool2015.js"></script>
/*global $, jQuery, ga, AV, _, FastClick, campaignTools, campaignPlugin, wx */
/*
* @Author: Jiyun
* @Date: 2015-03-18 18:31:55
* @Last Modified by: Jiyun
* @Last Modified time: 2015-04-10 00:21:32
*/
$(function () {
FastClick.attach(document.body);
var needle = 'https://s3.cn-north-1.amazonaws.com.cn/web-statics-production/needle/58.json'; // 所有的文案都会存在一个 json 文件里,方便运营人员实时修改
var pageData; // 存放获取回来的页面文案
var typeSelected = 0; // 用户选择的一级分类
var childTypeSelected = 0; 用户选择的二级分类
var shareShowed = false; // 是否显示了分享层
var shareBtnActionSetuped = false; // 分享行为控制是否已经启动
var shareWordObj; // 分享文案对象
var appid; // 生成的 app id
var appObject; // 生成的 app 对象
var wechatSetuped = false; // 微信分享是否已经启动
// LeanCloud 用来存储用户生成的 app 信息
AV.initialize('6xgfpnrnenw7rxnqq8eoyqhiqisbb9a5gy6vcv7tk67xzezp', 'rlt8ttsr44oepthsvfkfhryg1iovyb4v2308evhh3jz0toxq');
var application = AV.Object.extend('Application');
var avApp = new application();
// 设备信息
var device = {
isP4 : campaignTools.UA.inWdj, // 豌豆荚 P4 客户端
isWechat : campaignTools.UA.inWechat,
isRetina : campaignTools.UA.isRetina,
isPC : campaignTools.inPC,
isAndroid : campaignTools.UA.inAndroid,
isiOS : campaignTools.UA.inIos,
oldP4 : false // 是否是旧版
};
// History 控制
var History = window.History;
History.Adapter.bind(window, 'statechange', function () {
var state = History.getState();
// History.log(state.data, state.title, state.url);
stateChange(state);
});
// 页面一打开时就需要检查一下
$.ajax({
url: needle,
dataType: 'json',
success: function (resp) {
// pageData = JSON.parse(resp);
pageData = resp;
shareWordObj = pageData.shareWordObj;
// 如果是在微信内,启动微信分享
if (device.isWechat) {
shareWordObj.wechatShareObj.link = 'http://www.wandoujia.com/campaign/appmaker/?';
wechatShareSetup();
}
$('.pc-desc').html(pageData.pc);
stateChange(History.getState());
}
});
// 场景切换
function stateChange(state) {
var hash = state.data.data;
if (hash === undefined) {
document.title = '不再懊悔 App 自动生成器';
appid = parseQueryString().appid || state.data.id;
if (!appid) {
showHome();
} else {
renderAppDetail(null, appid);
}
} else if (hash === 'new' || hash === 'explore_new') {
renderParentType();
} else if (hash === 'explore') {
// console.log('render explore');
renderExplore(hash);
} else if (hash === 'type_1' || hash === 'type_2' || hash === 'type_3' || hash === 'type_4') {
renderChildType(hash);
} else if (hash === 'childType_1' || hash === 'childType_2' || hash === 'childType_3' || hash === 'childType_4' || hash === 'childType_5' || hash === 'childType_6') {
renderForm(hash);
} else if (hash === 'published') {
renderAppDetail(null, state.data.id);
}
$('body').removeClass('share-popup-enabled');
}
// 通用的模板处理函数
function renderTemplate(tpl, object, callback) {
var template = _.template($('script#' + tpl).html());
// 检查是否已经获取了 needle
// 因为存在后退的情况
// 如果是后退,则说明已经获取了 needle
// 其实可以去掉 else ?
if (pageData !== undefined) {
$('#wrap').html(template(object));
callback();
} else {
$.ajax({
url: needle,
dataType: 'json',
success: function (resp) {
pageData = JSON.parse(resp);
$('#wrap').html(template(object));
callback();
}
});
}
}
// 显示首页
function showHome() {
showLoading('正在加载');
renderTemplate('pageOneTpl', {
pageOne: pageData.cover
}, function () {
removeLoading();
});
}
// 显示一级分类页面
function renderParentType() {
showLoading('正在分析中,请稍等');
renderTemplate('pageTwoTpl', {
description: pageData.typeListDesc,
options: pageData.options
}, function () {
removeLoading();
});
}
// 显示二级分类页面
function renderChildType(hash) {
showLoading('正在分析中,请稍等');
typeSelected = hash.split('_')[1] - 1;
var childTypeObj = pageData.options[typeSelected];
renderTemplate('pageThreeTpl', {
typeSelected: typeSelected,
description: childTypeObj.desc,
childType: childTypeObj.childType
}, function () {
removeLoading();
});
}
// 显示创建 app 的表单页面
function renderForm(hash) {
showLoading('正在分析中,请稍等');
childTypeSelected = hash.split('_')[1] - 1;
var objURL = {};
window.location.hash.replace(
new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
function ($0, $1, $2, $3) {
objURL[$1] = $3;
}
);
var BigTypeSelected = objURL.type || typeSelected;
var formObj = pageData.options[BigTypeSelected].childType[childTypeSelected];
formObj.defaultValue.template = formObj.template;
renderTemplate('pageFourTpl', {
BigTypeSelected: BigTypeSelected,
childTypeSelected: childTypeSelected + 1,
description: formObj.desc,
form: formObj.defaultValue,
appForm: pageData.appForm
}, function () {
removeLoading();
});
}
// 显示 app 详情页面
function renderAppDetail(app, id) {
if (id === 'undefined') {
window.location.href = 'http://www.wandoujia.com/campaign/appmaker/?utm_source=redirect&utm_medium=minisite&utm_campaign=appmaker';
}
showLoading('加载中...请稍等');
// 根据 id 去获取 app 信息
if (!app) {
var query = new AV.Query(application);
query.equalTo('objectId', id);
query.find({
success: function (results) {
if (results.length) {
// console.log('results1 = ', results[0]);
var appObj = results[0].attributes;
appObject = appObj;
appObj.description = appObj.description.replace(/\r|\n/g, '<br>');
appObj.feature = appObj.feature.replace(/\r|\n/g, '<br>');
appObj.updatedAt = moment(results[0].updatedAt.toString());
// console.log('appObj', appObj);
if (!device.isPC()) {
document.title = appObj.title + appObj.character;
}
renderTpl(appObj);
}
},
error: function (error) {
console.log('error', error);
}
});
// 预览状态直接显示
} else {
window.location.href = 'http://www.wandoujia.com/campaign/appmaker/?appid=' + id + '&utm_source=publish&utm_medium=minisite&utm_campaign=appmaker';
}
function renderTpl(app) {
app.screenshot = pageData.options[app.bigTypeSelected].childType[app.childTypeSelected - 1].screenshot;
renderTemplate('pageFiveTpl', {
slogan: pageData.slogan,
app: app,
appForm: pageData.appForm
}, function () {
removeLoading();
// 微信中重置分享参数
if (device.isWechat || device.isP4) {
shareWordObj.wechatShareObj = {
'title' : app.title + app.character,
'description': shareWordObj.word[0].replace('#我创业了#', '我创业了!') + '「' + app.title + app.character + '」' + shareWordObj.word[1],
'link': 'http://www.wandoujia.com/campaign/appmaker/?appid=' + id + '&',
'imgUrl': app.icon
};
// if (!wechatSetuped) {
// resetWechatShare();
// wechatSetuped = true;
// }
}
});
}
}
// 显示「随便看看」
function renderExplore() {
showLoading('加载中,请稍等');
var query = new AV.Query(application);
query.containedIn('objectId', pageData.explore.apps);
query.find({
success: function (results) {
if (results.length) {
// console.log('results1 = ', results);
pageData.explore.results = results;
renderTemplate('pageSixTpl', {
explore: pageData.explore
}, function () {
removeLoading();
});
}
},
error: function (error) {
console.log('error', error);
}
});
}
// 获取 URL 中的参数值
function parseQueryString() {
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
function ($0, $1, $2, $3) {
objURL[$1] = $3;
}
);
return objURL;
}
// .btn 点击事件, 触发场景切换
$('body').on('click', 'a.btn', function (e) {
var $t = $(this);
e.preventDefault();
var url = $t.attr('href');
var title = $t.attr('title');
if (device.isPC()) {
title = $('title').text();
}
var hash = $t.attr('data-hash');
History.pushState({data : hash}, title, url);
// 发布
}).on('click', 'a.publish', function (e) {
e.preventDefault();
// 获取表单各项数值
var app = {
'icon' : $('#icon img').attr('src'),
'title': $('#app-title').val(),
'character': $('#character').html(),
'developer': $('#app-developer').val(),
'description': $('#app-description').val().replace(/\r|\n/g, '<br>'),
'feature': $('#app-feature').val(),
'bigTypeSelected': $('#big-type-selected').val(),
'childTypeSelected': $('#child-type-selected').val(),
};
// 表单验证
if (app.title.length > 12 || app.title.length === 0) {
$('body').scrollTo($('.app-title-input'), 0, function () {
$('#app-title').velocity('callout.shake', {
delay: 300
});
});
return;
} else if (app.developer.length > 12 || app.developer.length === 0) {
$('body').scrollTo($('.app-developer-input'), 0, function () {
$('#app-developer').velocity('callout.shake', {
delay: 300
});
});
return;
} else if (app.description.length > 100 || app.description.length === 0) {
$('body').scrollTo($('.app-description-input'), 0, function () {
$('#app-description').velocity('callout.shake', {
delay: 300
});
});
return;
} else if (app.feature.length === 0) {
$('body').scrollTo($('.app-feature-input'), 0, function () {
$('#app-feature').velocity('callout.shake', {
delay: 300
});
});
return;
}
showLoading('正在发布...');
// 记录到 GA : 用户是否修改了默认值
if (app.title !== pageData.options[app.bigTypeSelected].childType[app.childTypeSelected - 1].defaultValue.title) {
campaignTools.pushGaEvent('appmaker', 'edit', 'title');
}
if (app.developer !== pageData.options[app.bigTypeSelected].childType[app.childTypeSelected - 1].defaultValue.developer) {
campaignTools.pushGaEvent('appmaker', 'edit', 'developer');
}
if (app.description.replace(/\r|\n/g, '<br>') !== pageData.options[app.bigTypeSelected].childType[app.childTypeSelected - 1].defaultValue.description.replace(/\r|\n/g, '<br>')) {
campaignTools.pushGaEvent('appmaker', 'edit', 'description');
}
if (app.feature.replace(/\r|\n/g, '<br>') !== pageData.options[app.bigTypeSelected].childType[app.childTypeSelected - 1].defaultValue.feature.replace(/\r|\n/g, '<br>')) {
campaignTools.pushGaEvent('appmaker', 'edit', 'feature');
}
// 存储到 leancloud
avApp.set('icon', app.icon);
avApp.set('title', app.title);
avApp.set('character', app.character);
avApp.set('developer', app.developer);
avApp.set('description', app.description);
avApp.set('feature', app.feature);
avApp.set('bigTypeSelected', app.bigTypeSelected);
avApp.set('childTypeSelected', app.childTypeSelected);
avApp.save(null, {
success: function (resp) {
// console.log('av resp = ', resp);
app.id = resp.id;
var url = '?appid=' + app.id;
History.pushState({data: 'published', id: app.id}, app.title + app.character, url);
// 显示刚刚发布的应用详情页面
appid = app.id;
renderAppDetail(app, appid);
},
error: function (error) {
console.log(error);
}
});
// 安装
}).on('click', 'a.install', function () {
$('#result-popup .result-inner').html(pageData.popup);
$('#result-popup, #result-popup .overlay').velocity({
opacity: 1,
duration: 200
}, {
display: 'block'
});
$('#result-popup .result').velocity('transition.bounceDownIn', {
duration: 250
});
$('#result-popup .overlay, #result-popup .popup-close').click(function () {
$('#result-popup').velocity({
opacity: 0,
duration: 100
}, {
display: 'none'
});
});
// 分享
}).on('click', 'a.share', function () {
if (device.isP4) {
$('#share-popup').addClass('p4');
}
if (device.isWechat) {
$('#share-popup').addClass('wechat');
}
$('html').addClass('share-popup-enabled');
if ($('#share-popup').is(':hidden')) {
// var shareButtonsTpl = _.template($('script#shareButtonsTpl').html());
// $('.share-arrow-tips').velocity('stop').velocity('finish');
// var objURL = {};
// window.location.hash.replace(
// new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
// function ($0, $1, $2, $3) {
// objURL[$1] = $3;
// }
// );
appid = parseQueryString().appid || appid;
// $('.share-inner').html(shareButtonsTpl({
// // link : 'http://www.wandoujia.com/campaign/aprilfool2015/?appid=' + ID
// }));
$('#share-popup, #share-popup .overlay').velocity({
opacity: 1
}, {
display: 'block'
});
shareShowed = true;
// 关闭分享弹层
$('#share-popup .overlay, #share-popup .cancel').click(function () {
$('html').removeClass('share-popup-enabled');
$('#share-popup').velocity({
opacity: 0
}, {
display: 'none'
});
if (!device.isP4) {
$('#qrcode').empty();
}
campaignTools.pushGaEvent('appmaker', 'closeShare', '');
});
} else {
$('#share-popup').velocity({
opacity: 1
}, {
display: 'block'
});
}
// if (!shareBtnActionSetuped) {
shareBtnActionSetup();
// }
});
// 显示加载
function showLoading(str) {
$('html').addClass('loading');
$('.loading-wrap').show().find('#text').html(str);
}
function removeLoading() {
setTimeout(function () {
$('html').removeClass('loading');
$('.loading-wrap').hide().find('#text').html('');
}, 700);
// 重新把页面定位到顶部
$('body').scrollTo(0, 0);
$('#wrap').scrollTo(0, 0);
}
// 分享按钮的行为
function shareBtnActionSetup() {
var minisiteUrl = 'http://www.wandoujia.com/campaign/appmaker/?appid=' + appid;
var UTM = {
'weibo': '&utm_source=weibo&utm_medium=sns&utm_campaign=appmaker',
'wechat': '&utm_source=wechat&utm_medium=sns&utm_campaign=appmaker'
};
// console.log('appObject', appObject);
shareWordObj.paragraph = shareWordObj.word[0] + '「' + appObject.title + appObject.character + '」的App,' + appObject.description.replace(/<br>/g, '') + shareWordObj.word[1];
var imgUrl = $('.screenshot img').attr('src');
if (device.isP4) {
$('.share-weibo').click(function () {
campaignTools.runAppShare(shareWordObj.paragraph, shareWordObj.paragraph, imgUrl, minisiteUrl + UTM.weibo, 'SINA_WEIBO');
});
$('.share-wechat').click(function () {
campaignTools.runAppShare(shareWordObj.wechatShareObj.title, shareWordObj.wechatShareObj.description, shareWordObj.wechatShareObj.imgUrl, minisiteUrl + UTM.wechat, 'WECHAT');
});
$('.share-wechat-timeline').click(function () {
campaignTools.runAppShare('我创业了!我开发了一款 App 叫做「' + shareWordObj.wechatShareObj.title + '」,跪求支持!', shareWordObj.wechatShareObj.description, shareWordObj.wechatShareObj.imgUrl, minisiteUrl + UTM.wechat, 'WECHAT_TIMELINE');
});
} else {
// 分享到微博
var weiboURL = 'http://service.weibo.com/share/share.php?appkey=1483181040&relateUid=1727978503&url=' + encodeURIComponent(minisiteUrl + UTM.weibo) + '&title=' + encodeURIComponent(shareWordObj.paragraph) + '&pic=' + imgUrl;
$('.share-weibo').click(function () {
window.open(weiboURL);
});
// 分享到微信
$('.share-wechat').click(function () {
var qr = $('#qrcode');
// 微信内
if (device.isWechat) {
var tipsImg = 'http://t.wdjcdn.com/upload/mkt-campaign/aprilfool2015/wechat-share-tips.png';
qr.html('<img id="wechat-share-tips-img" src="' + tipsImg + '">');
} else {
var shareQRcodeTpl = _.template($('script#shareQRcodeTpl').html());
qr.html(shareQRcodeTpl({
qrcodeUrl: minisiteUrl + UTM.wechat
}));
}
// 关闭二维码弹层
$('.dialog-close').click(function () {
qr.empty();
campaignTools.pushGaEvent('appmaker', 'closeQrcode', '');
});
});
}
shareBtnActionSetuped = true;
}
// setup wechat share
function wechatShareSetup() {
$.ajax({
url: 'http://who.wandoujia.com/wx-corp/js-sdk',
type: 'POST',
data: {
url: location.href.split('#')[0] // 将当前URL地址上传至服务器用于产生数字签名
// url: 'http://www.wandoujia.com/campaign/appmaker/'
}
}).done(function (r) {
// alert(location.href.split('#')[0]);
// 返回了数字签名对象
// console.log(r);
// console.log(r.appId);
// console.log(r.timestamp);
// console.log(r.nonceStr);
// console.log(r.signature);
// 开始配置微信JS-SDK
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: r.appId, // 必填,公众号的唯一标识
timestamp: r.timestamp, // 必填,生成签名的时间戳
nonceStr: r.nonceStr, // 必填,生成签名的随机串
signature: r.signature, // 必填,签名,见附录1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems'//,
// 'chooseImage'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
// alert(location.href.split('#')[0]);
// alert(JSON.stringify(shareWordObj.wechatShareObj));
// function initTimelineShare() {
wx.onMenuShareTimeline({
// title: '这是一个测试',
title: '我创业了!我开发了一款 App 叫做「' + shareWordObj.wechatShareObj.title + '」,跪求支持!', // 分享标题
link: shareWordObj.wechatShareObj.link + 'utm_source=wechatTimeline&utm_medium=sns&utm_campaign=appmaker', // 分享链接
imgUrl: shareWordObj.wechatShareObj.imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
// alert('分享成功');
campaignTools.pushGaEvent('appmaker', 'wechatWebviewShare', 'wechatTimeLine');
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
// }
// function initFriendShare() {
wx.onMenuShareAppMessage({
title: shareWordObj.wechatShareObj.title, // 分享标题
desc: shareWordObj.wechatShareObj.description, // 分享描述
link: shareWordObj.wechatShareObj.link + 'utm_source=wechatFriend&utm_medium=sns&utm_campaign=appmaker', // 分享链接
imgUrl: shareWordObj.wechatShareObj.imgUrl, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
campaignTools.pushGaEvent('appmaker', 'wechatWebviewShare', 'wechatFriend');
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
// }
// initTimelineShare();
// initFriendShare();
});
});
}
// function resetWechatShare() {
// }
function trackEvent(opt) {
if (typeof ga !== 'undefined' && ga) {
var _act, _cat, _lbl, _val;
if (opt) {
_cat = opt.category || '';
_act = opt.action || '';
_lbl = opt.label || '';
_val = opt.value || 0;
return ga('send', 'event', _cat, _act, _lbl, _val);
}
}
}
// 可绑定 html 中的对应元素的点击事件
function GAEventBinderInit() {
if (typeof ga !== 'undefined' && ga) {
$('body').on('click', 'a[data-track]', function (e) {
var trackCode = $(this).data('track');
var codes = trackCode.split('/');
if (codes.length > 2) {
trackEvent({
category: codes[0],
action: codes[1],
label: codes[2]
});
}
});
}
}
GAEventBinderInit();
// 时间转换 by 奶瓶
function moment(timestamp) {
var dateTarget = new Date(timestamp.replace(/-/g, '/')); // fix for iOS e.g: http://stackoverflow.com/questions/5324178/javascript-date-parsing-on-iphone
var dateCurrent = new Date();
var textMinute = dateTarget.getMinutes();
var textHour = dateTarget.getHours();
if (textMinute < 10) {
textMinute = '0' + dateTarget.getMinutes();
}
if (textHour < 10) {
textHour = '0' + dateTarget.getHours();
}
var textTime = textHour + ':' + textMinute;
var textDate = (dateTarget.getMonth() + 1) + '月' + dateTarget.getDate() + '日';
var textYear = dateTarget.getFullYear() + '年';
var seconds = Math.floor((dateCurrent - dateTarget) / 1000);
if (seconds === 0 || seconds < 0) {
return '刚刚';
}
if (seconds < 5) {
return ' ' + seconds + ' 秒前';
}
if (seconds < 10) {
return ' 5 秒前';
}
if (seconds < 60) {
return ' ' + Math.floor(seconds / 10) * 10 + ' 秒前';
}
if (seconds < 3600) {
return ' ' + Math.floor(seconds / 60) + ' 分钟前';
}
if (seconds < 60 * 70) {
return ' 1 小时前';
}
if (dateTarget.getFullYear() === dateCurrent.getFullYear()) {
if (dateTarget.getMonth() === dateCurrent.getMonth() &&
dateCurrent.getDate() - dateTarget.getDate() < 2) {
if (dateCurrent.getDate() - dateTarget.getDate() === 0) {
return '今天 ' + textTime;
}
return '昨天 ' + textTime;
// @TODO 0331-0401 也要显示昨天
}
return ' ' + textDate + ' ' + textTime;
}
return ' ' + textYear + textDate + ' ' + textTime;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment