应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

前端之巅:在Chrome浏览器上运行微信小程序

发布时间:2024-01-01 00:00 浏览次数:97

微信小程序的研发框架体验出来,还极好——自带了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/

TAG标签:
阅读推荐