使用Flutter|使用Flutter + V8/JsCore开发小程序引擎（一）
众所周知，小程序是由HTML标签来开发原生组件，那么首先需要将HTML做解析，这里我们将HTML通过node脚本解析成JSON字符串，再用Dart来解析JSON，映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果，后续再详细介绍。
1 HTML部分
为了高效解析，直接用flutter的组件名在HTML文件上开发
- 文件目录如下：
文章图片
image
- config
{
"navigationBarTitleText": "",
"backgroundColor": "#eeeeee",
"enablePullDownRefresh": true
}
- HTML
@import "home.css";
{{item.title}}
{{item.publisher}}
{{item.summary.substring(0, 20) + '...'}}
- css样式
/* 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;
}- js交互
/** home */
Page({
/**
* 页面数据
*/
data: {
list: [],
},/**
* 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
*/
onLoad(e) {
cc.setNavigationBarTitle({
title: 'Python系列丛书'
});
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: '加载成功'
});
},
fail: function (error) {
console.log('request error:' + JSON.stringify(error));
cc.showToast({
title: '加载失败'
});
},
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);
},/**
* 页面卸载时触发。如cc.redirectTo或cc.navigateBack到其他页面时。
*/
onUnload() {}
});
2 渲染效果 image 3 组件部分 直接使用flutter的组件
1.1 组件 1.1.1 布局类组件
- 线性布局（row和column）
- 弹性布局（flex）
- 流式布局（wrap、flow）
- 层叠布局（stack、positioned）
- 对齐与相对定位（align）
- text
- image
- raisedbutton
- circularprogressindicator
- 填充（padding）
- 尺寸限制类容器（constrainedbox等）
- 装饰容器（decoratedbox）
- 变换（transform）
- container容器
- 剪裁（clip）
- singlechildscrollview
- listview
- gridview
4.1 界面 4.1.1 交互
- cc.showToast
- cc.showLoading
- cc.hideToast
- cc.hideLoading
- ...
- cc.setBackgroundColor
- cc.setNavigationBarTitle
- cc.setNavigationBarColor
- cc.startPullDownRefresh
- cc.stopPullDownRefresh
以上HTML中的例子
5 框架 5.1 语法参考 5.1.1 数据绑定
HTML 中的动态数据均来自对应 Page 的 data。
双大括号 {{}} 将变量包起来
{{message}} Page({
data: {
message: "hello world"
}
})5.1.2 列表渲染
- cc:for
在组件上使用 cc:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
{{index + '-' + item.name}}
Page({
data: {
array: [{
name: 'first',
}, {
name: 'second'
}]
}
})
使用 cc:for-item 可以指定数组当前元素的变量名，
使用 cc:for-index 可以指定数组当前下标的变量名：
{{idx + ' - ' + itemName.name}}
- cc:for 嵌套
{{'i * j = ' + i * j}}
Page({
data: {
array1: [1, 2, 3, 4, 5, 6, 7, 8, 9],
array2: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
})6 API 演示
文章图片
image 7 实时调试 image
- 源码地址：传送门
- 系列文章：
【使用Flutter|使用Flutter + V8/JsCore开发小程序引擎（一）】《使用Flutter + V8/JsCore开发小程序引擎（三）》
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页，计算网页数据大小