A Flutter's mini-program development framework by parsing HTML、CSS and JS / Dart. This Project is inspired by FlutterHtmlView.
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>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');
}
}
});A view container, equivalent to the div tag of the Web or the View component of React Native.
API
| Attribute name | Types | Defaults | Description |
|---|---|---|---|
| class | String | Custom style name | |
| style | String | Inline style | |
| onTap | EventHandle | Click event | |
| onLongTap | EventHandle | Long press event |