首页 › 教程频道› 小程序开发 › 查看内容

微信小程序的一个web实现（浏览器Chrome运行）

作者：模板之家 2018-2-7 10:30 6092人关注

自从接触微信小程序以来，就希望能把小程序放到web中运行，但自己对VirtualNode，React等都不熟悉，只能慢慢学习。这几天常使用React-Native做一个小的app，练手。但遇到了很多困难。比

自从接触微信小程序以来，就希望能把小程序放到web中运行，但自己对VirtualNode，React等都不熟悉，只能慢慢学习。

这几天常使用React-Native做一个小的app，练手。但遇到了很多困难。比如android很多组件不全的问题，全部需要git，npm去找，然后自己写本地模块。。。开发效率可以说是低爆了。

读取的资料：

笔记1 让你的「微信小程序」运行在 Chrome 浏览器上

其中介绍了它对微信源代码的分析。
给出了预览
GitHub: https://github.com/phodal/weapp-webdemo
预览： http://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
（引用 http://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('http://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)