游戏外包代码示例

game.js

// 需调用的插件：
// 1 微信 SDK: jweixin-1.0.0.js
// 2 豌豆荚 campaign SDK: campaignTools.js
// 3 豌豆荚 account SDK: snappea-account-hook.js


// 设备信息
var device = {
    isP4 : campaignTools.UA.inWdj, // 豌豆荚客户端 P4
    isWechat : campaignTools.UA.inWechat, // 微信
    isRetina : window.devicePixelRatio && window.devicePixelRatio > 1,
    isPC : campaignTools.inPC,
    isAndroid : campaignTools.UA.inAndroid,
    isiOS : campaignTools.UA.inIos
};

var isLogin = false; // 是否已经登录

var UDID;

var packageName = '包名';
var appstore = 'app store 的 URL'; // 看需求是否需要针对 iOS 端的逻辑做处理

// 页面 URL
var minisiteUrl = 'http://www.wandoujia.com/campaign/活动名称/';

// GA UTM
var UTM = {
    'weibo': '?utm_source=weibo&utm_medium=sns&utm_campaign=活动名称',
    'wechatFriend': '?utm_source=wechatFriend&utm_medium=sns&utm_campaign=活动名称',
    'wechatTimeline': '?utm_source=wechatTimeline&utm_medium=sns&utm_campaign=活动名称',
    // 扫描站内二维码的回流
    'qrcode': '?utm_source=qrcode&utm_medium=minisite&utm_campaign=活动名称'
};

// 分享文案
var share = {
    'weibo': {
        'description': '分享到微博时的分享文案',
        'img': 'http://t.wdjcdn.com/upload/mkt-campaign/pizzahut/weiboShareImg.jpg' //微博分享配图
    },
    'wechatTimeline': {
        'title': '分享到朋友圈时的标题',
        'img': 'http://t.wdjcdn.com/upload/mkt-campaign/pizzahut/wechatPic.png' // 朋友圈分享配图
    },
    'wechatFriend': {
        'title' : '分享给微信好友时的标题',
        'description': '分享到微信好友时的简介',
        'img': 'http://t.wdjcdn.com/upload/mkt-campaign/pizzahut/wechatPic.png' // 微信好友分享配图（看需求，可以跟朋友圈的配图用一张）
    }
};





var app; // 存放从 API 取回的应用信息

var api = {
    apps: 'http://www.wandoujia.com/api/apps/apps',
    opt_fields: '?opt_fields=title,icons.*,apks.*.size,apks.*.bytes,apks.*.downloadUrl.*.url,apks.*.creation,apks.*.versionName,,apks.*.versionCode,installedCountStr'
};

// 从 API 取应用信息
getAppData();

// 获取对应的 app 数据
function getAppData() {
    var url = api.apps + '/' + packageName + api.opt_fields;
    common.getData(url, function (resp) {
        app = resp;

        checkInstalledAndUpdate();
    });
}


// P4 内 检查应用是否已经安装 和 是否需要更新
function checkInstalledAndUpdate () {
    if (device.isP4) {

        var installed = false; // 是否已经安装
        var needUpdate = false; // 是否需要更新

        // 判断某应用是否已经安装
        if (campaignTools.isInstalled('包名')) {
            console.log('已经安装');
            installed = true;

            // 判断是否需要更新
            var localVersion = campaignTools.getAppVersionCode('包名');
            var LatestVersion = app.apks[0].versionCode; // 从 APPS API 中取回的 versionCode

            if (localVersion < LatestVersion) {
                console.log('需要更新');
                needUpdate = true;
                // do something
                // 替换「安装」按钮为「更新」按钮
            } else {
                console.log('不需要更新');
                // do something
                // 比如替换「安装」按钮为「打开」按钮
            }
        } else {
            console.log('未安装');
        }
    }
}


