使用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]
  }
})

复制代码

6 API 演示

7 实时调试

源码地址：传送门
系列文章：

《使用Flutter + V8开发小程序引擎（二）》

《使用Flutter + V8开发小程序引擎（三）》