前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter与原生H5混合开发

Flutter与原生H5混合开发

原创
作者头像
乂乂又又
修改2021-02-22 10:25:24
3.5K0
修改2021-02-22 10:25:24
举报

我们知道Flutter可以跟原生Android或iOS混合开发,那Flutter能不能与原生H5混合开发呢?

答案是:Yes!

首先来个网页背景,2D的太普通,这里我拿Three.js先给他整个3D地球转一转

朴实无华且枯燥~

代码语言:txt
复制
    //全局变量
    let camera, scene, renderer;
    //摄像机
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100000);
    camera.position.set(15, 5, 5);
    //场景
    scene = new THREE.Scene();
    //全局灯光
    const ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);
    //材质加载
    let loader = new THREE.TextureLoader();
    //图片贴纸来自 https://www.solarsystemscope.com/textures/
    //太空背景(星空)
    let geoSpace = new THREE.SphereGeometry(10000, 32, 32);
    let spaceMaterial = new THREE.MeshBasicMaterial({
      map: loader.load('img/star.jpg')
    });
    let space = new THREE.Mesh(geoSpace, spaceMaterial);
    space.material.side = THREE.BackSide;
    scene.add(space);
    //地球
    let geoEarth = new THREE.SphereGeometry(5, 40, 400);
    let earthMaterial = new THREE.MeshPhongMaterial({
      map: loader.load('img/earth.jpg'),
    });
    let earth = new THREE.Mesh(geoEarth, earthMaterial);
    scene.add(earth);
    //云层
    let geoCloud = new THREE.SphereGeometry(5.32, 40, 400);
    let cloudMaterial = new THREE.MeshPhongMaterial({
      map: loader.load('img/cloud.jpg'),
      transparent: true,
      opacity: 0.5
    });
    let cloud = new THREE.Mesh(geoCloud, cloudMaterial);
    scene.add(cloud);
    //渲染
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

OK,背景有了,现在把Flutter引入进来,给他做个遮罩层

嗯,现在是不是有点感觉了✌️

但还差点东西,现在Flutter跟原生H5少了点交互,下面我们来处理下Dart与JS互调

我们甚至可以把h5中的组件嵌入到Flutter中,无限套娃~

*PS:细节的东西我不再多讲,感兴趣的同学,可以自己去看下官方js库的文档(

https://pub.flutter-io.cn/packages/js)*

Dart原生H5开发

Dart不仅可以与原生JS互调,也可以拿来写原生网页应用。

让我们来看一个穿越自2012年的Dart版Todo List网页长啥样

可以看到,在Dart里也可以操作网页dom,跟用js去查询操作dom元素没啥区别

但Dart语言的强类型比之于JS的动态灵活,不可谓不香,爱了爱了❤️

除此之外,Dart还能用来写 vue、react、angular,你信?

而且拿Dart来写爬虫,服务端也很酸爽哦~

哈哈哈哈,神奇的知识它增长了🌚

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Dart原生H5开发
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档