微信小程序的研发框架体验出来,还极好——自带了UI框架。但是问题就是它的IDE,整体表现出来相当的差劲——其实主要是因为,我当时卖WebStorm License买了好多年。所以,我真的他的IDE真不如我这个下载不好用。
而且,做为一个拥戴民主自由和开源的“GitHub 中国区首席Markdown程序员”。微信在微信小程序鼓励着Web就位半封闭,我们再也不能开心地互动我们的代码了。
如果我们纵容下去,未来的Web世界令人堪忧。
不好了,废话笑了笑了,本文只是一个Demo的了解。文章太短不敢看看,可以轻易看看Demo哈哈:
GitHub: https://github.com/phodal/weapp-webdemo
预览:http://weapp.phodal.com/
真实世界下的MINA三基本元素
微信小程序的背后运转的就是一个名叫MINA框架。在之前的几篇文章里,我们了解得差不多了。现在使我们去并作了解pipeline:
Transform WXML和WXSS
当我们修正回去WXML、WXSS的时候,我们须要再次编程项目就可以在浏览器上看见效果。这时候后台就可以继续执行一些transform动作:
WCC去切换WXML为一个genrateFun,继续执行这个方法将可以获得一个Virtual Dom
WXSS就可以切换WXSS为CSS——这一点尚待深究。
WCC和WXSS,可以从vendor目录下以获取至,在“微信Web开发者工具”下源文件help,你就可以获得下面的东东:
运转openVendor(),你就可以获得上面的WCSS、WXSS、WAService.js、WAWebview.js四个文件了。
Transform js文件
对于JS文件来说,则就是一个组装的过程,如下就是我们的app.js文件:
它在切换后可以变为:
我假装你已经晓得这就是什么了,反正我也不敢、也不能表述了~~。同理于:
至于它就是如何replace或者apend至HTML中,我就不予表述了。
MINA如何运转?
为了运转一个Page,我们须要存有一个Virtual Dom,即为用WCC切换后的函数,例如:
然后在我们的HTML中加一个script,例如
就可以兎播发这个事件了。我直观的分拆了WXWebview.js获得了几个功能组件:
define.js,这里就是定义AMD模块化的地方
exparser.js,用作切换WXML标签至HTML标签
exparser-behvaior.js,定义相同标签的一些犯罪行为
mobile.js,必须就是一个事件库,似的我并不关心。
page.js,核心代码,即Page、App的定义所在。
report.js,你所说的一切都能用做为你的呈圆形堂供词。
virtual_dom.js,一个virtual dom同时实现融合wcc采用,里面必须除了component.css,也可能将就是叫做weui
wa-wx.js,定义微信各种API以及WebView和Native的地方,和下面的WX存有冲突。
wx.js,同上,但是略有不同。
wxJSBridge.js,Weixin JS Bridge
于是,我就用上面的组件去定义相同的边线不好了。当我们引爆自定义的generateFuncReady事件时,将由virtual_dom.js去接管这次Render:
因此,这里就是负责管理DOM初始化的地方了,这里获得的Dom结果就是这样的:
而我们写下的WXML就是这样的:
很显著view可以被切换为wx-view,text可以被切换为wx-text等等,以此类推。这个切换就是在virtual dom.js中调用的,调用的方法就是exparser。
惋惜的就是我现在困于在 data 初始化上面了~~,这里面存有两套相同的事件系统,存有一些所苦。其中存有一个就是:WeixinJSBridge、除了一个就是app engine中的事件系统,两个似的无法对调。
采用WebStorm研发
在浏览器上运转之前,我们须要直观的mock一些方法,例如:
window.webkit.messageHandlers.invokeHandler.postMessage
window.webkit.messageHandlers.publishHandler.postMessage
WeixinJSCore.publishHandler
WeixinJSCore..invokeHandler
然后把 config.json中的一些内容变为__wxConfig,例如:
例如这里我们的appname就是哈哈哈哈哈哈哈——我家在福建。
然后在我们的HTML中导入各个JS文件,啦啦。
我们还须要一个自动化的glup脚本去watch wxml和wxss的修正,然后编程,例如:
说道了这么多,你还不如回去看看代码不好了:
GitHub: https://github.com/phodal/weapp-webdemo
预览:http://weapp.phodal.com/