2. 程式人生 > >讓微信小程式在瀏覽器和自己的App中執行--自己寫的一個開源框架FreeMina（開發中。。）

讓微信小程式在瀏覽器和自己的App中執行--自己寫的一個開源框架FreeMina（開發中。。）

阿新 • • 發佈：2019-02-06

FreeMina： An open mina compatible framework for running in browser or webview.

一個相容微信小程式Mina框架的開源框架

從小程式的設計來看，微信正走向封閉生態。我們開發的微信小程式很難在其他地方使用。

最近一段時間，我花了大量精力來查詢相關資料。包括React、React Native。我本來不算一個JS程式設計師，但也為此學習或瞭解了Bable
WebPatch，ES2015等等一系列我原本不熟悉的內容。

真正有巨大收穫的是 @phodal 大神發的五篇文章，
它還做了一個for fun的框架winv。 仔細學習了這個框架，並提交了一個補丁，改善了一點點小功能。昨天晚上，我就在考慮到底是在這個框架上修改，還是自己開一個。

反覆思量，覺得如果要改進，那麼基本上要重寫所有的程式碼，和重開一個無益。
一個專案初始的架構很重要，差的架構讓人難以提起改進的興趣。另外，大神有6個月沒有更新專案了。

總之，再次感謝 @phodal 。

注：專案正在開發中。。。。。

設計目的和計劃

完全相容微信小程式的所有API。讓微信小程式能移植到自己的APP上。

當然這個目標從現在看有些“巨集偉”了。

要做的工作：
* 解析wxml dom，並生成相應的html。
這一點， @phodal 已經做了大量的貢獻。但效能需要改進一下。
另外，我學習了facebook的diff演算法，準備在今後的改進中加入。

  • wxml中{{}}格式資料的處理。我給winv這個專案添加了 {{obj.name}}這樣的支援。
    但還缺少if和for這兩個非常重要的環節。

  • 事件系統。 目前已經實現了一些，但還遠遠沒有完成。但大體的設計已經有了。

  • 打包等專案工具 。 微信小程式將所有的檔案全部打包在一起。這個並非簡單的用
    webpack進行打包。還對程式作了一定的預處理。對於將xml生成為js的做法，我覺得還需要考慮，到底需不需要這麼做。
    json的處理相對簡單，require進去就好。

    我實現打包工具的思路是

    1. 首先給Page打包，給新增上兩個引數，把xml和檔名一起傳給Page函式。
    2. 使用webpack等工具打包到一起。

  • App支援。 wx中有很多函式，沒有App的幫助是無法實現的。
    這一部分的做法

    1. 在web中能用web試下你的用web實現，不能實現的暫不實現。
    2. 在App中，給出原生支援。。不過我目前只會android。蘋果的沒錢買那麼貴的裝置。畢竟玩票性質。。。

實現方案

專案工具

整個專案使用nodejs管理。使用gulp完成編譯和監視檔案自動編譯的功能。
使用bable進行ES6的轉義。 直接拿了別人專案的配置。。。（羞。。。）
詳見package.json

專案入口

專案的入口是src/freemina.js

/**
 * Created by Tongfeng Yang on 2017/1/25.
 */
import Page from './Page'
import App from './App'
import FException from './FException'

const freemina={
    addPage(opt,name,wxml){
        console.log("add Page :"+name);
        if(!window.App ){
            throw new FException("App() function should be called before calling Page");
        }
        let p = new Page(opt,name);
        p.setWXml(wxml);
        window.App.addPage(name,p);
    },

    setApp(opt){
        console.log("set App called");
        window.App = new App(opt);
    },

    start(){
        window.Page  = this.addPage;
        window.App = this.setApp;
//        let e = new CustomEvent('onLaunch',{});
//        window.App.eventHandler(e)
    },
    finishLoad(){
        var e={type:"onLaunch",detail:{}};
        window.App.eventHandler(e);
    }

}

export default  freemina;

包含了setApp和addPage方法，這個方法在start方法中被暴露到window中，
所以，就可以使用App({})和Page({})的方法來使用它們。
setApp直接建立App類。 addPage方法首先建立Page物件，隨後呼叫App的addPage方法
將其加入管理之中。並使用setWxml將wxml設定進去。

App類

先看程式碼

/**
 * Created by Tongfeng Yang on 2017/1/25.
 */

export default  class App{

    constructor(opt){
        this.opt = opt;
        this.pageMap = [];

        this.addPage=this.addPage.bind(this);
        this.eventHandler=this.eventHandler.bind(this);
        this.render=this.render.bind(this);
        this.regEvent.bind(this)();
    }

    regEvent(){

        document.addEventListener("onShow",(e)=>{
            //onLoad function of page is called succ

        });
    }

    addPage(name,p){
        if(this.pageMap.length==0){
            this.curPage = p;
        }
        p.setName(name);

        this.pageMap[name] = p;
    }

    eventHandler(e){ //CustomEvent
        if(this.opt[e.type]){
            this.opt[e.type](e.detail);
        }
        if(e.type == "onLaunch"){
            let ename = this.curPage.name+"_onLoad";
            e= new CustomEvent(ename,{});
            document.dispatchEvent(e);
        }
    }

    render(){
        if(this.curPage){
            curPage.render();
        }
    }

}

使用ES6實現的，老實說，如果不是能用class，我是不願意入js這個坑的。
但一堆堆的bind還是亮瞎了我眼。。。

App物件維護一個Page物件列表。和一個curPage指向當前物件。
目前，預設認為第一個註冊的Page是入口。（因為還沒實現App的配置，所以暫時忍一下吧！！！）

下面是事件處理的核心eventHandler。
我們在寫App時這麼寫：
App({
onLaunch:function(){…}
})
這個傳進app的是一個物件或者說是hashmap。在app的建構函式中，傳遞給了this.opt
eventHandler被呼叫時，給出了一個e，這個e可以是CustomEvent，也可以是

{type:'onLaunch',detail:{}}

這樣的物件。如果收到上述的這個onLaunch訊息，這個函式就會判斷opt中（就是你傳進的物件）
是否有這個方法。如果有，則呼叫它。

呼叫萬onLaunch開始呼叫Page的onLoad了。怎麼呼叫呢？
在這裡發出一個訊息。如果頁面的名字是index，那麼就發出
index_onLoad訊息。index這個頁面會監聽這個訊息，進而收到這個onLoad事件。

下面來看Page的實現

Page的實現

先貼程式碼。

/**
 * Created by Tongfeng Yang on 2017/1/25.
 */
import WXmlParser from "./WXmlParser"

const event_list = [
    'onLoad','onDestory','render'
];
export default class Page{
    constructor(opt){
        this.opt = opt;


        this.eventHandler=this.eventHandler.bind(this);
        this.registerEventHandler=this.registerEventHandler.bind(this);
        this.removeEventListener=this.removeEventListener.bind(this);
        this.setName=this.setName.bind(this);
        this.render=this.render.bind(this);
        this.setWXml=this.setWXml.bind(this);
        this.fireMyEvent = this.fireMyEvent.bind(this);
        this.getData =this.getData.bind(this);
    }

    setName(name){
        if(name == this.name)return;
        this.removeEventListener();
        this.name = name;
        this.registerEventHandler();
    }

    removeEventListener(){
        for(var e in event_list ){
            let ename = event_list[e];
            console.log("removeEventListener:"+this.name+'_'+ename);
            document.removeEventListener(this.name+'_'+ename);
        }
    }

    registerEventHandler(){
        for(var e in event_list ){
            let ename = event_list[e];
            console.log("addEventListener:"+this.name+'_'+ename);
            document.addEventListener(this.name+'_'+ename,this.eventHandler);

        }
    }

    getData(){
        return this.opt.data;
    }

    eventHandler(e){ //CustomEvent
        console.log("page this = "+this);
        console.log(this);
        let type = e.type.slice(this.name.length+1); // eg : index_onLoad , remove 'index_'
        console.log("recv event "+e.type);
        if(this.opt[type]){
            this.opt[type]({});
        }else if(this[type]){
            this[type].bind(this)();
        }else{
            console.log("Page: unknown event "+ type);
        }
        if(type == 'onLoad'){ //if onload finish ,start to render
            this.render();
            //this.fireMyEvent.bind(this)('render');
        }
    }


    setWXml(wxml){
        this.wxml = wxml;
    }

    render(){
        console.log("render called");
        let template = this.wxml;
        let parser =new WXmlParser(this.getData());
        let domJson = parser.stringToDomJSON(template)[0];
        let dom = parser.jsonToDom(domJson);
        document.getElementById('app').appendChild(dom);
        this.fireEvent('onShow');//for App object
    }
    fireMyEvent(type){
        type = this.name+"_"+type;
        console.log("fireEvent "+type);
        document.dispatchEvent(new CustomEvent(type,{}));

    }
    fireEvent(type){
        console.log("fireEvent "+type);
        document.dispatchEvent(new CustomEvent(type,{}));
    }

}

建構函式中又是一堆晃瞎我眼的bind。另外你換進來的那個物件仍然被存到了opt中。
setName 函式是被App呼叫的。 設定了這個頁面的名字。在名字設定後，就會註冊一堆事件監聽者。
註冊的列表在event_list這個變數裡。以後這個列表可以逐漸完善。
上面說到的那個index_onLoad事件就是通過頁面名字和事件名拼接出來的。

事件監聽函式是eventHandle。把onLoad這個字眼從index_onLoad中切除來。

        let type = e.type.slice(this.name.length+1); // eg : index_onLoad , remove 'index_'

然後查詢this.opt就是你傳進來的那個物件是否有onLoad的宣告。
如果有，則呼叫，如果沒有，則嘗試在this中查詢，如果還是沒有，就真的沒有了。

下面說比較重要的渲染問題

WXmlParser渲染wxml檔案

這部分參考了winv,裡面也有少量我貢獻的嗲嗎，我只是對其做了重構，以方便呼叫。看程式碼

/**
 * Created by Tongfeng Yang on 2017/1/25.
 * Some code copied from https://github.com/phodal/winv  ,which is under MIT .
 */

class Utils{
    removeTemplateTag(str){
        return str.substr(2, str.length - 4);
    }

    isTemplateTag(string){
        return /{{[a-zA-Z1-9\\.]+}}/.test(string);
    }
}
export default class WXmlParser{
    constructor(data){
        this.data= data;
        this.stringToDomJSON=this.stringToDomJSON.bind(this);
        this.nodeToJSON=this.nodeToJSON.bind(this);
        this.jsonToDom=this.jsonToDom.bind(this);
        this.domParser = this.domParser.bind(this);
        this.getData = this.getData.bind(this);
        this.utils  = new Utils();
    }

    stringToDomJSON(string){
        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;
    }

    getData(key) {
        if(!key)return null;
        var ka = key.split(".");
        var ret = this.data[ka[0]];
        for(var i = 1;i<ka.length;i++){
            if(!ret)return null; //can't find !
            ret= ret[ka[i]];
        }
        return ret;
    }

    nodeToJSON(node){
        // Code base on https://gist.github.com/sstur/7379870
        node = node || this;
        var obj = {
            nodeType: node.nodeType
        };
        if (node.tagName) {
            obj.tagName = 'winv-' + node.tagName.toLowerCase();
        } else if (node.nodeName) {
            obj.nodeName = node.nodeName;
        }
        if (node.nodeValue) {
            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)
    {
        // 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;
    }

    domParser(string){
        var parser = new DOMParser();
        return parser.parseFromString(string, 'text/xml');
    }
}

Page.js中的渲染函式


render(){
        console.log("render called");
        let template = this.wxml;
        let parser =new WXmlParser(this.getData());
        let domJson = parser.stringToDomJSON(template)[0];
        let dom = parser.jsonToDom(domJson);
        document.getElementById('app').appendChild(dom);
        this.fireEvent('onShow');//for App object
    }

基本原理首先通過DOMParser將wxml解析一下（domParser）。程式設計一個dom物件。將其
變為domJSON.然後再講domJSON轉換會dom物件。這一步中包含{{}}標籤的處理。
用的正則表示式匹配。

最後，這個問題還是很多的。 比如那個appendChild。。在後面的開發中會替換成
diff和apply。
渲染完了，傳送事件。

TODO

  1. 事件機制還不完善。
  2. 渲染的diff和apply的實現。
  3. setData這個核心的函式實現。
  4. 參照微信文件進行介面完全相容
  5. 完善wx的API函式（可能會用Android實現）
    IOS就算了，聽說基於WebView的通不過稽核！
    另外，我沒錢買Mac。。。

最後

感謝您的閱讀。如果有可能請貢獻些程式碼。。。

相關推薦

讓微信小程式在瀏覽器和自己的App中執行--自己寫的一個開源框架FreeMina（開發中。。）

FreeMina： An open mina compatible framework for running in browser or webview. 一個相容微信小程式Mina框架的開源框架 從小程式的設計來看，微信正走向封閉生態。我們開發的微信

微信小程式var和let以及const有什麼區別

微信小程式var和let以及const的區別：   在JavaScript中有三種宣告變數的方式：var、let、const。  var：宣告全域性變數，換句話理解就是，宣告在for迴圈中的變數，跳出for迴圈同樣可以使用。   for(var i=0;i<

微信小程式支付和退款

微信小程式支付的主要邏輯集中在後端，前端只需攜帶支付所需的資料請求後端介面然後根據返回結果做相應成功失敗處理即可。 本篇文章後端使用的是php，側重於整個支付的流程和一些細節方面的東西。所以使用其他後端語言的朋友有需要也是可以看一下的。 很多時候開發的需求和相應問題的解決

微信小程式 form和input組合使用獲取value為空的原因

<form bindsubmit='replayComment'> <view class='reply'> <input placeholder='

微信小程式定義和呼叫全域性變數globalData

如下：在全域性檔案app.js中定義全域性變數，在子頁面phone.js中獲取 1.現在app.js裡面定義globalData對應的全域性變數   2.然後在其他js檔案進行呼叫。例如在photo.js裡面 ps: 要注意的是需要在檔案開始的時候初

微信小程式滑動刪除功能，沒有元件自己擼了個Demo

http://bbs.larkapp.com/thread-13805-1-1.html 沒有高度封裝，有人願意封裝優化下的可以弄下 效果圖   1、wxml  touch-item元素綁定了bindtouchstart、bindtouchmove事件 [HTML] 純文字檢視 

微信小程式 require 和hidden不生效

1、微信小程式 沒有node.js的環境，require不生效； 2、微信小程式 hidden只在text上生效，在view中不生效 例子：<text hidden=“{{true}}”>我是文字</text> 3、微信小程式 <templat

微信小程式 tabbar和navigateTo、redirectTo之間的跳轉問題

如果頁面要跳轉到tabbar繫結的其中一頁，可以用wx.switchTab並且只能跳轉帶有tabbar的頁面 而redirectTo或者navigateTo則不能跳轉tabbar繫結過的頁面 wx

微信小程式——wxml和wxss檔案引用

為了減少程式負擔，有很多程式檔案是可以複用的，這時就用到了檔案的引用。 1、在wxml檔案中引用另一個wxml檔案： <include src="/pages/homeTop/top.wxml"/> 2、在wxss檔案中引用另一個wxss檔案： @i

如何讓微信小程式支援Cookie

  微信原生的 wx.request 網路請求介面並不支援傳統的 Cookie，但有時候我們現有的後端介面確於依賴 Cookie（比如伺服器使用者登入態），[weapp-cookie]這個庫可用一行程式碼為你的小程式實現 Cookie 機制，以保證基於 cookie 的服

微信小程式 模板和列表渲染

今天在開發小程式的時候，需要實現一個列表文章，而且每個item的佈局都一樣，所以我用了模板來實現：.wxml檔案<!--列表模板--> <template name="msgItem"> <view class='c

微信小程式載入和解析html標籤

    小程式的頁面可以是使用wx的語法編寫的頁面，也可以是第三方html頁面，還可以是wx的頁面然後使用wxParse解析html的標籤最終構成小程式可以載入的wx頁面。今天用到了第三種。    首先需要下載wxParse外掛，我生成了雲盤連結。    下載之後解壓並放置在

ssh中list轉化成json讓微信小程式接收

方法一    其中list為傳過來的集合（但是方法一會產生中文亂碼）      public void outt(List<Student> list){         HttpServ

微信小程式ios和安卓遇到的幾個坑兒

近來一個朋友問：手寫一個日曆，為什麼在安卓能遍歷顯示，而蘋果裡卻不顯示，你遇到過遍歷不出的bug嗎？ 首先解決下上述問題，我總結下我印象深刻的幾個坑~ 1.回答下最開始的那個問題，手寫一個日曆，為什麼在安卓能遍歷顯示，而蘋果裡卻不顯示？ 首先

讓微信小程式頁面之間的通訊不在變得困難

一個開始 小程式開發者總會碰到各種頁面之間的通訊問題，實現方式也五花八門，比如... 場景還原 首先這是一個電商小程式。 有這樣一個需求： 首頁某個地方要展示購物車商品數量。 當我在其他頁面加購了商品，首頁數量重新整理。 實現方式 方式一：onShow直接請求介面 Page({ onShow

讓微信小程式開發如魚得水

![](http://img.wawow.xyz/imgs/wxmplogo.jpg)   關於微信小程式開發一直想寫一篇相關的文章總結和記錄下，結果拖延症犯了遲遲沒有下筆；這不最近天氣不錯，於是找一個空閒的下午將這篇文章輸出下（好像跟天氣沒啥關係

微信小程式、安卓APP、蘋果APP對比分析

今天的話題主要是關於微信小程式、安卓APP、蘋果APP對比分析。既然是對比分析肯定是將它們一個一個說明。 本篇不涉及技術話題，只講解微信小程式、安卓APP、蘋果APP它們各自的優缺點及其應用場景。 一、微信小程式 1.微信小程式的優勢 (1)對使用者使用上來說，確實方便，要用的時候開啟，不用的時候關掉

微信小程式 新建專案並配置可執行的檔案目錄

新建專案 下載微信小程式開發者客戶端並開啟，選擇專案目錄和專案名稱，填入AppID，取消勾選快速啟動模板。 1. 新建全域性配置檔案 點選目錄左上角的+，新建字尾名為js, json, wxss（命名自定，如app.js）檔案，用

微信小程式全域性配置檔案app.json中window:backgroundColor“不生效”

標題中"不生效"帶著引號你就知道大概不是真的不生效了，而是沒搞明白這個屬性到底代表的是哪一部分的背景色。從小程式官方文件中看到圖1畫框處這樣的說明：圖1.以為指的是小程式中所有頁面的背景色，於是滿心歡喜的設定了這個屬性值，結果出現圖2的樣子：圖2以為是頁面的page.json

微信小程式wx.request請求沒反應，真機預覽測試請求無效問題解決總結。

我釋出之後發現，wx.request無法使用，用小程式開發工具測試的都沒有問題，而且校驗了合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書，都沒有任何問題，釋出之後，發現了問題，在網上看了很多說法，再次我用自己的理解做個總結。 測試了