We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在上一篇《微信小程序「官方示例代码」浅析【上】》中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的。
还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码——真想建议他们看看Growth的第二部分,构建系统。
首先你需要有下面的工具啦
首先,我们需要右键微信web开发者工具.app,然后显示包的内容,在 Contents/Resources/app.nw下面的内容即是我们的代码,拷贝出来啦:
Contents/Resources/app.nw
drwxr-xr-x@ 7 fdhuang staff 238B Sep 22 19:43 app drwxr-xr-x@ 4 fdhuang staff 136B Sep 21 13:12 modified_modules drwxr-xr-x@ 194 fdhuang staff 6.4K Sep 21 13:12 node_modules -rw-r--r-- 1 fdhuang staff 900B Sep 22 21:09 package.json
简单的说明一下:
在modified_modules目录下有两个子模块:
modified_modules
我们已经知道了这是一个NodeWebkit封装的Web应用了。
在package.json中的"main": "app/html/index.html",,即定义了这个APP的入口是这个index.html,而不是别的文件。
"main": "app/html/index.html",
index.html
很顺利的我们看到了他们调用的文件了:
<script src="../dist/app.js"></script>
这里面有一个init方法,看来他就是NodeWebkit相关的入口了。用WebStorm的shift + f6 RENAME 这些变量好十几次,终于看到了下面的代码了:
var React = require("../dist/lib/react.js"); var reactDom = require("../dist/lib/react-dom.js"); var init = require("../dist/common/loadInit/init.js"); var controller = require("../dist/components/ContainController.js"); var proxy = require("../dist/common/proxy/startProxy.js"); var windowActions = require("../dist/actions/windowActions.js"); var webViewAction = require("../dist/actions/webviewActions.js"); var webViewStore = require("../dist/stroes/webviewStores.js"); var log = require("../dist/common/log/log.js"); var shortCut = require("../dist/common/shortCut/shortCut.js"); var isDev = global.appConfig.isDev;
这是一个React应用,还好我一年多以前学得不错。扫视了一下代码,终于看到了这一句:
reactDom.render(React.createElement(controller, null), document.querySelector("#container")
直接跳转到ContainController.js,跳转到render方法,找到了这个:
React.createElement(Main, { project: this.state.project, appQuit: this.appQuit, appMax: this.appMax, appMin: this.appMin })
果然Main里面就是大入口了
React.createElement("div", {className: "main"}, React.createElement(menuBar, { appQuit: this.props.appQuit, appMin: this.props.appMin, appMax: this.props.appMax, showSetting: this.showSetting, project: this.props.project }), React.createElement(toolbar, {project: this.props.project}), React.createElement("div", { className: "body" }, React.createElement(sidebar, { project: this.props.project, optProject: this.optProject }), React.createElement(develop, { show: this.state.show, optDebugger: this.optDebugger, project: this.props.project }), React.createElement(edit, { show: this.state.show, project: this.props.project }), React.createElement(detail, { project: this.props.project, show: this.state.show })), React.createElement(toast, null), React.createElement(setting, { show: this.state.showSetting, showSetting: this.showSetting }), React.createElement(dialog, null), React.createElement(popup, null), React.createElement(about, null)) }
对应的就是下面这个界面了:
edit
detail
慢慢的就探索到了打包,其运行时的过程。由于我并没有拿到内测资格,所以我只好边看边猜测一下。
在之前的文章中,我们提到了两点很有意思的东西:wxml和wxss,这两个文件会被分别转换,即wxml -> html,wxss -> css。对应的有几个不同的transform:
wxml
wxss
transWxmlToJs
transWxssToCss
transConfigToPf
transWxmlToHtml
transManager
这里的PF指代的是PageFrame的意思,pageFrame有一个对应的模板文件:
<!DOCTYPE html> <html lang="zh-CN"> <head> <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon"> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <script> var __webviewId__; </script> <!-- percodes --> <!--{{WAWebview}}--> <!--{{reportSDK}}--> <!--{{webviewSDK}}--> <!--{{exparser}}--> <!--{{components_js}}--> <!--{{virtual_dom}}--> <!--{{components_css}}--> <!--{{allWXML}}--> <!--{{eruda}}--> <!--{{style}}--> <!--{{currentstyle}}--> <!--{{generateFunc}}--> </head> <body> <div></div> </body> </html>
这种风格一看就是生成字符串Replace的,然后他们写了一个名为wcc以及一个名为wcsc的工具。
这样的话,我们就可以理解为微信小应用有点类似于 Virtual Dom + WebView,毕竟上面有个WAWebView文件 ,还有一个webviewSDK文件 。
当然无论是React + WebView,或者Vue + WebView都不重要,现在有了 WA + WebView了,哈哈。
WeApp采用的是如下图所示的提交方式,所以:
你在本地写的WeApp都会被提交到微信服务器,然后打包,上传到服务器,交给CDN——毕竟为了分发。
上传的过程大致如下:
好了,瞎扯完了,睡觉准备写继续写新书了。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
在上一篇《微信小程序「官方示例代码」浅析【上】》中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的。
还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码——真想建议他们看看Growth的第二部分,构建系统。
解压应用
首先你需要有下面的工具啦
首先,我们需要右键微信web开发者工具.app,然后显示包的内容,在
Contents/Resources/app.nw
下面的内容即是我们的代码,拷贝出来啦:简单的说明一下:
在
modified_modules
目录下有两个子模块:IDE运行顺序
我们已经知道了这是一个NodeWebkit封装的Web应用了。
在package.json中的
"main": "app/html/index.html",
,即定义了这个APP的入口是这个index.html
,而不是别的文件。很顺利的我们看到了他们调用的文件了:
这里面有一个init方法,看来他就是NodeWebkit相关的入口了。用WebStorm的shift + f6 RENAME 这些变量好十几次,终于看到了下面的代码了:
这是一个React应用,还好我一年多以前学得不错。扫视了一下代码,终于看到了这一句:
直接跳转到ContainController.js,跳转到render方法,找到了这个:
果然Main里面就是大入口了
对应的就是下面这个界面了:
edit
就是编辑器及其相关的事项detail
就是项目的配置WeApp是如何运行的
慢慢的就探索到了打包,其运行时的过程。由于我并没有拿到内测资格,所以我只好边看边猜测一下。
在之前的文章中,我们提到了两点很有意思的东西:
wxml
和wxss
,这两个文件会被分别转换,即wxml -> html,wxss -> css。对应的有几个不同的transform:transWxmlToJs
transWxssToCss
transConfigToPf
transWxmlToHtml
transManager
这里的PF指代的是PageFrame的意思,pageFrame有一个对应的模板文件:
这种风格一看就是生成字符串Replace的,然后他们写了一个名为wcc以及一个名为wcsc的工具。
这样的话,我们就可以理解为微信小应用有点类似于 Virtual Dom + WebView,毕竟上面有个WAWebView文件 ,还有一个webviewSDK文件 。
当然无论是React + WebView,或者Vue + WebView都不重要,现在有了 WA + WebView了,哈哈。
WeApp采用的是如下图所示的提交方式,所以:
你在本地写的WeApp都会被提交到微信服务器,然后打包,上传到服务器,交给CDN——毕竟为了分发。
上传的过程大致如下:
好了,瞎扯完了,睡觉准备写继续写新书了。
The text was updated successfully, but these errors were encountered: