LOL前端重构规范

# 游戏内MSDK

本组件适用于MSDKv5版本，如需支持其他版本请联系内部人员
游戏内页面系统兼容要求：Android>=5.1，IOS>=9
适配方案：优先考虑rem适配
注意事项：MSDK相关代码需放在body结构内最优先加载

# 使用示例：

Demo地址：https://lol.qq.com/plugin/msdk/demo.html

<script type="text/javascript" src="//lol.qq.com/plugin/msdk/msdk_ingame.js"></script>
// 初始化
msdkIngame.ready(function() {
    // 对应组件接口调用逻辑
    msdkIngame.setPortraitScreen();// 设置浏览器竖屏
    msdkIngame.setFullScreen();// 设置浏览器全屏
})

# 判断是否在MSDK内置浏览器环境

if(navigator.userAgent.indexOf("MSDK") > -1 || new URLSearchParams(location.search).get('isInMSDK') == 'True'){
    //在MSDK内置浏览器环境
}

# 关闭MSDK内置浏览器：

msdkIngame.closeWebView();

# 设置浏览器全屏：（若设置浏览器全屏请务必在页面内加返回游戏界面按钮）

msdkIngame.setFullScreen();

# 还原浏览器全屏：

msdkIngame.reSetFullScreen();

# 设置浏览器横屏：

msdkIngame.setLandscapeScreen();

# 设置浏览器竖屏：

msdkIngame.setPortraitScreen();

# 设置浏览器页面前进：

msdkIngame.forward();

# 设置浏览器页面后退：

msdkIngame.back();

# 分享：

分享组件依赖PTT埋点上报（https://ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js）

# 分享类型支持情况：

分享类型/渠道 微信好友 微信朋友圈 QQ好友 QQ空间
文本 支持 支持 支持 支持
链接 支持 支持 支持 支持
图片 支持 支持 支持 支持
小程序 支持 不支持 不支持 不支持

# 初始化：

msdkIngame.share.init({
    title:"腾讯游戏",//选填项：分享标题，默认页面title
    desc:"分享描述",//选填项：分享描述，默认为空
    type:10001,//选填项：分享选项，10000代表分享文本，10001代表分享链接，10002代表分享图片，10006代表分享小程序（只支持微信小程序），默认10001(分享链接)
    url:"https://lol.qq.com/plugin/msdk/demo.html",//选填项：分享链接地址，默认为当前页面链接
    imgUrl:"https://game.gtimg.cn/images/lgamem/v2/common/share.png",//选填项：分享图片链接，当分享选项为分享图片和分享链接时必填，图片链接必须以https://开头
    hideMenuItems:[]//选填项：是否隐藏分享图标，按需填入"QZone","qq","weixin","timeline"
})

# 显示分享UI：

msdkIngame.share.showUI();

# 隐藏分享UI：

msdkIngame.share.hideUI();

# 分享信息整体更新：

msdkIngame.share.updateShare({
    title:"腾讯游戏更新",//选填项：分享标题，默认页面title
    desc:"分享描述更新"//选填项：分享描述，默认为空
})

# 分享信息单独平台更新：

//QQ
msdkIngame.share.updateShareQQ({
    title:"腾讯游戏qq",//选填项：分享标题，默认页面title
    desc:"分享描述qq"//选填项：分享描述，默认为空
})

//微信
msdkIngame.share.updateShareWX({
    title:"腾讯游戏wx",//选填项：分享标题，默认页面title
    desc:"分享描述wx"//选填项：分享描述，默认为空
})

# 分享选项更新

// 分享选项为文本
msdkIngame.share.updateShare({
    type:10000//选填项：分享选项，10000代表分享文本，10001代表分享链接，10002代表分享图片，10006代表分享小程序（只支持微信小程序），默认10001(分享链接)
})

// 分享选项为图片
msdkIngame.share.updateShare({
    type:10002,//选填项：分享选项，10000代表分享文本，10001代表分享链接，10002代表分享图片，10006代表分享小程序（只支持微信小程序），默认10001(分享链接)
    imgUrl:"https://game.gtimg.cn/images/lgamem/v2/common/share.png",//选填项：分享图片链接，当分享选项为分享图片和分享链接时必填，图片链接必须以https://开头
})

