自从接触微信小程序以来,就希望能把小程序放到web中运行,但自己对VirtualNode,React等都不熟悉,只能慢慢学习。
这几天常使用React-Native做一个小的app,练手。但遇到了很多困难。 比如android很多组件不全的问题,全部需要git,npm去找,然后自己写本地模块。。。 开发效率可以说是低爆了。
读取的资料:
笔记1 让你的「微信小程序」运行在 Chrome 浏览器上
其中介绍了它对微信源代码的分析。
给出了预览
GitHub: https://github.com/phodal/weapp-webdemo
预览: https://weapp.phodal.com/
微信小程序的三大组件的处理方法
js wxml 和 wcss
js被封装为一个包
define("app.js", function(require, module){var window={Math:Math} // 兼容babel/ ,location,document,navigator,self,localStorage,history,Caches; App({ onLaunch: function () { //这里是原本xx.js的内容 } }) }); require("app.js");
wxml被转义为function,即一个js文件
这个应该类似是react的jsx(拼写忘了!!!)的。
使用 "微信web开发者工具\package.nw\app\dist\weapp\onlinevendor"目录中的wcc可以完成这一任务
例子:
/*v0.7cc_20160919*/ var $gwxc var $gaic={} $gwx=function(path,global){ function _(a,b){b&&a.children.push(b);} function _n(tag){$gwxc++;if($gwxc>=16000){throw 'enough, dom limit exceeded, you don\'t do stupid things, do you?'};return {tag:tag.substr(0,3)=='wx-'?tag:'wx-'+tag,attr:{},children:[]}} function _s(scope,env,key){return typeof(scope[key])!='undefined'?scope[key]:env[key]} function _wl(tname){console.warn('template `' + tname + '` is being call recursively, will be stop.')} function _ai(i,p,e,me){var x=_grp(p,e,me);if(x)i.push(x);else{console.warn('path `'+p+'` not found from `'+me+'`')}} function _grp(p,e,me){if(p[0]!='/'){var mepart=me.split('/');mepart.pop();var ppart=p.split('/');for(var i=0;i<ppart.length;i++){if( ppart[i]=='..')mepart.pop();else if(!ppart[i])continue;else mepart.push(ppart[i]);}p=mepart.join('/');}if(me[0]=='.'&&p[0]=='/')p='.'+p;if(e[p])return p;if(e[p+'.wxml'])return p+'.wxml';} //以下省略好多字。
wcss被转义为css
使用上述目录下的wcsc文件可以将其转义为一个css文件。
$gwx函数的主要做用就是构造界面。
在下面的代码中被调用
javascript document.dispatchEvent(new CustomEvent("generateFuncReady", { detail: { generateFunc: $gwx('index.wxml') } }))
微信类库在哪里
在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
(引用 https://www.tuicool.com/articles/juquYfy)
渲染流程
先发送一个CustomEvent(参考 https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent)。
这个event被下面的函数接受并处理
document.addEventListener("generateFuncReady", function (e) { var generateFunc = e.detail.generateFunc; //就是我们$gwx函数生成的那个函数 wx.onAppDataChange && generateFunc && wx.onAppDataChange(function (e) { //如果不为空,则添加事件响应函数如下 var i = generateFunc((0, d.getData)()); //调用这个函数生成界面(这个d从哪里来的?应该是个页面,因为Page中有data变量) if (i.tag = "body", e.options && e.options.firstRender){ //如果是第一次渲染 e.ext && ("undefined" != typeof e.ext.webviewId && (window.__webviewId__ = e.ext.webviewId), "undefined" != typeof e.ext.downloadDomain && (window.__downloadDomain__ = e.ext.downloadDomain)), v = f(i, !0), b = v.render(), b.replaceDocumentElement(document.body), setTimeout(function () { wx.publishPageEvent(p, {}), r("firstRenderTime", n, Date.now()), wx.initReady && wx.initReady() }, 0); } else { var o = f(i, !1), a = v.diff(o); a.apply(b), v = o, document.dispatchEvent(new CustomEvent("pageReRender", {})); } }) })
这个函数,先是获取了e.detail。就是CustomEvent的第二个参数,我们给的一个对象。
然后获取了它的generateFunc这个函数就是我们前面定义的$gwx('index.wxml')的返回值(应该还是一个函数),也就是我们的界面渲染函数。
如果wx.onAppDataChange不为空,generateFunc也不为空,那么就添加触发函数给onAppDataChange。 在这个函数中,先调用generateFunc获取了界面,i应该是一颗dom树。
给i定义tag为body。然后如果是第一次渲染,就。。。。
后面还有一些diff和apply,大体知道意思。。。但整体没看太明白。
最后,git上给的demo没有跑起来,跑出来是空白一片。
读其他文件发现,$gwx('test.wxml')必须给出正确的wxml文件名和路径才能生成一个文件
然后调用这个函数就会生成一个json。
这种设计应该是为了能在一个js文件中包含所有的wxml而设计的。
一个微信小程序Mina的兼容框架
还是上一个文章同样的作者,在研究了微信的框架后,决定自己实现一个小程序的兼容框架。
这个框架在github https://github.com/phodal/winv
拜读了这篇文章。阅读了其中的代码
目前这个框架只是一个简单的demo而已。
这是winv.js的代码。 。。 额,之所以它起这个名字因为是MINA倒过来。。。恶趣味。
我加了一些注释
window.eventPool = []; window.globalData = {}; const winv = { parser() { }, components: [{ }], setTemplate(template){ //wxml的代码传到这里 this.template = template; }, appRun() { var template = this.template; var domJson = this.stringToDomJSON(template)[0]; //将wxml文件解析为一个json var dom = this.jsonToDom(domJson); //将json转义为自己的dom树 /** 微信为什么要这么干呢? 也许有几个原因。 一个是经过一次转化,可以有效的过滤掉那些它不喜欢的tag。只留下它允许的tag 另一个是不是要处理一下{{}}这种数据标签? **/ document.getElementById('app').appendChild(dom); for (var event in window.eventPool) { window.eventPool[event](); } }, Page (options) { //这是实现微信的那个Page函数,是一个页面管理。 option就是咱们创建的时候见的那个对象 for (var option in options) { //遍历这个对象所有的属性和方法 if ('on' === option.slice(0, 2)) { //如果是on开头的,那就是一个事件。 window.eventPool.push(options[option]); //都塞到eventPool里干嘛?有待商榷啊。。。。 } if ('data' === option) { //如果是data,将值放到globalData里。 这样写似乎只支持一个页面。。。 window.globalData = options[option]; } } }, App (options) { for (var option in options) { if ('on' === option.slice(0, 2)) { //如果是事件, 同样处理 window.eventPool.push(options[option]); } } }, getData: function updateData(key) { //获取数据 return window.globalData[key]; }, utils: { //几个工具方法 removeTemplateTag(str){ return str.substr(2, str.length - 4); }, isTemplateTag(string){ return /{{[a-zA-Z1-9]+}}/.test(string); } }, stringToDomJSON(string){ //添加包装后,将字符串转成json string = '<div class="page"><div class="page__hd">' + string + '</div></div>'; var json = this.nodeToJSON(this.domParser(string)); if (json.nodeType === 9) { json = json.childNodes; } return json; }, domParser(string){ //使用js自带的DomParser将字符串转成dom var parser = new DOMParser(); return parser.parseFromString(string, 'text/xml'); }, nodeToJSON(node){ //一个递归算法,将原始的dom树编程一个json // Code base on https://gist.github.com/sstur/7379870 node = node || this; var obj = { nodeType: node.nodeType }; if (node.tagName) { //如果tag名字存在,添加winv-前缀 obj.tagName = 'winv-' + node.tagName.toLowerCase(); } else if (node.nodeName) { obj.nodeName = node.nodeName; } if (node.nodeValue) {//如果有值,检查是不是模板,是的话,就获取数据进行替换。 //哎!这里还不支持if语句和for,任重道远啊。 obj.nodeValue = node.nodeValue; if(this.utils.isTemplateTag(node.nodeValue)){ obj.nodeValue = this.getData(this.utils.removeTemplateTag(node.nodeValue)); } } var attrs = node.attributes; if (attrs) { var length = attrs.length; var arr = obj.attributes = new Array(length); for (var i = 0; i < length; i++) { var attr = attrs[i]; arr[i] = [attr.nodeName, attr.nodeValue]; } } var childNodes = node.childNodes; if (childNodes) { length = childNodes.length; arr = obj.childNodes = new Array(length); for (i = 0; i < length; i++) { arr[i] = this.nodeToJSON(childNodes[i]); //递归调用,处理子 } } return obj; }, jsonToDom(obj) //JSON转回dom。额。。。react的diff在哪里? 这个算法比上react要差了啊。 { // Code base on https://gist.github.com/sstur/7379870 if (typeof obj == 'string') { obj = JSON.parse(obj); } var node, nodeType = obj.nodeType; switch (nodeType) { case 1: //ELEMENT_NODE node = document.createElement(obj.tagName); var attributes = obj.attributes || []; for (var i = 0, len = attributes.length; i < len; i++) { var attr = attributes[i]; node.setAttribute(attr[0], attr[1]); } break; case 3: //TEXT_NODE node = document.createTextNode(obj.nodeValue); break; case 8: //COMMENT_NODE node = document.createComment(obj.nodeValue); break; case 9: //DOCUMENT_NODE node = document.implementation.createDocument('https://www.w3.org/1999/xhtml', 'html', null); break; case 10: //DOCUMENT_TYPE_NODE node = document.implementation.createDocumentType(obj.nodeName); break; case 11: //DOCUMENT_FRAGMENT_NODE node = document.createDocumentFragment(); break; default: return node; } if (nodeType == 1 || nodeType == 11) { var childNodes = obj.childNodes || []; for (i = 0, len = childNodes.length; i < len; i++) { node.appendChild(this.jsonToDom(childNodes[i])); } } return node; } }; export default winv;
使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Winv Demo</title> <script src="./dist/winv.js"></script> <link rel="stylesheet" href="./styles/weui.css"> </head> <body> <div id="app"></div> </body> <script> var App = winv.App; var Page = winv.Page; App({ onLaunch: function() { console.log('On Launch'); } }); Page({ data: { motto: 'hello, world' }, onLoad: function() { console.log('On Load'); } }); winv.setTemplate('<view class="container"><text class="user-motto">{{motto}}</text></view>') winv.appRun(); </script> </html>
还是很像wx的。 App、Page、wxml(template)
关于这个winx框架
总体来看,这个框架就是一个玩具框架,它向我们展示了微信小程序的处理流程,但距离真正产品还差很远。
其一: 只支持一个页面。
其二: 页面的所有事件处理都没有整。
其三: 在运行期进行解析,程序的源代码都包含在内。(.wxml文件),不利于源码的保护。
我昨天在这个项目贡献了一些代码,添加了{{obj.name}}这种语法的支持。
我在考虑要不要在这个框架上做下去。。是否自己搭建一个框架。把react包装一下来实现?
还是只用它的webpack,自己写diff和apply?