介绍
小编给大家分享一下微信小程序在Chrome浏览器上运行以及WebStorm的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
“微信小程序”的开发框架体验起来,还不错,自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕,其实主要是因为,我当时买WebStorm许可证买了好多年。所以,我觉得他的IDE真不如我这个付费好用。
而且,作为一个拥护自由和开源的“GitHub中国区首席减价程序员”。微信在“微信小程序”引导着网络开向封闭,我们再也不能愉快地分享我们的代码了。
如果我们放任下去,未来的网络世界令人堪忧。
好了,废话说完了:
文章太长不想看,可以直接看演示哈哈:
GitHub: https://github.com/phodal/weapp-webdemo
预览:http://weapp.phodal.com/
<强>真实世界下的米娜三基本元素
“微信小程序”的背后运行的是一个名为米娜框架。在之前的几篇文章里,我们介绍得差不多了。现在让我们来作介绍管道:
变换wxml和wxs
当我们修改完wxml, wxs的时候,我们需要重新编译项目才能在浏览器上看到效果。这时候后台就会执行一些变换动作:
1。“来转换wxml为一个genrateFun,执行这个方法将会得到一个虚拟dom
2。wxs就会转换wxs为css——这一点有待商榷。
“和wxs,可以从供应商目录下获取到,在“微信网页开发者工具”下敲入的帮助,你就会得到下面的东东:
运行openVendor(),你就会得到上面的wcs, wxs, WAService.js WAWebview。js四个文件了。
<强>变换js文件
对于js文件来说,则是一个拼装的过程,如下是我们的应用。js文件:
应用程序({
onLaunch: function (), {,}
}) 它在转换后会变成:
定义(“app.js",,函数(要求,模块){var 窗口={数学:数学}/*兼容巴贝尔*/,位置、文档,导航,自我,localStorage,历史,缓存;
应用程序({才能
,,,onLaunch: function (), {
,,}
})才能
});
要求(“app.js"); 我假装你已经知道这是什么了,反正我也不想,也不会解释了~ ~。同理于:
定义(“页/索引/index.js",,功能模块(,,){var 窗口={数学:数学}/*兼容巴贝尔*/,位置、文档,导航,自我,localStorage,历史,缓存;
页面({才能
,,,数据:{
,,,文字:initData
,,}
,,});
,要求(“页面/索引/index.js"); 至于它是如何取代或者apend到html中,我就不作解释了。
米娜如何运行吗?
为了运行一个页面,我们需要有一个虚拟的dom,即用“转换后的函数,如:
/* v0.7cc_20160919 */var 才能;gwxc美元
var gaic美元才能={}
美元才能gwx=function(道路、全球){
,,function _ (a, b) {b&, a.children.push (b);}
,,function _n”(标签){gwxc + +美元;如果(gwxc>美元=16000){throw & # 39;,, dom limit 超过,,你不要\ & # 39;t do stupid ,, do 你? & # 39;};return {标签:tag.substr (0, 3)==& # 39; wx & # 39; ?标签:& # 39;wx & # 39; +标签,attr:{},孩子:[]}}
,,function _(范围、env键){return typeof(范围(例子))!=& # 39;未定义# 39;?范围(例子):env(例子)}
,,function _wl (tname) {console.warn (& # 39; template “& # 39;, +, tname +, & # 39;”, is being call 递归,,will be 停止# 39;公司)}
,,function _ai (i, p, e,我){var x=_grp (p, e,我);如果(x) i.push (x);其他{console.warn (& # 39; path “& # 39; + p + & # 39;”, not found 得到的& # 39;+我+ & # 39;“& # 39;)}}
,,function _grp (p, e,我){如果(p [0] !=& # 39;/& # 39;) {var mepart=me.split (& # 39;/& # 39;); mepart.pop (); var ppart=p.split(& # 39;/& # 39;);为(var 我=0;i 然后在我们的html中加一个脚本,如
