13518219792
众所周知，小程序是由HTML标签来开发原生组件，那么首先需要将HTML做解析，这里我们将HTML通过node脚本解析成JSON字符串，再用Dart来解析JSON，映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果，后续再详细介绍。
成都创新互联主营崖州网站建设的网络公司,主营网站建设方案,重庆APP开发,崖州h5成都微信小程序搭建,崖州网站营销推广欢迎崖州等地区企业咨询
为了高效解析，直接用flutter的组件名在HTML文件上开发
直接使用flutter的组件
模仿微信小程序的Api，cc对应是微信小程序的wx
以上HTML中的例子
《使用Flutter + V8/JsCore开发小程序引擎（二）》
《使用Flutter + V8/JsCore开发小程序引擎（三）》
在用Flutter 开发windows和linux跨平台应用的时候，如何设置默认窗口大小呢？
flutter没有提供统一的api，所以默认的窗口大小是1280x720.
如果我们想要改成自己想要的默认窗口大小呢？比如我想要设置为：512像素宽, 926像素高
我该怎么做呢？
请看我的教程。
首先你确保你已经为项目创建了windows和Linux的支持。
目前Flutter 为windows和linux提供的是托管式运行的主程序，可以理解为一个壳子，这个壳子就是用cpp写的，平台原生的window 窗口。
所以我们可以打开相应的cpp源代码，设置默认窗口大小。
这里先讲windows和linux，因为mac 平台跟windows和linux不一样，后面单独给大家讲解。
我们看图。
源代码路径位于：
windows/runner/main.cpp
找到
第一个参数是宽度，单位是px，第二个是高度，单位是px
修改后重新运行生效。
源代码路径位于：
linux/my_application.cc
找到
方法的第一个数字是宽度，第二个是高度，单位也是px像素。
修改后，重新运行生效。
现在，你已经学会了如何设置初始窗口大小了。
flutter是桌面应用程序。
1、使用flutter桌面应用，必须使用master通道，在命令窗口执行以下命令：
flutter channel master
flutter upgrade
2、安装visual studio后，执行flutter doctor命令
3、在visual studio installer中选择对应版本号进行安装：
4、再次执行flutter doctor命令
5、配置执行目标平台
flutter config --enable-windows-desktop
6、命令行切换到flutter-desktop-embedding\example目录下，执行flutter run命令
7、通过visual studio打开目录flutter-desktop-embedding\example\windows下的Runner.sln文件对项目进行打包。
生成的exe可执行文件在目录flutter-desktop-embedding\example\build\windows\x64\Release下
在项目中找到 AndroidManifest.xml 文件，其中 android:label="demo" 就是应用程序名称，修改引号中的内容即可
在项目中找到 mipmap-mdpi mipmap-hdpi mipmap-xhdpi mipmap-xxhdpi mipmap-xxxhdpi 文件夹，替换这些文件夹中的 ic_launcher.png 文件即可
注意：图标有多种尺寸的大小，是为了适配不同分辨率的手机而设计的
在项目中找到 Info.plist 文件，其中 CFBundleDisplayName 和 CFBundleName 下面的就是应用程序名称，修改内容即可
找到项目中的 AppIcon.appiconset 文件夹，其中 Contents.json 是配置文件，其它的图片文件就是图标，替换这些图片文件即可
注意：图标有多种尺寸的大小，是为了适配不同分辨率的手机而设计的
插件地址：
在项目中找到 pubspec.yaml 文件，添加内容如下
插件地址：
在项目中找到 pubspec.yaml 文件，添加内容如下
注意：准备一张 1024x1024 的 png 图片，取名为 icon.png 并把它放在 assets/icon 目录中
找到 ~/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_launcher_icons-0.9.2/lib/android.dart 文件修改内容如下
注意：如果使用了镜像地址就找到 ~flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_launcher_icons-0.9.2/lib/android.dart 文件来修改以上内容
Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。
话不多说，先来看看实际效果。 项目源码地址
开发环境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型： null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。
数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。
本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。
要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持 windows 和 macos 系统。
接下来使用 flutter create 命令创建我们的模版工程。
创建完项目后，我们就可以 run 起来了。
先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。
我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。
通过 InkWell 组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置
这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根结点不是 Material 风格的组件，因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置，否则它将全屏显示。
读取说表拖拽的文件一开始想尝试使用 InkWell 组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ，能满足要求。
使用开源组件 file_picker ，选完图片后的操作和拖拽选择图片后的操作一致。
Textfield 如果要显示富文本，那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。
在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。
通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ，表示 对用户的下载文件夹的读/写访问权限 。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。
当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。
原文地址：
运行下方命令，如果提示 -bash: flutter: command not found，请检查 PATH设置
启动模拟器后，使用以下命令检测是否可用。不知道如何启用模拟器的，可以去查看 模拟器配置方法
提示有可用设备时，使用以下命令运行flutter应用
注意 ：需要进入到flutter应用根目录下，执行 flutter run才有效，执行成功后如下图
打开testApp/lib/main.dart文件，如图
在命令行中按照提示输入 r 刷新模拟器页面