// 分享选项为链接
msdkIngame.share.updateShare({
    type:10001,//选填项：分享选项，10000代表分享文本，10001代表分享链接，10002代表分享图片，10006代表分享小程序（只支持微信小程序），默认10001(分享链接)
    url:"https://lol.qq.com/plugin/msdk/demo.html",//选填项：分享链接地址，默认为当前页面链接
})


// 分享选项为小程序（只支持微信小程序）
msdkIngame.share.updateShareWX({
    type:10006,//选填项：分享选项，10000代表分享文本，10001代表分享链接，10002代表分享图片，10006代表分享小程序（只支持微信小程序），默认10001(分享链接)
    wxAppId:"gh_392e594ef953",//选填项：分享微信小程序appid，当分享选项为小程序时必填
    wxPage:"pages/index/index",//选填项：分享微信小程序page url，当分享选项为小程序时必填
    wxmpType:"0",//选填项：指定小程序版本，当分享选项为小程序时必填，分为 Release(0)，Test(1)，Preview(2)三种版本类型，与小程序版本对应
})

# 分享单独触发

msdkIngame.share.click('wxf');//微信好友分享
msdkIngame.share.click('qqf');//QQ好友分享
msdkIngame.share.click('wxt');//微信朋友圈分享
msdkIngame.share.click('qqz');//QQ空间分享
msdkIngame.share.click('wxm');//微信小程序分享

# 分享统计

PTTSendClick("share","igwxf","分享给微信好友");
PTTSendClick("share","igqqf","分享给QQ好友");
PTTSendClick("share","igwxt","分享到微信朋友圈");
PTTSendClick("share","igqqz","分享到QQ空间");
PTTSendClick("share","igwxm","分享到微信小程序");

# 游戏内异形屏适配

适配原则：安卓和IOS使用同一套样式，针对2:1宽高比的设备统一使用异形屏处理

# 使用示例：

Demo地址：https://lol.qq.com/plugin/msdk/notch.html
请使用谷歌浏览器打开开发者工具模拟iPhone X横屏模式测试。

# 适配步骤：

# 1. html文件meta新增viewport-fit=cover （ios）

范例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">

# 2. JS添加刘海方向识别代码

var displayStr = "";
var orientationDetect = function() {
    if (displayStr.length > 0) {
    document.querySelectorAll("body")[0].classList.remove(displayStr);
    }
    switch (window.orientation) {
        case 0:
            //刘海在上边
            displayStr = "direction_por";
            break;
        case -90:
            //刘海在右边
            displayStr = "direction_land_ops";
            break;
        case 90:
            //刘海在左边
            displayStr = "direction_land";
            break;
        case 180:
            //刘海在下边
            displayStr = "direction_por_ops";
            break;
    }
    document.querySelectorAll("body")[0].classList.add(displayStr);
};
window.addEventListener("DOMContentLoaded", orientationDetect, false);
window.addEventListener("orientationchange", orientationDetect, false);

# 3. CSS根据刘海方向特殊适配

# 适配原则：

  • 不使用之前苹果专用的env()方法进行适配

  • 安卓和IOS均使用mediaquery将ratio 2/1的设备统一使用异形屏表现

  • 刘海间距：50像素(建议使用rem单位等比换算,本案例基准100)

# 示例：
@media screen and (min-aspect-ratio: 200/100) {
    /* 刘海在左，处理菜单和内容位置 */
    .direction_land .menu {
        padding-left: 0.5rem;
    }
    .direction_land .content {
        margin-left: 2rem;
    }
    /* 刘海在右，处理内容 */
    .direction_land_ops .content {
        margin-right: 0.5rem;
    }
}

# 跳转APP并打开指定链接

# 非QQ环境跳转QQ，并打开指定页面

使用如下链接，修改url和folder。url是需要跳转的链接，folder是数据统计的关键字：https://lol.qq.com/plugin/jumptoqq/index.html?url=https%3A%2F%2Flolm.qq.com%2F&folder=os

参数 说明 备注
url 跳转的链接完整url，如https://lolm.qq.com/，encondeURIComponent即https%3A%2F%2Flolm.qq.com%2F *必填
folder 数据统计的关键字，"os"代表是官网，如果不是，则填写actName例如a20160701xxx *必填

# 非微信环境跳转微信，并打开指定页面

