使用Flutter + V8开发小程序引擎(一)

9,676 阅读2分钟

以微信小程序作为栗子,由HTML标签来开发原生组件,那么首先需要将HTML做解析,这里我们将HTML通过node脚本解析成JSON字符串,再用Dart来解析JSON,映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果,后续再详细介绍。

1 HTML部分

为了高效解析,直接用flutter的组件名在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的组件

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对应是微信小程序的wx

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中的例子

5 框架

5.1 语法参考

5.1.1 数据绑定

HTML 中的动态数据均来自对应 Page 的 data。

双大括号 {{}} 将变量包起来

<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开发小程序引擎(三)》