// 安装(更新)打开应用
// 安装应用
$('body').on('click', '.install-app', function () {

    // iOS
    if (device.isiOS && device.isWechat) {
        campaignTools.pushGaEvent('活动名称', 'installApp', 'iOS');

        // 弹「暂不支持」的提示
        // 或者跳转到应用所在的 app store 页面


    // android 版微信
    } else if (device.isAndroid && device.isWechat) {
        campaignTools.pushGaEvent('活动名称', 'installApp', 'android-wechat');

        // 提示点击右上角，用浏览器打开
        

    // iOS 其他，如 safari ，iOS 版微博 等
    // 直接调起 app store
    } else if (device.isiOS) {
        // location.href = 'itms-apps://' + appstore;
        location.href = 'https://' + appstore;

    // // 豌豆荚 P4
    } else if (device.isP4) {
        if (needUpdate) {
            campaignTools.pushGaEvent('活动名称', 'updateApp', 'P4');
        } else {
            campaignTools.pushGaEvent('活动名称', 'installApp', 'P4');
        }

        campaignTools.toast('正在安装, 请稍候');

        // 调用 P4 的应要安装接口
        window.campaignPlugin.install(packageName, app.apks[0].downloadUrl.url, app.title, app.icons.px100, app.apks[0].bytes);

        $(this).html('安装中');

        // 判断是否已经安装完成
        var timer = setInterval(function () {
            if (campaignTools.isInstalled(packageName)) {
                // $('.action').addClass('installed');
                // do somthing
                // 比如替换「安装」或者「更新」按钮为「打开」
                clearInterval(timer);
            }
        }, 3000);
    // 其他 andorid 浏览器
    // 直接下载 apk
    } else if (device.isAndroid) {
        campaignTools.pushGaEvent('活动名称', 'installApp', 'andorid-other');
        location.href = app.apks[0].downloadUrl.url;

    // PC 端，打开 web 端 APPS详情页面  
    } else if (device.isPC) {
        campaignTools.pushGaEvent('活动名称', 'installApp', 'PC');
        location.href = 'http://www.wandoujia.com/apps/' + packageName;
    }
});

// P4 中打开应用
$('body').on('click', '.open-app', function () {
    campaignTools.pushGaEvent('活动名称', 'openApp', packageName);
    campaignTools.openApp(packageName);
});








// ============
// 登录相关
// ============

// 如果是 P4
if (device.isP4) {
    // 得到用户的 UDID 
    UDID = campaignTools.getUDID();
    
    // 同步登录状态
    syncAuth();
}

// 页面一打开时判断是否已经登录
checkLogin();


// e.g
// 点击某按钮后，判断用户是否已经登录 
// 如果没登录，并且不是在 P4 内，则跳转到 web 端豌豆荚账号登录网页
// 如果没登录，而且是在 P4 内，则调起 P4 的登录页

$('a.subscribe').click(function () {
    // 先去检查一下是不是有 wdj_auth 的 cookie 了
    // 用户在 P4 中未登录，点击「关注」按钮，跳转到 P4 的登录页面
    // 登录后，再回到 webview 中，这时，webview 是没法知道用户已经登录的（因为返回时没有 callback）
    // 所以需要在用户再次点击「关注」按钮时，通过检查 cookie 中是不是已经存在 wdj_auth 来获知用户是不是已经登录
    if (device.isP4) {

        syncAuth();

        if (isLogin) {
            // console.log('P4 内已登录');
            // do somthing
        } else {
            // console.log('P4 内未登录');
            // 去登录
            window.campaignPlugin.loginAccount();
            // window.campaignPlugin.startActivity('intent:#Intent;component=com.wandoujia.phoenix2/com.wandoujia.p4.account.activity.PhoenixAccountActivity;end');
        }
    } else {
        if (isLogin) {
            // console.log('P4 外已登录');
            // do someting
        } else {
            // console.log('P4 外未登录');
            // 去登录
            var location = encodeURIComponent(window.location.href);
            window.location.href = 'http://www.wandoujia.com/account/web.html?do=login&callback=' + location;
        }
    }
});


// 同步 P4 中的登录状态
function syncAuth() {
    // 把 P4 里的 wdj_auth 放到 webview 的页面中
    var auth = window.campaignPlugin.getUserAuth();
    // 如果拿到了 auth 并且 webview 本身没有 wdj_auth(说明未登录)
    if (auth && $.cookie('wdj_auth') === undefined) {
        // 保存 auth
        $.cookie('wdj_auth', auth, {
            path: '/',
            domain: '.wandoujia.com'
        });
        // 将状态设为已登录
        isLogin = true;
    }
}

// 判断用户是否已登录
// 兼容 P4 和 web
function checkLogin() {
    if (device.isP4) {
        if (window.campaignPlugin.isLogin() || $.cookie('wdj_auth') !== undefined) {
            bodu.isLogin = true;
        }
    } else {
        SnapPea.AccountHook.checkAsync().then(function (resp) {
            bodu.isLogin = resp.isLoggedIn;
        });
    }
}




// 常用
var common = {
    // 通过接口获取数据
    getData: function (url, sucessCallback, errorCallback) {
        $.ajax({
            url : url,
            dataType: 'json',
            xhrFields : {
                withCredentials : false
            },
            success : function (resp) {
                sucessCallback(resp);
            },
            error : function (error) {
                console.log(error);
                errorCallback(error);
            }
        });
    },

    // // 获取 url 中的 value
    // parseQueryString: function () {
    //     var str = window.location.search;
    //     var objURL = {};
    //     str.replace(
    //         new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
    //         function ($0, $1, $2, $3) {
    //             objURL[$1] = $3;
    //         }
    //     );
    //     return objURL;
    // }
};









