Skip to content

Instantly share code, notes, and snippets.

@naoyeye
Last active August 29, 2015 14:11
Show Gist options
  • Save naoyeye/3a53bf8ae10d89139664 to your computer and use it in GitHub Desktop.
Save naoyeye/3a53bf8ae10d89139664 to your computer and use it in GitHub Desktop.
P4 webview 相关接口的代码片段参考
/*
* @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