微信网页版前端源码分析（一）源码结构和公众号处理逻辑

时间 2019-11-21

原文原文链接

（原创，转载请注明出处）javascript

1、微信网页版前端结构

微信网页版为angular应用。css

angular应用启动代码

angular.bootstrap(document, ["webwxApp"])

angular应用主要Module

angular.module("Services")
angular.module("Controllers")
angular.module("Directives")

angular应用主要模版文件

/readMenu.html

angular应用配置代码

微信网页版采用了ui-route模块来配置路由，与页面相对应，聊天二级页对应'chat' state，联系人二级页对应'contact' state, 公众号二级页对应'read' state。html

angular.module("webwxApp", ["ui.router", "ngAnimate", "Services", "Controllers", "Directives", "Filters", "ngDialog", "jQueryScrollbar", "ngClipboard", "exceptionOverride"]).run(["$rootScope", "$state", "$stateParams", function(e, t, o) {
    e.$state = t, e.$stateParams = o
}]).factory("httpInterceptor", ["accountFactory", function(e) {
    return {
        request: function(t) {
            if (!t.cache && t.url.indexOf(".html") < 0 && (t.params || (t.params = {}), t.params.pass_ticket = e.getPassticket()), t.url.indexOf(".html") < 0) {
                var o = location.href.match(/(\?|&)lang=([^&#]+)/);
                if (o) {
                    var n = o[2];
                    t.params || (t.params = {}), t.params.lang = n
                }
            }
            return t
        }
    }
}]).config(["$sceProvider", "$httpProvider", "$logProvider", "$stateProvider", "$urlRouterProvider", "ngClipProvider", function(e, t, o, n, r, a) {
    e.enabled(!1), o.debugEnabled(!0), a.setPath(window.MMSource.copySwfPath), t.interceptors.push("httpInterceptor");
    var i = document.domain.indexOf("qq.com") < 0;
    i || (document.domain = "qq.com");
    var c;
    n.state("chat", {
        url: "",
        params: {
            userName: ""
        },
        views: {
            navView: {
                controller: ["$stateParams", "chatFactory", "contactFactory", "stateManageService", "$rootScope", function(e, t, o, n, r) {
                    function a() {
                        var n = o.getContact(e.userName, "", !0);
                        r.$broadcast("root:statechange"), t.setCurrentUserName(e.userName), t.addChatList([n || {
                            FromUserName: e.userName
                        }]), e.userName = ""
                    }
                    if (n.change("navChat:active", !0), e.userName) {
                        var i = o.getContact(e.userName, "", !0);
                        i ? a() : o.addBatchgetContact({
                            UserName: e.userName,
                            ChatRoomId: ""
                        }, !0).then(function(e) {
                            a(), console.log("addBatchgetContact now ok", e)
                        }, function(e) {
                            console.error("addBatchgetContact now err", e)
                        })
                    }
                }]
            },
            contentView: {
                templateUrl: "contentChat.html",
                controller: "contentChatController"
            }
        }
    }).state("contact", {
        url: "",
        views: {
            navView: {
                controller: ["stateManageService", function(e) {
                    e.change("navContact:active", !0)
                }]
            },
            contentView: {
                templateUrl: "contentContact.html",
                controller: "contentContactController"
            }
        }
    }).state("read", {
        url: "",
        params: {
            readItem: ""
        },
        views: {
            navView: {
                controller: ["stateManageService", function(e) {
                    e.change("navRead:active", !0)
                }]
            },
            contentView: {
                templateUrl: "contentRead.html",
                controller: ["$scope", "$stateParams", "subscribeMsgService", "mmpop", function(e, t, o, n) {
                    if (t.readItem) c = e.readItem = t.readItem;
                    else {
                        var r = o.getSubscribeMsgs()[0];
                        e.readItem = c || r && r.MPArticleList[0]
                    }
                    e.optionMenu = function() {
                        n.toggleOpen({
                            templateUrl: "readMenu.html",
                            container: angular.element(document.querySelector(".read_list_header")),
                            controller: "readMenuController",
                            singletonId: "mmpop_reader_menu",
                            className: "reader_menu"
                        })
                    }, i || $("#reader").load(function() {
                        var e = $(this).contents().find("body"),
                            t = e.find("#js_view_source");
                        if (t.length > 0) {
                            e.css({
                                position: "relative"
                            });
                            var o = $('<a href="javascript:;" onclick="var url = window.msg_source_url || window.location.href; var win = window.top.open(url, \'_blank\'); win.focus();" style="position: absolute; bottom: 20px; left: 15px; width: 4em; height: 25px; background: #FFFFFF;">阅读原文</a>');
                            e.append(o)
                        }
                    })
                }]
            }
        }
    })
}]);

2、微信网页版全局数据初始化

全局控制器appController

angular.module("Controllers").controller("appController", ["$rootScope", "$scope", "$timeout", "$log", "$state", "$window", "ngDialog", "mmpop", "appFactory", "loginFactory", "contactFactory", "accountFactory", "chatFactory", "confFactory", "contextMenuFactory", "notificationFactory", "utilFactory", "reportService", "actionTrack", "surviveCheckService", "subscribeMsgService", "stateManageService", function(e, t, o, n, r, a, i, c, s, l, u, f, d, g, m, p, h, M, y, C, S, v) {
//controller初始化
}

全局初始化调用代码

window._appTiming = {}, 
r.go("chat"), 
e.CONF = g,
t.isUnLogin = !window.MMCgi.isLogin,
t.debug = !0,
t.isShowReader = /qq\.com/gi.test(location.href), 
window.MMCgi.isLogin 
&& (T(), h.browser.chrome && !MMDEV && 
(window.onbeforeunload = function(e) {
    return e = e || window.event, e && 
    (e.returnValue = 
    "关闭浏览器聊天内容将会丢失。"), 
    "关闭浏览器聊天内容将会丢失。"
})), 
t.$on("newLoginPage", function(e, t) {
    console.log("newLoginPage", t),
    f.setSkey(t.SKey), 
    f.setSid(t.Sid), f.setUin(t.Uin), 
    f.setPassticket(t.Passticket), 
    T()
});

经过分析以上代码，T()才是初始化的具体执行方法。前端

全局数据初始化方法

function T() {
    t.isLoaded = !0, t.isUnLogin = !1, M.report(M.ReportType.timing, {
        timing: {
            initStart: Date.now()
        }
    }), s.init().then(function(n) {
        if (h.log("initData", n), n.BaseResponse && "0" != n.BaseResponse.Ret) return console.log("BaseResponse.Ret", n.BaseResponse.Ret), void(l.timeoutDetect(n.BaseResponse.Ret) || i.openConfirm({
            className: "default ",
            templateUrl: "comfirmTips.html",
            controller: ["$scope", function(e) {
                e.title = MM.context("02d9819"), e.content = MM.context("0d2fc2c"), M.report(M.ReportType.initError, {
                    text: "程序初始化失败，点击确认刷新页面",
                    code: n.BaseResponse.Ret,
                    cookie: document.cookie
                }), e.callback = function() {
                    document.location.reload(!0)
                }
            }]
        }));
        f.setUserInfo(n.User), f.setSkey(n.SKey), f.setSyncKey(n.SyncKey), u.addContact(n.User), u.addContacts(n.ContactList), d.initChatList(n.ChatSet), d.notifyMobile(f.getUserName(), g.StatusNotifyCode_INITED), S.init(n.MPSubscribeMsgList), e.$broadcast("root:pageInit:success"), h.setCheckUrl(f), h.log("getUserInfo", f.getUserInfo()), t.$broadcast("updateUser"), M.report(M.ReportType.timing, {
            timing: {
                initEnd: Date.now()
            }
        });
        var r = n.ClickReportInterval || 3e5;
        setTimeout(function a() {
            y.report(), setTimeout(a, r)
        }, r), o(function() {
            function e(o) {
                u.initContact(o).then(function(o) {
                    u.addContacts(o.MemberList), M.report(M.ReportType.timing, {
                        timing: {
                            initContactEnd: Date.now()
                        },
                        needSend: !0
                    }), 16 >= t && o.Seq && 0 != o.Seq && (t++, e(o.Seq))
                })
            }
            M.report(M.ReportType.timing, {
                timing: {
                    initContactStart: Date.now()
                }
            });
            var t = 1;
            e(0)
        }, 0), t.account = u.getContact(f.getUserName()), E()
    })
}

经过分析以上代码，能够看到，s.init()为初始化主要方法，其中s为appFactory；初始化后，经过各类set方法来为各个model赋值。java

appFactory的init方法

angular.module("Services").factory("appFactory", ["$http", "$q", "confFactory", "accountFactory", "loginFactory", "utilFactory", "reportService", "mmHttp", function(e, t, o, n, r, a, i, c) {
    var s = {
        globalData: {
            chatList: []
        },
        init: function() {
            var e = t.defer();
            return c({
                method: "POST",
                url: o.API_webwxinit,
                MMRetry: {
                    count: 1,
                    timeout: 1
                },
                data: {
                    BaseRequest: {
                        Uin: n.getUin(),
                        Sid: n.getSid(),
                        Skey: n.getSkey(),
                        DeviceID: n.getDeviceID()
                    }
                }
            }).success(function(t) {
                e.resolve(t)
            }).error(function(t) {
                e.reject("error:" + t)
            }), e.promise
        },
        sync: function() {
            var e = t.defer();
            return c({
                method: "POST",
                MMRetry: {
                    serial: !0
                },
                url: o.API_webwxsync + "?" + ["sid=" + n.getSid(), "skey=" + n.getSkey()].join("&"),
                data: angular.extend(n.getBaseRequest(), {
                    SyncKey: n.getSyncKey(),
                    rr: ~new Date
                })
            }).success(function(t) {
                e.resolve(t), a.getCookie("webwx_data_ticket") || i.report(i.ReportType.cookieError, {
                    text: "webwx_data_ticket 票据丢失",
                    cookie: document.cookie
                })
            }).error(function(t) {
                e.reject("error:" + t), a.log("sync error")
            }), e.promise
        },
        syncCheck: function() {
            var e = t.defer(),
                c = this,
                s = o.API_synccheck + "?" + ["r=" + a.now(), "skey=" + encodeURIComponent(n.getSkey()), "sid=" + encodeURIComponent(n.getSid()), "uin=" + n.getUin(), "deviceid=" + n.getDeviceID(), "synckey=" + encodeURIComponent(n.getFormateSyncCheckKey())].join("&");
            return window.synccheck && (window.synccheck.selector = 0), $.ajax({
                url: s,
                dataType: "script",
                timeout: 35e3
            }).done(function() {
                window.synccheck && "0" == window.synccheck.retcode ? "0" != window.synccheck.selector ? c.sync().then(function(t) {
                    e.resolve(t)
                }, function(e) {
                    console.log("syncCheck sync nothing", e)
                }) : e.reject(window.synccheck && window.synccheck.selector) : !window.synccheck || "1101" != window.synccheck.retcode && "1102" != window.synccheck.retcode ? window.synccheck && "1100" == window.synccheck.retcode ? r.loginout(0) : (e.reject("syncCheck net error"), i.report(i.ReportType.netError, {
                    text: "syncCheck net error",
                    url: s
                })) : r.loginout(1)
            }), e.promise
        },
        report: function() {}
    };
    return s
}])

3、微信网页版公众号页面逻辑

涉及公众号的ui-route state为read。包含有两个view，分别为navView和contentView。navView为概览导航，contentView为正文阅读。根据contentView的定义，能够看到正文阅读的模版为ContentRead.html。jquery

<script type="text/ng-template" id="contentRead.html"><div class="box reader">
    <div class="box_hd with_border read_list_header">
        <div class="ext" ng-if="readItem">
            <a href="javascript:;" ng-click="optionMenu();">
                <i class="titlebar_menuicon"></i>
            </a>
        </div>
        <div class="title_wrap">
            <div class="title">{{readItem.AppName}}</div>
        </div>
    </div>
    <div class="box_bd">
        <iframe ng-src="{{readItem.Url}}" frameborder="0" class="iframe" id="reader"></iframe>
    </div>
</div></script>

涉及公众号的Directive为navReadDirective，对应的模版为navRead.html。web

<script type="text/ng-template" id="navRead.html"><!--BEGIN chat list-->
<div jquery-scrollbar class="read_list scrollbar-dynamic" id="J_NavReadScrollBody">

    <p class="ico_loading" ng-show="subscribeMsgs.defaultValue"><img src="https://res.wx.qq.com/zh_CN/htmledition/v2/images/icon/ico_loading31e225.gif" alt=""/>加载中...</p>
    <p class="ico_loading" ng-show="!subscribeMsgs.defaultValue && subscribeMsgs.length == 0">暂无文章...</p>
    <div  data-no-cache="true" mm-repeat="readItem in articleList" data-height-calc="heightCalc" data-buffer-height="200" mm-repeat-keyboard mm-repeat-keyboard-scroll-selector="#J_NavReadScrollBody">
        <div class="just_for_bg" ng-if="readItem.UserName" ng-class="{first: readItem._index === 0}">
            <div class="read_item_hd">
                <p class="date">{{readItem.Time|timeFormat}}</p>
                <div class="avatar">
                    <img class="img" src="https://res.wx.qq.com/zh_CN/htmledition/v2/images/img31e225.gif" mm-src="{{readItem.HeadImgUrl}}" alt=""/>
                </div>
                <p class="info">
                    <span class="username">{{readItem.NickName}}</span>
                </p>
            </div>
        </div>
        <div ng-if="!readItem.UserName" class="read_item slide-left"
             ng-click="itemClick(readItem)"
             ng-class="{'active': (readItem == currentItem)}"
                >
            <div class="cont">
                <h3 class="title">{{readItem.Title}}</h3>
            </div>
            <div class="ext">
                <div class="cover">
                    <div class="img" ng-style="{'background-image': 'url('+ readItem.Cover +')'}"></div>
                </div>
            </div>
        </div>
    </div>
</div>

公众号正文窗口右上角的按钮模版：ajax

<script type="text/ng-template" id="readMenu.html"><ul class="dropdown_menu">
    <li>
        <a href="javascript:;" title="复制网页连接" clip-copy="copyLink()" clip-click="copyCallback()">
            <i class="menuicon_copylink"></i>
            复制网页连接        </a>
    </li>
    <!--<li>-->
        <!--<a href="javascript:;" title="转发" ng-click="forwarding()">转发</a>-->
    <!--</li>-->
    <li class="last_child">
        <a href="javascript:;" title="新窗口中打开" ng-click="openTab()">
            <i class="menuicon_newtab"></i>
            新窗口中打开        </a>
    </li>
</ul>
</script>

其中，涉及公众号数据初始化的代码以下（见全局数据初始化代码）：chrome

S.init(n.MPSubscribeMsgList)

S为subscribeMsgService, subscribeMsgService定义以下。json

angular.module("Services").factory("subscribeMsgService", ["$rootScope", "contactFactory", "accountFactory", "confFactory", "utilFactory", function(e, t, o, n, r) {
    var a = [],
        i = {
            current: null,
            changeFlag: 0,
            init: function(e) {
                this.changeFlag = Date.now(), this.add(e)
            },
            getSubscribeMsgs: function() {
                return a
            },
            add: function(e) {
                e.length > 0 && (this.changeFlag = Date.now());
                for (var t = 0, n = e.length; n > t; t++) {
                    var i = e[t];
                    i.HeadImgUrl = i.HeadImgUrl = r.getContactHeadImgUrl({
                        UserName: i.UserName,
                        Skey: o.getSkey()
                    });
                    for (var c = i.MPArticleList, s = 0; s < c.length; s++) {
                        var l = c[s];
                        l.AppName = i.NickName, /dev\.web\.weixin/.test(location.href) || (l.Url = l.Url.replace(/^http:\/\//, "https://"))
                    }
                    a.push(i)
                }
            }
        };
    return i
}])

公众号更新频率

经过实际运行测试，以及代码分析，能够看到，微信网页版仅在页面载入时初始化公众号文章。
一旦载入，再也不刷新，除非刷新页面。

但凡使用到公众号的数据的地方，都是调用的subscribeMsgService的getSubscribeMsgs方法，这个方法直接返回的是subscribeMsgService内部的变量a。

4、微信网页版数据初始化之获取分析

经过访问 cgi-bin/mmwebwx-bin/webwxinit 来获取。

HTTP请求包分析

经过chrome的network选项卡，能够看到该请求。

请求概览

a. Request URL:
https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxinit?r=-1311101047
b. Request Method:
POST
c. Status Code:
200 OK
d. Remote Address:
101.226.76.164:443

请求头

a. Accept:
application/json, text/plain, */*
b. Accept-Encoding:
gzip, deflate, br
c. Accept-Language:
zh,zh-CN;q=0.8
d. Cache-Control:
no-cache
e. Connection:
keep-alive
f. Content-Length:
100
g. Content-Type:
application/json;charset=UTF-8
h. Cookie:
xxxxxxxxxxxxx
i. Host:
wx.qq.com
j. Origin:
https://wx.qq.com
k. Pragma:
no-cache
l. Referer:
https://wx.qq.com/?mmdebug
m. User-Agent:
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36

请求数据Palyload

BaseRequest:{Uin: "xxxxxx", Sid: "xxxxxx", Skey: "", DeviceID: "e085070410028608"}

代码片断

如下经过代码说明。

c({
    method: "POST",
    url: o.API_webwxinit,
    MMRetry: {
        count: 1,
        timeout: 1
    },
    data: {
        BaseRequest: {
            Uin: n.getUin(),
            Sid: n.getSid(),
            Skey: n.getSkey(),
            DeviceID: n.getDeviceID()
        }
    }
})

请求为POST方法，url为o.API_webwxinit方法获取，payload数据为一个JSON对象。

其中API_webxinit方法为

"/cgi-bin/mmwebwx-bin/webwxinit?r=" + ~new Date

JSON对象中，Uin和Sid都是cookie中获取的，DeviceID为临时生成，具体参见getDeviceID()。

getDeviceID: 
function() {
    return "e" + ("" + Math.random().toFixed(15)).substring(2, 17)
},

HTTP响应包

响应头

a. Connection:
keep-alive
b. Content-Encoding:
gzip
c. Content-Length:
30065
d. Content-Type:
text/plain

响应数据

{
    "MPSubscribeMsgList": [{
        "UserName": "@5a655a99997e77131aeec13f150dea45",
        "MPArticleCount": 2,
        "MPArticleList": [{
            "Title": "xxx",
            "Digest": "xxx",
            "Cover": "http://mmbiz.qpic.cn/mmbiz_jpg/oZ9tOATGCKc1OIicaT9SGz2O3vUorCj7IdrCr0Al8F6cTMzvsMkVsgwS6iaablSEibLDrsjoUNvlc8Q7RxEqnLfibA/640?wxtype=jpeg&wxfrom=0",
            "Url": "http://mp.weixin.qq.com/s?__biz=MzA4NDc2MzIwNA==&mid=2656521000&idx=1&sn=d30318e4b975a806a71abfca19d11128&chksm=8441dc03b3365515536c5bcacea1796d438c68eff39172537c78c0f27c1a13003e8050f2056f&scene=0#rd"
        }, {
            "Title": "xxxx",
            "Digest": "xxxx",
            "Cover": "http://mmbiz.qpic.cn/mmbiz_jpg/oZ9tOATGCKc1OIicaT9SGz2O3vUorCj7IdrjZg89vPLkg1gcHN2iaYD35WVVaVZ4AnicRKUBBxmBZcWgX5PslHmAA/300?wxtype=jpeg&wxfrom=0",
            "Url": "http://mp.weixin.qq.com/s?__biz=MzA4NDc2MzIwNA==&mid=2656521000&idx=2&sn=7e8fab0fd99b7aa32c971164887e4da9&chksm=8441dc03b33655150ffc203bcb7d7eac2ddb8694a98ed3eededa18c532908a01757cd534ba7f&scene=0#rd"
        }],
        "Time": 1483759210,
        "NickName": "xxxx"
    }]
}

5、总结

微信网页版前端的调试和生产环境在同一个库文件中，根据URL地址的请求参数来判断是否调试环境。若是是生产环境，则将console.log赋值为null，这样，在chrome的F12下将看不到调试信息。

开启微信网页版调试模式，在微信网页版的地址栏后增长/?mmdebug。