微信网页版前端源码分析（一）源码结构和公众号处理逻辑
（原创，转载请注明出处）
一、微信网页版前端结构
微信网页版为angular应用。
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。
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)
}
})
}]
}
}
})
}]);
二、微信网页版全局数据初始化
全局控制器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赋值。
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
}])
三、微信网页版公众号页面逻辑
涉及公众号的ui-route state为read。包含有两个view，分别为navView和contentView。navView为概览导航，contentView为正文阅读。根据contentView的定义，可以看到正文阅读的模版为ContentRead.html。
<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。
<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>
公众号正文窗口右上角的按钮模版：
<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>
其中，涉及公众号数据初始化的代码如下（见全局数据初始化代码）：
S.init(n.MPSubscribeMsgList)
S为subscribeMsgService, subscribeMsgService定义如下。
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。
四、微信网页版数据初始化之获取分析
通过访问 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"
}]
}
五、总结
微信网页版前端的调试和生产环境在同一个库文件中，根据URL地址的请求参数来判断是否调试环境。如果是生产环境，则将console.log赋值为null，这样，在chrome的F12下将看不到调试信息。
开启微信网页版调试模式，在微信网页版的地址栏后增加/?mmdebug。
