{"id":13669946,"url":"https://github.com/zhaomenghuan/flutter-mini-program","last_synced_at":"2025-04-27T09:31:13.920Z","repository":{"id":63700009,"uuid":"163469313","full_name":"zhaomenghuan/flutter-mini-program","owner":"zhaomenghuan","description":"A Flutter's mini-program development framework by parsing HTML、CSS and JS / Dart.","archived":false,"fork":false,"pushed_at":"2019-04-08T16:00:36.000Z","size":954,"stargazers_count":176,"open_issues_count":2,"forks_count":38,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-08-03T09:06:59.116Z","etag":null,"topics":["css","dart","dynamic","flutter","flutter-view","flutter-widgets","html","htmlview","js","miniprogram"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhaomenghuan.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-29T02:50:56.000Z","updated_at":"2024-08-03T09:06:59.117Z","dependencies_parsed_at":"2022-11-24T06:22:48.076Z","dependency_job_id":null,"html_url":"https://github.com/zhaomenghuan/flutter-mini-program","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaomenghuan%2Fflutter-mini-program","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaomenghuan%2Fflutter-mini-program/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaomenghuan%2Fflutter-mini-program/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaomenghuan%2Fflutter-mini-program/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhaomenghuan","download_url":"https://codeload.github.com/zhaomenghuan/flutter-mini-program/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224066985,"owners_count":17250092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dart","dynamic","flutter","flutter-view","flutter-widgets","html","htmlview","js","miniprogram"],"created_at":"2024-08-02T09:00:26.284Z","updated_at":"2024-11-11T07:31:01.014Z","avatar_url":"https://github.com/zhaomenghuan.png","language":"Dart","readme":"# Flutter 小程序\n\n一个基于 Flutter 框架的小程序开发框架。通过解析 HTML 标签 和 CSS 样式，用于开发小程序应用，项目灵感来自 [FlutterHtmlView](https://github.com/PonnamKarthik/FlutterHtmlView)。\n\n## 特性\n\n- 将 html 标签转换为 Flutter 组件\n- 支持使用 css 样式渲染 Flutter 组件\n- 支持模板编译及数据绑定\n\n## 框架\n\n### 视图层\n\n框架的视图层由 html 与 css 编写，通过 .html 文件定义页面的视图层，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。组件(Component)是视图的基本组成单元。\n\n```html\n\u003ctemplate\u003e\n    \u003cview class=\"container\"\u003e\n        \u003ctext\u003e{{message}}\u003c/text\u003e\n        \u003cview class=\"m-10\"\u003e\n            \u003cbutton type=\"primary\" onTap=\"onEvaluateJavascript()\"\u003eevaluateJavascript\u003c/button\u003e\n        \u003c/view\u003e\n    \u003c/view\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nPage({\n    config: {\n        \"navigationBarTitleText\": \"Flutter MiniProgram - JS-API\"\n    },\n    data: {\n        message: \"Hello Flutter's MiniProgram\"\n    },\n    onLoad() {\n\n    },\n    methods: {\n        onEvaluateJavascript: function() {\n            log('onEvaluateJavascript');\n        }\n    }\n});\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.container {\n    padding: 10px;\n}\n.m-10 {\n    margin: 10px;\n}\n\u003c/style\u003e\n```\n\n### 逻辑层\n\n小程序开发框架的逻辑层使用 JS / Dart 语法进行开发，通过 Dart / Flutter 插件完成视图逻辑的组织及原生插件调用。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。\n\n```dart\nPage({\n    config: {\n        \"navigationBarTitleText\": \"Flutter MiniProgram - JS-API\"\n    },\n    data: {\n        message: \"Hello Flutter's MiniProgram\"\n    },\n    onLoad() {\n\n    },\n    methods: {\n        onEvaluateJavascript: function() {\n            log('onEvaluateJavascript');\n        }\n    }\n});\n```\n\n## 组件\n\n### 支持的组件\n\n- view: 视图容器\n- icon: 图标\n- text: 文本\n- br: 换行符\n- hr: 水平分隔线\n- p: 段落\n- h1 ~ h6: 标题\n- a: 链接\n- button: 按钮\n- input: 输入框\n- checkbox: 复选框\n- switch: 单选开关\n- slider: 滑块\n- image: 图片\n- video: 视频\n- table: 表格\n- list-view: 列表\n- web-view: 网页容器\n\n### 视图\n\n视图容器，相当于 Web 的 div 标签或者 React Native 的 View 组件。\n\n#### API\n\n| 属性名   |      类型      |  默认值 | 描述 |\n|----------|:-------------:|------:|:-------------:|\n| class |  String |  | 自定义样式名 |\n| style |  String |  | 内联样式 |\n| onTap | EventHandle |  | 点击事件 |\n| onLongTap | EventHandle |  | 长按事件 |\n\n### Button\n\n按钮。\n\n#### API\n\n| 属性名   |      类型      |  默认值 | 描述 |\n|----------|:-------------:|------:|:-------------:|\n| size |  String | default | 按钮的大小 |\n| type |  String | default | 按钮的样式类型 |\n| plain |  Boolean | false | 按钮是否镂空，背景色透明 |\n| disabled |  Boolean | false | 是否禁用 |\n| loading |  Boolean | false | 名称前是否带 loading 图标 |\n\n#### 示例\n\n```html\n\u003cview class=\"container\"\u003e\n    \u003ctext\u003e按钮\u003c/text\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"default\" ontap=\"\"\u003edefault\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"primary\"\u003eprimary\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"warn\"\u003ewarn\u003c/button\u003e\n    \u003c/view\u003e\n\n    \u003ctext\u003edisabled 状态\u003c/text\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"default\" disabled=\"true\"\u003edefault\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"primary\" disabled=\"true\"\u003eprimary\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"warn\" disabled=\"true\"\u003ewarn\u003c/button\u003e\n    \u003c/view\u003e\n\n    \u003ctext\u003eloading 状态\u003c/text\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"default\" loading=\"true\"\u003edefault\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"primary\" loading=\"true\"\u003eprimary\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"warn\" loading=\"true\"\u003ewarn\u003c/button\u003e\n    \u003c/view\u003e\n\n    \u003ctext\u003eplain 状态\u003c/text\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"default\" plain=\"true\"\u003edefault\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"primary\" plain=\"true\"\u003eprimary\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"warn\" plain=\"true\"\u003ewarn\u003c/button\u003e\n    \u003c/view\u003e\n\n    \u003ctext\u003e按钮大小\u003c/text\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"default\" size=\"mini\"\u003edefault\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"primary\" size=\"mini\"\u003eprimary\u003c/button\u003e\n    \u003c/view\u003e\n    \u003cview class=\"mb-10\"\u003e\n        \u003cbutton type=\"warn\" size=\"mini\"\u003ewarn\u003c/button\u003e\n    \u003c/view\u003e\n\u003c/view\u003e\n```\n\n### Switch\n\n开关选择器。\n\n#### API\n\n| 属性名   |      类型      |  默认值 | 描述 |\n|----------|:-------------:|------:|:-------------:|\n| checked | Boolean |  | 是否选中 |\n| disabled | Boolean |  | 禁用状态 |\n| size | double |   | 自定义大小 |\n| color | String |   | 自定义颜色 |\n| onChange | EventHandle |   | checked 改变时触发 |\n\n### 文本输入框\n\n文本输入框, 相当于 Web 的 input 标签 或者 iOS 中的 UITextField 和 Android 中的 EditText。\n\n| 属性名   |      类型      |  默认值 | 描述 |\n|----------|:-------------:|------:|:-------------:|\n| type | String |  | input 的类型 |\n| placeholder | String |  | 占位符 |\n| focus | Boolean |  false | 获取焦点 |\n\n```html\n\u003cview\u003e\n    \u003ctext\u003e这是一个可以自动聚焦的input: \u003c/text\u003e\n    \u003cinput type=\"text\" placeholder=\"这是一个可以自动聚焦的input\" focus=\"true\" /\u003e\n\u003c/view\u003e\n\u003cview\u003e\n    \u003ctext\u003e数字键盘: \u003c/text\u003e\n    \u003cinput type=\"number\" placeholder=\"数字键盘\" /\u003e\n\u003c/view\u003e\n```\n\n### 图片\n\nAPI\n\n| 属性名   |      类型      |  默认值 | 描述 |\n|----------|:-------------:|------:|:-------------:|\n| class |  String |  | 自定义样式名 |\n| style |  String |  | 内联样式 |\n| src | String |  | 图片路径 |\n| fit | String |  | 图片裁剪、缩放的模式, fill | contain | cover | fitWidth | fitHeight | none | scaleDown |\n\n```html\n\u003cview\u003e\n    \u003ch4\u003e网络图片：\u003c/h4\u003e\n    \u003cimage src=\"https://avatars2.githubusercontent.com/u/13075561?s=460\u0026v=4\"\n           style=\"width: 200px;height:200px\"\u003e\u003c/image\u003e\n\u003c/view\u003e\n\u003cview\u003e\n    \u003ch4\u003e本地图片：\u003c/h4\u003e\n    \u003cimage src=\"../images/avatar.png\" style=\"width: 200px;height:200px\"\u003e\u003c/image\u003e\n\u003c/view\u003e\n\u003cview\u003e\n    \u003ch4\u003e图片裁剪模式 fit = \"fill\": \u003c/h4\u003e\n    \u003cimage src=\"../images/avatar.png\" style=\"width: 200px;height:100px\" fit=\"fill\"\u003e\u003c/image\u003e\n\u003c/view\u003e\n```","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaomenghuan%2Fflutter-mini-program","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhaomenghuan%2Fflutter-mini-program","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaomenghuan%2Fflutter-mini-program/lists"}