Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhaomenghuan/flutter-mini-program
A Flutter's mini-program development framework by parsing HTML、CSS and JS / Dart.
https://github.com/zhaomenghuan/flutter-mini-program
css dart dynamic flutter flutter-view flutter-widgets html htmlview js miniprogram
Last synced: 3 months ago
JSON representation
A Flutter's mini-program development framework by parsing HTML、CSS and JS / Dart.
- Host: GitHub
- URL: https://github.com/zhaomenghuan/flutter-mini-program
- Owner: zhaomenghuan
- License: mit
- Created: 2018-12-29T02:50:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-08T16:00:36.000Z (almost 6 years ago)
- Last Synced: 2024-08-03T09:06:59.116Z (6 months ago)
- Topics: css, dart, dynamic, flutter, flutter-view, flutter-widgets, html, htmlview, js, miniprogram
- Language: Dart
- Homepage:
- Size: 932 KB
- Stars: 176
- Watchers: 10
- Forks: 38
- Open Issues: 2
-
Metadata Files:
- Readme: README-zh.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - flutter-mini-program - program development framework by parsing HTML、CSS and JS / Dart. | zhaomenghuan | 173 | (Dart)
README
# Flutter 小程序
一个基于 Flutter 框架的小程序开发框架。通过解析 HTML 标签 和 CSS 样式，用于开发小程序应用，项目灵感来自 [FlutterHtmlView](https://github.com/PonnamKarthik/FlutterHtmlView)。
## 特性
- 将 html 标签转换为 Flutter 组件
- 支持使用 css 样式渲染 Flutter 组件
- 支持模板编译及数据绑定
## 框架
### 视图层
框架的视图层由 html 与 css 编写，通过 .html 文件定义页面的视图层，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。组件(Component)是视图的基本组成单元。
```html
{{message}}
evaluateJavascript
Page({
config: {
"navigationBarTitleText": "Flutter MiniProgram - JS-API"
},
data: {
message: "Hello Flutter's MiniProgram"
},
onLoad() {
},
methods: {
onEvaluateJavascript: function() {
log('onEvaluateJavascript');
}
}
});
.container {
padding: 10px;
}
.m-10 {
margin: 10px;
}
```
### 逻辑层
小程序开发框架的逻辑层使用 JS / Dart 语法进行开发，通过 Dart / Flutter 插件完成视图逻辑的组织及原生插件调用。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
```dart
Page({
config: {
"navigationBarTitleText": "Flutter MiniProgram - JS-API"
},
data: {
message: "Hello Flutter's MiniProgram"
},
onLoad() {
},
methods: {
onEvaluateJavascript: function() {
log('onEvaluateJavascript');
}
}
});
```
## 组件
### 支持的组件
- view: 视图容器
- icon: 图标
- text: 文本
- br: 换行符
- hr: 水平分隔线
- p: 段落
- h1 ~ h6: 标题
- a: 链接
- button: 按钮
- input: 输入框
- checkbox: 复选框
- switch: 单选开关
- slider: 滑块
- image: 图片
- video: 视频
- table: 表格
- list-view: 列表
- web-view: 网页容器
### 视图
视图容器，相当于 Web 的 div 标签或者 React Native 的 View 组件。
#### API
| 属性名 | 类型 | 默认值 | 描述 |
|----------|:-------------:|------:|:-------------:|
| class | String | | 自定义样式名 |
| style | String | | 内联样式 |
| onTap | EventHandle | | 点击事件 |
| onLongTap | EventHandle | | 长按事件 |
### Button
按钮。
#### API
| 属性名 | 类型 | 默认值 | 描述 |
|----------|:-------------:|------:|:-------------:|
| size | String | default | 按钮的大小 |
| type | String | default | 按钮的样式类型 |
| plain | Boolean | false | 按钮是否镂空，背景色透明 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名称前是否带 loading 图标 |
#### 示例
```html
按钮
default
primary
warn
disabled 状态
default
primary
warn
loading 状态
default
primary
warn
plain 状态
default
primary
warn
按钮大小
default
primary
warn
```
### Switch
开关选择器。
#### API
| 属性名 | 类型 | 默认值 | 描述 |
|----------|:-------------:|------:|:-------------:|
| checked | Boolean | | 是否选中 |
| disabled | Boolean | | 禁用状态 |
| size | double | | 自定义大小 |
| color | String | | 自定义颜色 |
| onChange | EventHandle | | checked 改变时触发 |
### 文本输入框
文本输入框, 相当于 Web 的 input 标签 或者 iOS 中的 UITextField 和 Android 中的 EditText。
| 属性名 | 类型 | 默认值 | 描述 |
|----------|:-------------:|------:|:-------------:|
| type | String | | input 的类型 |
| placeholder | String | | 占位符 |
| focus | Boolean | false | 获取焦点 |
```html
这是一个可以自动聚焦的input:
数字键盘:
```
### 图片
API
| 属性名 | 类型 | 默认值 | 描述 |
|----------|:-------------:|------:|:-------------:|
| class | String | | 自定义样式名 |
| style | String | | 内联样式 |
| src | String | | 图片路径 |
| fit | String | | 图片裁剪、缩放的模式, fill | contain | cover | fitWidth | fitHeight | none | scaleDown |
```html
网络图片：
本地图片：
图片裁剪模式 fit = "fill":
```