Last active
August 29, 2015 14:11
-
-
Save naoyeye/3a53bf8ae10d89139664 to your computer and use it in GitHub Desktop.
P4 webview 相关接口的代码片段参考
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* @Author: hanjiyun@wandoujia.com | |
* @Date: 2014-12-17 19:50:08 | |
* @Last Modified by: hanjiyun@wandoujia.com | |
* @Last Modified time: 2014-12-17 20:04:19 | |
*/ | |
// 判断是不是在 P4 中 | |
if (window.campaignPlugin) { | |
// 是 P4 | |
} | |
// P4 中判断应用是否已经安装 | |
if (window.campaignPlugin.isInstalled('应用包名')) { | |
// 已安装 | |
} else { | |
// 未安装 | |
} | |
// 根据包名获取应用标题、图标等相关信息 | |
// API 接口 | |
var api = { | |
apps: 'http://www.wandoujia.com/api/apps/apps', | |
opt_fields: '?opt_fields=title,icons.px100,apks.*.size,apks.*.bytes,apks.*.downloadUrl.*.url' | |
}; | |
var app = {}; | |
function getAppData(packageName) { | |
// 组装接口链接 | |
var url = api.apps + '/' + packageName + api.opt_fields; | |
// 发送请求 | |
$.ajax({ | |
url : url, | |
dataType: 'json', | |
success : function (resp) { | |
app.title = resp.title; | |
app.bytes = resp.apks[0].bytes; | |
app.size = resp.apks[0].size; | |
app.downloadUrl = resp.apks[0].downloadUrl.url; | |
app.icon = resp.icons.px100; // 也有 256 或者其他尺寸,可以自己在 resp 中看一下 | |
}, | |
error : function (error) { | |
console.log(error); | |
} | |
}); | |
} | |
// P4 中安装应用 | |
// demo | |
$('.app-card .install').click(function () { | |
var card = $(this).parents('.app-card'); | |
var packageName = card.attr('data-packagename'); // 包名 | |
var downloadUrl = card.attr('data-downloadUrl'); // 下载链接 | |
var title = card.attr('data-title'); // 应用 title | |
var icon = card.attr('data-icon'); // 应用 icon | |
var bytes = card.attr('data-size'); // 应用大小 (可以为空,但是千万不能和实际大小不一致,为空时也可以安装) | |
window.campaignPlugin.toast('开始安装' + title); | |
window.campaignPlugin.install(packageName, downloadUrl, title, icon, bytes); | |
}); | |
// P4 中打开应用 | |
// demo | |
$('.app-card .open').click(function () { | |
packageName = $(this).attr('data-packagename'); | |
window.campaignPlugin.openAppDetail(packageName); | |
}); | |
// P4 中调起应用详情页(如果得过设计奖会先转入设计奖页面) | |
window.campaignPlugin.openAppDetail('应用包名'); | |
// P4 中调起应用详情页(即使得过设计奖也会绕过设计奖直接打开应用详情页) | |
window.campaignPlugin.openAppDetailWithoutAward('应用包名'); | |
// 发 toast 提示 | |
// 比如,用户点击「安装」按钮后,可以发一个”正在安装...“的 toast,会显示在屏幕下方,自动消失 | |
window.campaignPlugin.toast('这是文字信息'); | |
// 得到 UDID | |
var udid = window.campaignPlugin.getUDID(); | |
// 得到 UID | |
var uid = window.campaignPlugin.getUID(); | |
// 得到用户昵称 | |
var nickname = window.campaignPlugin.getNickName(); | |
// 得到用户头像 | |
var avatar = window.campaignPlugin.getAvatar(); | |
// 得到用户邮箱 | |
var email = window.campaignPlugin.getUserEmail(); | |
// 得到手机号码 | |
var phoneNumber = window.campaignPlugin.getUserPhoneNumber(); | |
// 调起登录窗口 | |
window.campaignPlugin.loginAccount(); | |
// 同步 P4 中的登录信息 | |
// 会把 P4 里的 wdj_auth 放到 webview 的页面中 | |
// 可以用 jqeury-cookie 的插件 | |
function syncAuth() { | |
var auth = window.campaignPlugin.getUserAuth(); | |
// 如果拿到了 auth 并且 webview 本身没有 wdj_auth(说明未登录) | |
if (auth && $.cookie('wdj_auth') === undefined) { | |
// 保存 auth | |
$.cookie('wdj_auth', auth, { | |
path: '/', | |
domain: '.wandoujia.com' | |
}); | |
// 将状态设为已登录 | |
bodu.isLogin = true; | |
} | |
} | |
// P4 中检查是否已经登录 | |
if (window.campaignPlugin.isLogin()) { | |
// 已登录 | |
} | |
// 兼容多平台的检查登录 | |
// 需要调用 snappea-account-hook.js | |
// https://github.com/wandoulabs/Account-JavaScriptSDK | |
var isLogin = false; | |
function checkLogin() { | |
// 如果是 P4 | |
if (window.campaignPlugin) { | |
if (window.campaignPlugin.isLogin() || $.cookie('wdj_auth') !== undefined) { | |
isLogin = true; | |
} | |
// P4 外 | |
} else { | |
SnapPea.AccountHook.checkAsync().then(function (resp) { | |
resp.isLoggedIn; // true || false | |
}); | |
} | |
} | |
// 设置剪贴板文字 | |
window.campaignPlugin.setClipboardText('字符串'); | |
// 分享 | |
// 分享的文案等信息 | |
var shareData = { | |
// 上传到 CDN 的二维码图片 url | |
"qr": "http://img.wdjimg.com/static-files/itoa/mkt-campaign/Qdaily/Qdaily-qr-code.png", | |
// 微博 | |
"weibo": { | |
"title": "豌豆荚·摇出你的好奇心", // 似乎没用到哦 | |
"desc": "在豌豆荚摇出你的好奇心,即有机会获得美国队长移动电源!#豌豆荚摇出好奇心#", // 微博内容 | |
"UTM": "http://www.wandoujia.com/campaign/Qdaily?utm_source=weibo&utm_medium=sns&utm_campaign=Qdaily", // 分享出去的链接 | |
"image": "http://img.wdjimg.com/static-files/itoa/mkt-campaign/Qdaily/Qdaily-share-weibo2.jpg" // 分享图 | |
}, | |
// 微信好友 | |
"wechatFriend": { | |
"title": "豌豆荚·摇出你的好奇心", | |
"desc": "豌豆荚摇出好奇心日报,邀你一起看到更大更美好的世界!", | |
"UTM": "http://www.wandoujia.com/campaign/Qdaily?utm_source=weixin&utm_medium=sns&utm_campaign=Qdaily", | |
"image": "http://img.wdjimg.com/static-files/itoa/mkt-campaign/Qdaily/Qdaily-share-wechat.jpg" | |
}, | |
// 微信朋友圈儿 | |
"wechatTimeline": { | |
"title": "豌豆荚·摇出你的好奇心", | |
"desc": "豌豆荚摇出好奇心日报,邀你一起看到更大更美好的世界!", | |
"UTM": "http://www.wandoujia.com/campaign/Qdaily?utm_source=weixin&utm_medium=sns&utm_campaign=Qdaily", | |
"image": "http://img.wdjimg.com/static-files/itoa/mkt-campaign/Qdaily/Qdaily-share-wechat.jpg" | |
}, | |
// 豆瓣儿 | |
"douban" : { | |
"title": "豌豆荚·摇出你的好奇心", | |
"desc": "豌豆荚摇出好奇心日报,邀你一起看到更大更美好的世界!", | |
"UTM": "http://www.wandoujia.com/campaign/Qdaily?utm_source=douban&utm_medium=sns&utm_campaign=Qdaily", | |
"image": "http://img.wdjimg.com/static-files/itoa/mkt-campaign/Qdaily/Qdaily-share-douban.jpg" | |
} | |
// .... | |
// 其他的也可以参考上述格式 | |
}; | |
// 弹窗是否已打开 | |
shareDialogRendered = false; | |
// 分享按钮的逻辑 | |
function shareButtonControl() { | |
// 分享到微博 | |
var weiboURL = 'http://service.weibo.com/share/share.php?appkey=1483181040&relateUid=1727978503&url=' + encodeURIComponent(shareData.weibo.UTM) + '&title=' + encodeURIComponent(shareData.weibo.desc) + '&pic=' + shareData.weibo.image; | |
// 重写 URL | |
$('.share-weibo').attr('href', weiboURL).attr('target', '_default'); | |
// GA 统计 | |
$('body').on('click', '.share-weibo', function () { | |
trackEvent({category: 'Qdaily', action: 'share', label: 'weibo'}); // 这是一个另外的函数,我写在最下面了 | |
}); | |
// 分享到豆瓣 | |
var doubanURL = 'http://www.douban.com/share/service?bm=1&image=' + encodeURIComponent(shareData.douban.image) + '&href=' + encodeURIComponent(shareData.douban.UTM) + '&updated=&name=' + encodeURIComponent(shareData.douban.title) + '&text=' + encodeURIComponent(shareData.douban.desc); | |
$('.share-douban').attr('href', doubanURL).attr('target', '_default'); | |
// 豆瓣分享点击 GA | |
$('body').on('click', '.share-douban', function () { | |
trackEvent({category: 'Qdaily', action: 'share', label: 'douban'}); | |
}); | |
// 如果是 P4 ,则调用 P4 的分享接口 | |
// 目前 P4 的分享接口只支持 微信好友 微信朋友圈 新浪微博 | |
if (device.isP4) { | |
// // 如果安装了微信 | |
if (isInstalled('com.tencent.mm')) { | |
// 分享给微信好友 | |
$('body').on('click', '.share-wechat', function () { | |
trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_friend'}); | |
// window.campaignPlugin.shareTo() 是 P4 的分享接口 | |
// 其中 image 为分享的图片 url | |
// url 为 分享到第三方的链接 | |
// platform 为分享平台,目前支持 SINA_WEIBO, WECHAT, WECHAT_TIMELINE | |
// window.campaignPlugin.shareTo(String title, String content, String image, String url, String platform) | |
window.campaignPlugin.shareTo(shareData.wechatFriend.title, shareData.wechatFriend.desc, shareData.wechatFriend.image, shareData.wechatFriend.UTM, 'WECHAT'); | |
}); | |
// 分享给微信朋友圈 | |
$('body').on('click', '.share-wechat-timeline', function () { | |
trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_timeline'}); | |
window.campaignPlugin.shareTo(shareData.wechatTimeline.title, shareData.wechatTimeline.desc, shareData.wechatTimeline.image, shareData.wechatTimeline.UTM, 'WECHAT_TIMELINE'); | |
}); | |
} else { | |
// 没安装微信的话 | |
// 隐藏掉「分享到朋友圈」的 icon | |
$('.share-wechat-timeline').hide(); | |
// 分享到微信时还是弹出二维码 | |
$('body').on('click', '.share-wechat', function () { | |
window.campaignPlugin.toast('未安装微信'); | |
trackEvent({category: 'Qdaily', action: 'share', label: 'wechat'}); | |
if (!shareDialogRendered) { | |
renderQRCodeShareTpl(); | |
shareDialogRendered = true; | |
} | |
}); | |
} | |
// 如果安装了新浪微博 | |
// 前面已经给微博增加了 URL,所以如果没安装微博的话, | |
// 用户点击时会直接跳转到 html 页面 | |
if (isInstalled('com.sina.weibo')) { | |
// 分享到微博 | |
$('body').on('click', '.share-weibo', function (e) { | |
// 之前已经给微博链接加上 url 了 | |
// 这里需要先阻止链接跳转 | |
e.preventDefault(); | |
window.campaignPlugin.shareTo(shareData.weibo.title, shareData.weibo.desc, shareData.weibo.image, shareData.weibo.UTM, 'SINA_WEIBO'); | |
}); | |
} | |
// P4 外的所有情况 | |
// 因为网页中没法直接分享到朋友圈和微信好友 | |
// 所以这时候朋友圈的 icon 已经通过 css 隐藏 | |
// 点击微信 icon , 弹出提示框 | |
} else { | |
// 点击分享到微信时 | |
$('body').on('click', '.share-wechat', function () { | |
// GA event track | |
trackEvent({category: 'Qdaily', action: 'share', label: 'wechat'}); | |
// 如果是在微信中 | |
// 弹出专门针对微信的提示框 | |
if (device.isWechat) { | |
// 防止二次弹出 | |
if (!shareDialogRendered) { | |
renderWechatShareTpl(); | |
shareDialogRendered = true; | |
} | |
// 弹出二维码提示框 | |
} else { | |
if (!shareDialogRendered) { | |
renderQRCodeShareTpl(); | |
shareDialogRendered = true; | |
} | |
} | |
}); | |
} | |
// 初始化关闭弹窗的操作 | |
closeShareDialog(); | |
}, | |
// 微信分享接口 | |
wechatShareApiInit : function () { | |
// 微信内发送给朋友 | |
function shareFriend() { | |
WeixinJSBridge.invoke('sendAppMessage', { | |
'appid': 'wxed6dfca0ae67f7a3', | |
'img_url': shareData.wechatFriend.image, | |
'img_width': '640', | |
'img_height': '640', | |
'link': shareData.wechatFriend.UTM, | |
'desc': shareData.wechatFriend.desc, | |
'title': shareData.wechatFriend.title | |
}, function (res) { | |
// 分享成功后调用 | |
console.log('分享成功'); | |
_report('send_msg', res.err_msg); | |
}); | |
} | |
// 微信内分享到朋友圈 | |
function shareTimeline() { | |
WeixinJSBridge.invoke('shareTimeline', { | |
'appid': 'wxed6dfca0ae67f7a3', | |
'img_url': shareData.wechatTimeline.image, | |
'img_width': '640', | |
'img_height': '640', | |
'link': shareData.wechatTimeline.UTM, | |
'desc': shareData.wechatTimeline.desc, | |
'title': shareData.wechatTimeline.title | |
}, function (res) { | |
// 分享成功后调用 | |
console.log('分享成功'); | |
_report('timeline', res.err_msg); | |
}); | |
} | |
// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。 | |
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { | |
// 分享到朋友圈 | |
WeixinJSBridge.on('menu:share:timeline', function (argv) { | |
bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_timeline'}); | |
shareTimeline(); | |
}); | |
// 发送给好友 | |
WeixinJSBridge.on('menu:share:appmessage', function (argv) { | |
bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_friend'}); | |
shareFriend(); | |
}); | |
}, false); | |
}, | |
// 关闭二维码弹窗和微信内的右上角弹窗提示 | |
// closeShareDialog: function () { | |
// $('body').on('click', '.dialog-close', function () { | |
// $('.dialog-wrap, .share-qrcode-wrap').remove(); | |
// $('body').removeClass('show-dialog'); | |
// bodu.shareDialogRendered = false; | |
// }); | |
// }, | |
/*****************************************************************/ | |
/* GA 事件追踪 | |
/*****************************************************************/ | |
/** | |
* -->调用方式:trackEvent({category: string, action: string, label: string}); | |
*/ | |
trackEvent: function (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); | |
} | |
} | |
}, | |
// 方式 2 : | |
// 可绑定 html 中的对应元素的点击事件 | |
GAEventBinderInit: function () { | |
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) { | |
bodu.trackEvent({ | |
category: codes[0], | |
action: codes[1], | |
label: codes[2] | |
}); | |
} | |
}); | |
} | |
}, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment