使用Flutter + V8開發小程序引擎（一）

時間 2019-11-06

標籤使用 flutter v8 開發程序引擎简体版

原文原文鏈接

衆所周知，小程序是由HTML標籤來開發原生組件，那麼首先須要將HTML作解析，這裏咱們將HTML經過node腳本解析成JSON字符串，再用Dart來解析JSON，映射對應的標籤到flutter的組件。這裏先簡單介紹實現的功能以及展現效果，後續再詳細介紹。css

1 HTML部分

爲了高效解析，直接用flutter的組件名在HTML文件上開發html

config

{
  "navigationBarTitleText": "",
  "backgroundColor": "#eeeeee",
  "enablePullDownRefresh": true  
}
複製代碼

HTML

<!DOCTYPE html>
<html lang="en" html-identify="CC">

<head>
    <meta charset="UTF-8" />
    <style type="text/css" media="screen">
        @import "home.css";
    </style>
</head>

<body>
    <singlechildscrollview>  
        <column>   
            <container id="btn-container" cc:for="{{list}}"> 
                <raisedbutton id="raised-button" bindtap="onItemClick" data-index="{{index}}">
                    <row>
                        <container id="image-container">
                            <image src="{{item.image}}" />  
                        </container>
                        <expanded>  
                            <column id="column-text">
                                <text id="text-title">{{item.title}}</text>
                                <text id="text-publisher">{{item.publisher}}</text> 
                                <text id="text-summary">{{item.summary.substring(0, 20) + '...'}}</text>    
                            </column>
                        </expanded>
                    </row>
                </raisedbutton>
            </container>
        </column>
    </singlechildscrollview>
</body>

</html>
複製代碼

css樣式

/* home */
.btn-container{
    margin-top:10;
    margin-left: 10; 
    margin-right: 10;
}

.raised-button {
    color: white;
}

.image-container {
    width: 100px; 
    height:100px; 
    padding: 5;
}

.column-text {
    cross-axis-alignment: start;
}

.text-title {
    font-size: 14px;
    color: black;
}

.text-publisher {
    font-size: 12px;
    color: gray;
}

.text-summary {
    font-size: 12px;
    color: gray;
}

複製代碼

js交互

/** home */
Page({
    /** * 頁面數據 */
    data: {
        list: [],
    },

    /** * 頁面加載時觸發。一個頁面只會調用一次，能夠在 onLoad 的參數中獲取打開當前頁面路徑中的參數。 */
    onLoad(e) {
        cc.setNavigationBarTitle({
            title: 'Python系列叢書'
        }); 
        cc.showLoading({});
        this.doRequest(true);  
    },

    doRequest(isOnload) {
        let that = this;
        cc.request({
            url: 'https://douban.uieee.com/v2/book/search?q=python', 
            data: {},
            header: {},
            method: 'get',
            success: function (response) {
                that.setData({
                    list: response.body.books
                });
                cc.showToast({
                    title: '加載成功'
                });
            },
            fail: function (error) {
                console.log('request error:' + JSON.stringify(error));
                cc.showToast({
                    title: '加載失敗'
                });
            },
            complete: function () {
                console.log('request complete');
                if (isOnload) {
                    cc.hideLoading(); 
                } else {
                    cc.stopPullDownRefresh();
                }
            } 
        });
    },

    onItemClick(e) {
        var item = this.data.list[e.target.dataset.index];  
        cc.navigateTo({ 
            url: "detail?item=" + JSON.stringify(item)
        });
    },   

    onPullDownRefresh() { 
        console.log("onPullDownRefresh");
        this.doRequest(false);
    },

    /** * 頁面卸載時觸發。如cc.redirectTo或cc.navigateBack到其餘頁面時。 */
    onUnload() {

    }
});
複製代碼

2 渲染效果

3 組件部分

直接使用flutter的組件node

1.1 組件

1.1.1 佈局類組件

線性佈局（row和column）
彈性佈局（flex）
流式佈局（wrap、flow）
層疊佈局（stack、positioned）
對齊與相對定位（align）

1.1.2 基礎組件

text
image
raisedbutton
circularprogressindicator

1.1.3 容器類組件

填充（padding）
尺寸限制類容器（constrainedbox等）
裝飾容器（decoratedbox）
變換（transform）
container容器
剪裁（clip）

1.1.4 可滾動組件

singlechildscrollview
listview
gridview

4 Api

模仿微信小程序的Api，cc對應是微信小程序的wxpython

4.1 界面

4.1.1 交互

cc.showToast
cc.showLoading
cc.hideToast
cc.hideLoading
...

4.1.2 背景

cc.setBackgroundColor

4.1.3 導航欄

cc.setNavigationBarTitle
cc.setNavigationBarColor

4.1.4 下拉刷新

cc.startPullDownRefresh
cc.stopPullDownRefresh

4.2 網絡

4.2.1 cc.request

以上HTML中的例子git

5 框架

5.1 語法參考

5.1.1 數據綁定

HTML 中的動態數據均來自對應 Page 的 data。github

雙大括號 {{}} 將變量包起來json

<text>{{message}}</text>

Page({
  data: {
    message: "hello world"
  }
})

複製代碼

5.1.2 列表渲染

cc:for

在組件上使用 cc:for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。小程序

默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item微信小程序

<column>
    <text cc:for="{{array}}">
      {{index + '-' + item.name}}
    </text>
</column>  

Page({
  data: {
    array: [{
      name: 'first',
    }, {
      name: 'second'
    }]
  }
})
複製代碼

使用 cc:for-item 能夠指定數組當前元素的變量名，數組

使用 cc:for-index 能夠指定數組當前下標的變量名：

<column>
    <text cc:for="{{array}}" cc:for-index="idx" cc:for-item="itemName">
      {{idx + ' - ' + itemName.name}}
    </text>
</column>
複製代碼

cc:for 嵌套

<column>
    <row cc:for="{{array1}}" cc:for-item="i">
        <text cc:for="{{array2}}" cc:for-item="j">
            {{'i * j = ' + i * j}}
        </text>
    </row>
</column>
Page({
  data: {
    array1: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    array2: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  }
})

複製代碼