To develop native components based on HTML tags, we first need to parse the HTML. Here, we parse the HTML into JSON strings through node script, and then use Dart to parse THE JSON and map the corresponding tags to the components of flutter. Here is a brief introduction to the realization of the function and display effect, and then more details.

Part 1 HTML

For efficient parsing, flutter component names are developed directly in HTML files

  • The file directories are as follows:

  • config
{
  "navigationBarTitleText": ""."backgroundColor": "#eeeeee"."enablePullDownRefresh": true  
}
Copy the code
  • 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>
Copy the code
  • CSS styles
/* 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;
}

Copy the code
  • Js interaction
/** home */
Page({
    /** * page data */
    data: {
        list: []},/** * triggered when the page loads. A page is called only once, and you can get the parameters in the onLoad argument to open the current page path. * /
    onLoad(e) {
        cc.setNavigationBarTitle({
            title: 'Python Series'
        }); 
        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: 'Load successful'
                });
            },
            fail: function (error) {
                console.log('request error:' + JSON.stringify(error));
                cc.showToast({
                    title: 'Load failed'
                });
            },
            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);
    },

    /** * triggered when the page is uninstalled. Such as cc.redirectTo or cc.navigateBack to other pages. * /
    onUnload() {

    }
});
Copy the code

2 Rendering Effect

3 Components

Use the components of flutter directly

1.1 components

1.1.1 Layout Class components

  • Linear layout (Row and column)
  • Flexible Layout (Flex)
  • Flow layout (WRAP, flow)
  • C-21. Stack, stack
  • Alignment and relative positioning (align)

1.1.2 Basic Components

  • text
  • image
  • raisedbutton
  • circularprogressindicator

1.1.3 Container Components

  • Padding
  • Constrainedbox, constrainedbox
  • DecoratedBox
  • Transform
  • The container vessel
  • Clip

1.1.4 Scrollable components

  • singlechildscrollview
  • listview
  • gridview

4 Api

Mimicking the Api of wechat applets, CC corresponds to wX of wechat applets

4.1 interface

4.4.1 interaction

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

4.1.2 background

  • cc.setBackgroundColor

4.1.3 the navigation bar

  • cc.setNavigationBarTitle
  • cc.setNavigationBarColor

4.1.4 Drop-down Refresh

  • cc.startPullDownRefresh
  • cc.stopPullDownRefresh

4.2 the network

2 cc. The request

The example in HTML above

5 framework

5.1 Grammar Reference

5.1.1 Data Binding

Dynamic data in HTML comes from data corresponding to the Page.

Double curly braces {{}} wrap the variable

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

Page({
  data: {
    message: "hello world"}})Copy the code

5.1.2 List rendering

  • cc:for

Bind an array with the CC :for control property on the component to render the component repeatedly using the data from the items in the array.

By default, the subscript variable name of the current item in the default array is index, and the variable name of the current item in the default array is item

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

Page({
  data: {
    array: [{
      name: 'first',
    }, {
      name: 'second'}]}})Copy the code

Use cc:for-item to specify the variable name of the current element of the array,

We can use cc:for-index to specify the variable name of the current index of the array:

<column>
    <text cc:for="{{array}}" cc:for-index="idx" cc:for-item="itemName">
      {{idx + The '-' + itemName.name}}
    </text>
</column>
Copy the code
  • Cc: for nesting
<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]}})Copy the code

6 the API demos

7 Real-time Debugging

  • Source code address: portal
  • Series of articles:

Development of a Small Application Engine with Flutter + V8 (PART 2)

Development of a Small Application Engine with Flutter + V8 (part 3)