Skip to content

Latest commit

 

History

History
137 lines (124 loc) · 8.07 KB

WriteDown.md

File metadata and controls

137 lines (124 loc) · 8.07 KB
Raw

github_blog

A new GitHub web blog done myself with the Flutter.

init

  1. flutter build web --release
  2. cd ./build/web

git init git remote add origin git@github.com:shAdow-XJY/shAdow-XJY.github.io.git git add . git commit -m "Init Flutter web project" git push origin master

project upgrade

//// jsdelivr: https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.33.0/bin/ //// 饿了么: https://npm.elemecdn.com/browse/canvaskit-wasm@0.33.0/bin/ //// 饿了么: https://github.elemecdn.com/browse/canvaskit-wasm@0.33.0/bin/ // tnnd贼ex，换个镜像源，要不就是没有，有的快一点换个浏览器直接就变慢了，换了台电脑也慢，手机也不行。 // 在官方源或者镜像源将wasm下载下来，放在assets,用自己运行的网站项目中保存下来 // 在pub。yaml ：【 - assets/canvaskit-wasm@0.33.0/bin/】

preupgrade

run file_generator.dart

run font_collection.dart; and then run the pip cmd in local/fonts/(using python tools: fonttools)

  1. flutter build web --release (html最快,有DNS的canvakit除了第一次启动之后体验也可以)
                   mirror source

flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://github.elemecdn.com/browse/canvaskit-wasm@0.33.0/bin/ cloud server tomcat flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://119.45.21.152:443/canvaskit/ github path with DNS flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://shadowplusing.website/assets/assets/canvaskit-wasm@0.33.0/bin/ html render flutter build web --web-renderer html --release

  1. cd ./build/web
  2. git add .
  3. git commit -m ""
  4. git push origin master

using proxy in terminal cmd,端口取决自己的VPN

1.set http_proxy=127.0.0.1:10809 2.set https_proxy=127.0.0.1:10809

write upgrade

  1. change or add new file in assets/write/
  2. run the [file_generator.dart] first in test/file_generator
  3. necessarily add new assets path in asset/write/ for example [- assets/write/Flutter/] in pubspec.yaml
  4. igit lfs trackf you wanna test , [stop main.dart] and [start main.dart] ,not try hot reload just by start main.dart
  5. then you can upgrade the project [project upgrade]

small the size of font pack

  1. use the [font_collection.dart] to collect all the font we use in the projection.
  2. use the [fonttools(python tool)] to generate a new small font pack from the old big one.(old one store in the local/fonts/)

something to talk

  1. if the project run normally in local but github page. view the Network without cache (F12 when opening the github page,like check the file request path.)
  2. for the assets file .md or .txt in Web I choose to generate the Index file in the Android Studio (Function code:test/file_generator.dart) before I build the release web.
  3. 解决中文路径乱码问题 asset request file name with chinese or other language char. do the best way is to encode the media.file(like .mp4) name before we use it every time. [such as .asset('assets/video/${Uri.encodeComponent(filename)})]
  4. solve video fullscreen use js.fullscreen.api,listen to the fullScreen state every time change the size.

flutter web run slowly

canvakit.wasm

  1. run on the web , [F12] to check the [canvaskit.wasm], see the version we need/use in request header URL for example , now my request url is [https://unpkg.com/canvaskit-wasm@0.33.0/bin/canvaskit.wasm] version is 0.33.0
  2. -look for mirror source of the [canvaskit.wasm], I choose the [jsDelivr][https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.33.0/bin/] -then you can add the additional cmd when build or run . -for me , I add these in the Android Studio , [Edit Configurations...]which in the main.dart(near we click the run button) -build web --release [flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.33.0/bin/] -the vesion best as same as the one you run on the local.[local F12 to check]

first time white page

  1. in the web/index.html add the CSS preload animation

fonts download online or local fonts pack too big

  1. using local font pack with fonttools.

assets/canvakit.wasm

  1. download [canvaskit-wasm@0.33.0/bin] in assets/canvaskit-wasm@0.33.0/bin
  2. to make it assets file, althogh first it's also slowly, but after this time, it will take a little! a little! time to use the wasm,I think it because I make my site CDN.
  3. flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://shadowplusing.website/assets/assets/canvaskit-wasm@0.33.0/bin/ 结论:(我的域名有为github page添加CDN解析)浏览器第一次下载可能需要十几二十几秒，有时好的时候是十秒内，这只是说第一次的情况，接下来在停用缓存的情况下刷新，重开进入，都是几毫秒的耗时。

assets/canvakit.wasm ---gitee

  1. gitee 仓库同步 github仓库，这样[canvaskit-wasm@0.33.0/bin]在GitHub和Gitee都有一个地址，可以尝试使用gitee的地址看看速度怎么样

define assets font

  1. use the local assets fonts in assets if the fonts download online too long

pack referrence

  1. sidebarx
  2. url_launcher: ^6.1.0
  3. clock_loader //remove already
  4. assets_audio_player
  5. flutter_markdown
  6. CSS stair loader animation
  7. video_player: ^2.4.0
  8. js: ^0.6.3
  9. auto_size_text: ^3.0.0
  10. webviewx: ^0.2.1
  11. responsive_builder: ^0.4.2
  12. vertical_card_pager: ^1.5.0

referrence

  1. how deploy on github
  2. git using github and gitee together
  3. listen the loading of image //remove already
  4. MouseRegion
  5. SlideTransition
  6. local music
  7. dart:io use
  8. flutter web run slowly
  9. 0xColor and #Color
  10. request path show encode result
  11. path encode
  12. video player
  13. flutter use js function
  14. Flutter GridView
  15. fonttools
  16. web list mouse drag control
  17. flutter web build --web-render

file and server refer

  1. tomcat
  2. tomcat webapp
  3. cloud server
  4. tomcat https
  5. check 端口开放
  6. tomcat flutter web

fail to use , but maybe useful one day

  1. [dio: ^4.0.6](it's useful without doubt.)
  2. [shelf_proxy: ^1.0.1](use to solve some cors ,but you konw, company protects greatly)
  3. flutterApp 初始化前执行函数