// ========================================
//  分享部分的逻辑代码
// ========================================

// 页面内分享按钮的点击事件，
// 视情况而执行此方法
shareBtnActionSetup();

// 微信内的分享
if (device.isWechat) {
    wechatShareSetup();
}

// 分享按钮的行为
// 微博 & 微信好友 & 微信朋友圈
function shareBtnActionSetup() {
    if (device.isP4) {
        $('.share-weibo').click(function () {
            campaignTools.toast('正在打开微博，请稍候...');
            campaignTools.pushGaEvent('活动名称', 'P4Share', 'weibo');
            campaignTools.runAppShare(share.weibo.description, share.weibo.description, share.weibo.img, minisiteUrl + UTM.weibo, 'SINA_WEIBO');
        });

        $('.share-wechat-friend').click(function () {
            campaignTools.toast('正在打开微信，请稍候...');
            campaignTools.pushGaEvent('活动名称', 'P4Share', 'wechatFriend');

            campaignTools.runAppShare(share.wechatFriend.title, share.wechatFriend.description, share.wechatFriend.img, minisiteUrl + UTM.wechatFriend, 'WECHAT');
        });

        $('.share-wechat-timeline').click(function () {
            campaignTools.toast('正在打开微信，请稍候...');
            campaignTools.pushGaEvent('活动名称', 'P4Share', 'wechatTimeline');
            campaignTools.runAppShare(share.wechatTimeline.title, share.wechatTimeline.title, share.wechatTimeline.img, minisiteUrl + UTM.wechatTimeline, 'WECHAT_TIMELINE');
        });

    } else {

        // 分享到微博
        // 跳转页面
        var weiboURL = 'http://service.weibo.com/share/share.php?appkey=1483181040&relateUid=1727978503&url=' + encodeURIComponent(minisiteUrl + UTM.weibo) + '&title=' + encodeURIComponent(share.weibo.description) + '&pic=' + share.weibo.img;
        $('.share-weibo').click(function () {
            campaignTools.pushGaEvent('活动名称', 'share', 'weibo');

            window.location.href = weiboURL;
        });

        // 分享到微信
        $('.share-wechat-friend, .share-wechat-timeline').click(function () {

            // 微信内
            // 提示点击右上角
            if (device.isWechat) {
                // GA 事件统计
                if ($(this).hasClass('share-wechat-friend')) {
                    campaignTools.pushGaEvent('活动名称', 'share', 'wechat-friend-wechatTips');
                } else if ($(this).hasClass('share-wechat-timeline')) {
                    campaignTools.pushGaEvent('活动名称', 'share', 'wechat-timeline-wechatTips');
                }
                var tipsImg = 'http://t.wdjcdn.com/upload/mkt-campaign/pizzahut/wechatShareTips.png'; // 提示点击右上角的图片

                // 弹出提示图片
                // $('body').append('<div class="overlay"></div><div class="popup wechat-image"><img width="200" id="wechat-share-tips-img" src="' + tipsImg + '" /></div>');

            // 微信外
            // 弹二维码 提示用微信扫描
            } else {
                // GA 事件统计
                if ($(this).hasClass('share-wechat-friend')) {
                    campaignTools.pushGaEvent('活动名称', 'share', 'wechat-friend-qrcode');
                } else if ($(this).hasClass('share-wechat-timeline')) {
                    campaignTools.pushGaEvent('活动名称', 'share', 'wechat-timeline-qrcode');
                }

                // 弹出二维码层
                // var popup = {
                //     title: '分享到微信',
                //     content: '<div class="center"><img class="qrcode" width="150" src="http://www.wandoujia.com/qr?s=5&c=' + encodeURIComponent(minisiteUrl + UTM.qrcode) + '" /></div><p>用微信扫描二维码，就可以分享到好友或朋友圈了</p>',
                //     button: '关 闭'
                // };
                // render.renderPopoup(popup);
            }
        });
    }
}

// 微信 webview 内，点击右上角，分享到朋友圈和好友
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) {
        // 返回了数字签名对象
        // 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函数中。

            wx.onMenuShareTimeline({
                title: share.wechatTimeline.title, // 分享标题
                link: minisiteUrl + UTM.wechatTimeline, // 分享链接
                imgUrl: share.wechatTimeline.img, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                    campaignTools.pushGaEvent('活动名称', 'wechatWebviewShare', 'wechatTimeLine');
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            wx.onMenuShareAppMessage({
                title: share.wechatTimeline.title, // 分享标题
                desc: share.wechatFriend.description, // 分享描述
                link: minisiteUrl + UTM.wechatFriend, // 分享链接
                imgUrl: share.wechatFriend.img, // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    campaignTools.pushGaEvent('活动名称', 'wechatWebviewShare', 'wechatFriend');
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        });

    });
}