Flutter MiniProgram

A Flutter's mini-program development framework by parsing HTML、CSS and JS / Dart. This Project is inspired by FlutterHtmlView.

Features

Convert html tags to flutter widgets
Support use css to rendering flutter widgets
Support template compile and data binding

Framework

View layer

The view layer of the framework is written by html and css, and the view layer of the page is defined by the .html file, which is displayed by the component. The data of the logical layer is reflected into a view, and the events of the view layer are sent to the logical layer. A Component is the basic building block of a view.

<template>
    <view class="container">
        <text>{{message}}</text>
        <view class="m-10">
            <button type="primary" onTap="onEvaluateJavascript()">evaluateJavascript</button>
        </view>
    </view>
</template>

<script>
Page({
    config: {
        "navigationBarTitleText": "Flutter MiniProgram - JS-API"
    },
    data: {
        message: "Hello Flutter's MiniProgram"
    },
    onLoad() {

    },
    methods: {
        onEvaluateJavascript: function() {
            log('onEvaluateJavascript');
        }
    }
});
</script>

<style>
.container {
    padding: 10px;
}
.m-10 {
    margin: 10px;
}
</style>

Logic Layer

The logic layer of the mini-program development framework is developed using JS / Dart syntax, and the organization of the view logic and native plugin calls are done through the Dart / Flutter plugin. The logic layer processes the data and sends it to the view layer, while accepting event feedback from the view layer.

Page({
    config: {
        "navigationBarTitleText": "Flutter MiniProgram - JS-API"
    },
    data: {
        message: "Hello Flutter's MiniProgram"
    },
    onLoad() {

    },
    methods: {
        onEvaluateJavascript: function() {
            log('onEvaluateJavascript');
        }
    }
});

Component

View

A view container, equivalent to the div tag of the Web or the View component of React Native.

API

Attribute name	Types	Description
class	String	Custom style name
style	String	Inline style
onTap	EventHandle	Click event
onLongTap	EventHandle	Long press event

ufully/flutter-mini-program