MBlock开发环境搭建-蒲公英云

本人对STM教育有兴趣，研究了一下mblock的代码，总结了一些个人搭建修改的经验，如果有需要进一步了解的朋友，欢迎交流，QQ：690333105，验证信息：mblock

软件安装

1、安装flash builder 4.7 premium:
MBlock环境搭建全部资料链接：https://pan.baidu.com/s/1sfmSCystGrzvs4PF9ZEUvw 密码：3lmr
2、下载AIR-SDK
3、下载mblock 源码
4、解压缩AIRSDK 并且复制到： C:\Program Files\Adobe\Adobe Flash Builder 4.7 (64 Bit)\eclipse\plugins\com.adobe.flash.compiler_4.7.0.349722\AIRSDK，上面的路径是默认安装路径，尽量按默认安装
5、复制必要的DLL到 C:\Program Files\Adobe\Adobe Flash Builder 4.7 (64 Bit)\eclipse\plugins\com.adobe.flash.compiler_4.7.0.349722\AIRSDK\bin
6、运行Flash builder 4.7
新建一个 ActionScript Project，项目名称取名为MBlock，主要是和源码中src文件夹下的MBlock-app.xml相同，否则修要更改xml的名称，导致编译出错

mBlock-master代码导入运行

7、导入代码：
在这里插入图片描述

8, 选择项目的属性：

添加本机扩展库：mBlock\source\libs*ane

打开 mBlock-app.xml（（整个工程的配置文件）文件
确保第二行最后的版本号是之前下载的 AIRSDK 的版本号：要不然编
译不通过，各种报错，各种坑

在这里插入图片描述
工程配置文件里的版本号要与如图所示的版本相同

复制 Arduino 在 src 目录下
在这里插入图片描述
在第一次导入工程开发调试模式下的时候一定要把
src\Arduino\portable\sketchbook\libraries\makeblock 文件中的
library.properties 复制一个在
debug-bin\Arduino\portable\sketchbook\libraries\makeblock 文件中。

运行界面：
在这里插入图片描述

mBlock_all源码导入运行

这个源码在github上可以下载到（ https://github.com/ysun/scratch3.0 ），
不过github只是单纯的flash代码，没有搭建好Arduino编译器，如果需要使用Arduino编译器的可以到
https://download.csdn.net/download/m0_37738838/10884221 下载，
如果下载好的代码后，按照下面步骤搭建就好（主要的工作都在cmd上处理）

一、flash环境搭建（前面已讲过）

运行flash builder 4.7 premium，在工具栏点击文件->导入flash builder 项目->项目文件夹，选中含源码的文件夹->完成。

二、Npm Node Git Electron环境配置

先去官网下载Node和 Git
Node：http://nodejs.cn/download/
Git：https://git-scm.com/downloads

Git安装
安装时一路默认就可以了。

Node 安装

从nodejs 下载最新版本的windows安装程序进行安装，安装时一路默认即可，这个安装会把nodejs和npm配置到系统PATH中，这样在命令行的任何位置都可以直接用node执行nodejs，用npm执行npm命令。
注意：下面的操作都要以管理员身份执行 cmd，在cmd里面操作
打开cmd 检查nodejs是否安装成功可以这样查看：

使用 npm -v 查看npm是否安装成功
使用 node -v 查看node是否安装成功
配置npm的全局模块的存放路径以及cache的路径，将以下两个文件夹放在NodeJS的主目录下，在NodeJs下建立”node_global”及”node_cache”两个文件夹。如下图
启动cmd，输入
npm config set prefix “C:\Program Files\nodejs\node_global”
npm config set cache “C:\Program Files\nodejs\node_cache”

Electron 安装

1、把npm的仓库切换到国内taobao仓库，执行下面的命令：
npm config set registry "https://registry.npm.taobao.org/"
然后再执行 electron安装命令: npm install -g electron
出现下面代码即安装成功：
    + electron@1.7.10
    added 152 packages in 83.154s
2、修改 环境变量：
我的电脑右键点击属性->高级系统设置->环境变量->系统变量->Path->(在变量值那里添加)C:\Program Files\nodejs\node_global;(一定要把输入法设置为英文，要不然会报错)
3、使用 electron -v 测试是否安装成功 出现版本号就说明成功
4、依次使用以下指令安装必要模块：
npm install -g cnpm --registry=https://registry.npm.taobao.org
      出现下面代码即安装成功：
    + cnpm@5.1.1
    added 709 packages in 38.609s
cnpm install -g electron-prebuilt
出现下面代码即安装成功：
    [electron-prebuilt@1.4.13] link C:\Program Files\nodejs\node_global\electron@ -> C:\Program Files\nodejs\node_global\node_modules\electron-prebuilt\cli.js
npm install electron-rebuild -g
出现下面代码即安装成功：
    + electron-rebuild@1.6.0
    added 162 packages in 12.679s
npm install node-pre-gyp -g       
出现下面代码即安装成功：
    + node-pre-gyp@0.6.39
added 113 packages in 7.456s
npm install serialport -g （电脑如果没有安装python 就会出错，本人安装的是python2.7.1版本，安装包在所需软件文件夹）
出现下面代码即安装成功：
+ serialport@6.0.4
added 58 packages in 10.049s

编译
编译前先安装Visual Studio 2015（电脑可能存在某些配置或其他东西没有配置，安装后电脑会配置好），勾选下图所示
在这里插入图片描述

（1）用 cd 指令定位到工程文件夹

依次执行以下指令：
npm install
出现红色报错则表示有问题，下面指令也将出现问题
第一次执行这条指令会出现黄色的代码，这些东西可以先不管，不影响后面的指令运行
出现下图即指令执行成功：：

npm run rebuild-serialport
出现下图即指令执行成功：

npm run rebuild-hid
出现下图即指令执行成功：：
在这里插入图片描述

npm run rebuild-bluetooth
出现下图即指令执行成功：
在这里插入图片描述

npm start
出现下图即指令执行成功，并进入程序界面：
在这里插入图片描述

三、打包（生成.exe文件）

定位到工程目录执行以下指令

3.1、生成可直接运行软件工程

npm install electron-builder@10.12.0 -g
npm install electron-builder@10.12.0 --save-dev
npm run pack

3.2、生成安装包（生成可直接运行软件后，再进行安装包的生成）

build --win --x64

四、注意

1、环境变量的配置（包括node、python，npm全局模块的存放路径以及cache的路径等）
2、安装的python版本要在3以下的
3、编译前按照教程上勾选安装好Visual Studio 2015
4、在cmd中执行相关指令是最好是以管理员运行，编译时一定要以管理员运行
5、生成可执行文件后，再进行安装包的生成
在这里插入图片描述

运行界面：
在这里插入图片描述