本周我尝试将我的程序嵌入到同学的Web端之中,因为Web端虽然各种包非常多,但是想要自己实现部分内容较为困难,而且我已经写好的内容如果他再实现一遍类似的功能会造成人力的浪费,因此,如果能将我的程序嵌入Web端能省下许多工作量。
flutter也能够打包为web的程序,使用如下命令生成:
flutter build web
这样能直接生成index.html以及一些其他的资源文件,但是在集成的过程中遇到了下面几个问题:
报错找不到xxx.js
这是由于集成之后,程序放入了子文件夹中,不是在web端的根目录下。比如放入了chat目录中,如果此时尝试访问xxxx.js,我希望访问到的是localhost/chat/xxxx.js,但是实际访问的是localhost/xxxx.js。
解决方法是:在index.html里,<head>下有一个子项 <base href="/"> ,将其改为 <base href="chat/"> 即可,此时所有通过这个html的调用都会在chat目录下。
跨域被浏览器拦截
这是由于我目前测试使用了百度的API,访问了外部域名的网站。但是当后端上线以后,我的程序会由后端的地址发给用户,此时我访问的API是后端的API,在同一个域名下,就不会出现跨域的问题。
字体加载有延迟
这个问题还在研究怎么解决,目前强制flutter使用html渲染界面可以部分解决这个问题,但是还需要改善。