微社区重构答疑

重构微社区可以当做是制作横屏的移动官网来实现，内容的接入，也是和双端官网一致，不同的是测试环节，会有一些类似登录态，白名单的环节，在下方测试环节，均会提及

一、重构环节

横屏微社区，竖屏如何兼顾？

横屏的微社区一般设计师很少会设计竖屏版本，因为重构基本可以自行处理。

规则：

左侧fixed导航->底部fixed导航
左栏变为顶部，右栏随后

微社区常用JS，iconfont字体库

微社区公共字体库

@font-face {
    font-family: "igfont";
    src: url('/images/js/bsCommonFiles/iconfont/iconfont.eot');
    src: url('/images/js/bsCommonFiles/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
    url('/images/js/bsCommonFiles/iconfont/iconfont.svg#iconfont') format('svg'),
    url('/images/js/bsCommonFiles/iconfont/iconfont.woff') format('woff'),
    url('/images/js/bsCommonFiles/iconfont/iconfont.ttf') format('truetype');
}
.igfont{font-family:"igfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.1px;-moz-osx-font-smoothing: grayscale;}

微社区常用JS目录

/images/js/bsCommonFiles/js
SVN项目蜘蛛ID:11783

seo问题可以忽略？

是的，场景在游戏内，无需考虑SEO问题

是否能使用VueJs？

VUE框架在微社区中应用广泛，是微社区目前推荐的框架，也能快速提高开发速度。附上版本对应的JS地址

/images/js/bsCommonFiles/js/vue2.min.js  //vue 2.0
/images/js/bsCommonFiles/js/vue.js   //vue 1.0

适配能否像移动官网那样用rem？

适配选型可以参照移动官网，一般微社区有两种做法：

布局百分比适配，字体与图片均为设计稿除2尺寸
rem布局计算， 基准值100 ，下方为<head>里插入的适配代码

(function (win,doc){
    if (!win.addEventListener) return;
    var html=document.documentElement;
    function setFont() {
        var w = html.clientWidth,
            h = html.clientHeight;
        html.style.fontSize= w > h ? w/1334*100+"px" : w/750*100+"px";
    }
    doc.addEventListener('DOMContentLoaded',setFont,false);
    win.addEventListener('resize',setFont,false);
    win.addEventListener('load',setFont,false);
})(window,document);

IOS中BORDER的0.5像素如何处理？

常规做法是判断IOS设备，给BODY添加class，区别样式：

JS：

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = parseInt(v[1], 10);
    if(version >= 8){
        document.documentElement.classList.add('hairlines')
    }
}

CSS：

.hairlines .index{border-width:0.5px}

接ams和平时双端官网接ams的方式是不是一样的？

一致。可能翻页涉及到模板的特殊配置。

内容常用系统

内容系统：AMS
视频系统：AMS、3.0系统（推荐用这个，有动态接口，能搜索，接入的话，让产品联系）

二、开发环节

开发的每个功能环节，都依赖游戏的登录态。因此需要特别注意这点

JS里的登录态约定（确保功能正常的基础）

微社区游戏的登录态，约定使用sessionStorage记录。字段：dataSearch，以下附上记录登录态代码：

var dataSearch = window.location.search;  //获取URL参数
//判断是否有内容或者是否是较为有效的登录态信息
if (!sessionStorage.dataSearch && dataSearch.indexOf("appid") != -1 && dataSearch) {
    sessionStorage.dataSearch = window.location.search;   //将登录态存到sessionStorage
}

AMS文章详情如何接入评论系统？

找kensinchen(陈海泉)为业务创建评论ID
配置新闻模板，[[AMS详情页接入评论2.0]]

双平台判断方法

一般登录态格式如下：

?partition=1011&roleid=104994510013439323&area=1&algorithm=v2&version=1.13.11×tamp=1494567380&appid= wxfdab5af74990787a &openid=oiz-ewRrOIHDAt88S5FquKqChdvw

判断规则 ：最简单的方法是判断登录态的appid属性是否含有wx字符，例子：

//获取URL参数
 function getParamVal(url, name){
    url = url || location.search;
    url = url.replace(/\'|\"|\<|\>/,"");
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = url.substr(url.indexOf("\?")+1).match(reg);
    if (r!=null){
        return r[2];
    }else{
        return null;
    }
}
//从sessionStorage的dataSearch中获得登录态的appid
var appid = getParamVal(sessionStorage['dataSearch'],"appid");
console.log(appid,"appid")
if(appid.indexOf("wx")>-1){
    //游戏圈逻辑
}else{
    //部落逻辑
}

VUE2.0的判断方法：

//微信平台：platform="wx"、QQ平台：platform="qq"、其他else
computed : {
    //双平台判断
    platform:function(){
        if(sessionStorage['dataSearch']&&sessionStorage['dataSearch'].indexOf("appid")>-1){
            var appid = getParamVal(sessionStorage['dataSearch'],"appid");
            if(appid.indexOf("wx")>-1){
                return "wx"
            }else{
                return "qq"
            }
        }else{
            return "else"
        }
    },
}

三、测试环节

如何在MSDK浏览器中模拟页面测试？

使用MSDK浏览器测试客户端，见附件。IOS使用itools连接电脑进行安装即可
用现有游戏微社区，JS加白名单逻辑，跳转到你测试的页面

如何抓游戏登录态？

WINDOWS使用fiddler抓包（需要注意HTTPS，详细暂且百度）
MAC使用charles抓包（需要注意HTTPS，详细暂且百度）
使用页面输出，复制到电脑，一般思路是用textarea装着。测试入口用下方白名单方式实现。