找需求人申请openlink

# 非掌盟环境跳转掌盟，并打开指定页面

可参考如下链接：点击查看

# 手游下载组件

下载组件更新为v2版本，主要功能如下：
1）微信&手q环境下四合一链接拉起或下载游戏；
2）支持自定义参数实现：掌盟内下载游戏或掌盟内跳转外部下载游戏
3）支持掌盟内拉起游戏；
4）支持掌盟内下载游戏过程中自定义UI和文案；
5）支持微信&手Q&掌盟的移动端分享内容自定义；
6）根据接口控制是否在掌盟内下载。

# 1.下载功能需要引入前端SDK:

<script src="//lol.qq.com/plugin/mobiledownload/download.min.js" charset="utf-8"></script>

# 2.下载需要加入如下HTML和JS：

<a href="javascript:;" class="lolm-download">下载lolm</a>
<a href="javascript:;" class="lolm-download">下载lolm</a>
<a href="javascript:;" id="jcc-download">下载jcc</a>
<a href="javascript:;" id="lole-download">下载lole</a>

    const {Download,initAPP} = LOLAPP;
    initAPP().then(() => {
        //自定义参数
        let loledl = {
            androidLink: 'https:xxx.apk',
            md5: 'xxx',
            synthesisLink:"https:xxx.shtml",
            downloadingCallback: function (state,progress) {
                document.getElementById('lole-download').innerText = state + '进度' + progress;
            }
        }
        Download('#lole-download','lole',loledl);

        let lolmdl = {
            androidLink: 'https://xxx.apk',
            md5: 'xxx'
        }
        Download('.lolm-download','lolm',lolmdl);


        let jccdl = {
            androidLink: 'https://xxx.apk',
            md5: 'xxx'
        }
        Download('#jcc-download','jcc',jccdl);
    }).catch((e) => {
        console.log(e)
    })

自定义参数定义如下：

参数 类型 必传 用途 默认值 说明
synthesisLink string 否 非掌盟内下载时的下载跳转链接 默认链接拉起游戏后可返回引用SDK的H5 非空时使用自定义的属性值
androidLink string lole是
lolm否
jcc否		 掌盟内下载时安卓下载包地址 lole默认为空
lolm获取js中的androidURL点击下载js
jcc获取js中的androidURL点击下载js		 非空时使用自定义的属性值
md5 string 否 掌盟内下载时安卓下载包校验文件 空 安卓环境掌盟内下载，下载包的校验文件，
建议填写每个安装包（androidLink）对应的md5，从而降低风险，强烈建议填写
relyDownloadChannel boolean 否 true表示根据接口返回值判断是否在掌盟内下载，false相反 true 设置该值为true后downloadInZM无效
设置false则根据downloadInZM值选择下载方式
downloadInZM boolean 否 true表示在掌盟内部下载，false相反 lole默认true
lolm默认false
jcc默认false		 设置是否在掌盟内下载
downloadingCallback function 否 安卓环境掌盟内下载和安装过程中的回调函数 不传该属性时默认ui显示如下文案
下载中，点击暂停：15%
已暂停，点击继续：15%
下载完成，点击安装		 掌盟内安卓下载时，下载和安装进程的回调函数， 返回state下载状态和progress下载进度。
state=3表示下载中（再次点击下载暂停） state=4表示下载暂停（再次点击下载继续） state=5表示下载完成（再次点击按钮可安装）
只有downloadInZM为true时该参数才会有效

# 1.分享引入前端SDK:

<script src="//lol.qq.com/plugin/mobiledownload/download.min.js" charset="utf-8"></script>

# 2.分享需要加入JS：

TIP

特别注意：QTLTools已不再维护，分享相关可使用mlol方法

   const {initAPP} = LOLAPP;
    initAPP().then(() => {
       share();
    }).catch((e) => {
        console.log(e)
    })

    function share() {
       mlol.SetTitle('掌盟标题');
       mlol.SetShare({
           url: location.href,
           title: '分享标题',
           content: '分享内容',
           thumb_url:'https://game.gtimg.cn/images/lol/m/act/a20150319lolapp/logo.png',
           callback: function (channel) {
               console.log('点击了原生分享:', channel)
            },
       })
    }

可参考如下链接：点击查看

← 通用模版 →