在Mac系统让你的第一个kraken项目跑起来

flutter安装

参考如下步骤，完成flutter安装。

温馨提示：有VPN的童鞋，最好打开VPN。一些下载，例如Android studio安装过程中，貌似要访问google的。

• xcode 可在App Store下载

• 下载Android studio
  地址：点击前往

• 下载flutter
  地址：点击前往

• 配置 .bash_profile文件

  vim .bash_profile
  

  直接复制以下内容
  注意：FLUTTER=/Users/username/Development/flutter/bin ，务必填写自己的flutter解压路径！！！

  export PUB_HOSTED_URL=https://pub.flutter-io.cn #国内用户需要设置
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #国内  用户需要设置
  export FLUTTER=/Users/username/Development/flutter/bin 
  export PATH=$FLUTTER:$PATH
  

  :wq!
  

• 配置zsh

  open ~/.zshrc
  

  在文件最下方添加：

  source ~/.bash_profile
  

  保存。

• 检查flutter运行环境
  运行：

  flutter doctor
  

• 报错：

  Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
  

  解决方案：

  flutter doctor --android-licenses
  

  当提示Y/N选择时，一直输入 y，即可完成安装。

  • 可在运行一次flutter doctor校验，没有警告或报错即可。

• 安装vsCode
  地址：点击前往

• 开始flutter第一个程序
  教程：https://flutterchina.club/get-started/test-drive/#vscode

• 运行方式：
  如图，选择自己的工程，点击绿色运行按钮
  

• 运行平台：
  点击图片右下角进行平台选择，也可热键F5 开始运行：
  

安装kraken

这里先贴一下官网地址：点我进官网！
首先，要安装node环境。终端输入node回车，系统提示命令存在，则需要先安装node环境：

• 升级brew

  brew update
  

• 安装node

   brew install node
  

• 检测node版本（此命令可略过）

   brew -v 
  

• 安装kraken脚手架

  npm install -g @openkraken/cli
  

• 安装generator-kraken

  npm install -g generator-kraken
  

• 创建本地js文件
  根据官网提供的链接，可以获得一份js代码。将代码拷贝放在本地example.js文件中。

  我把官方示例代码已经放在这里了：点这里查看官网链接的js代码

  var text1 = document.createTextNode('Hello World!');
  var br = document.createElement('br');
  var text2 = document.createTextNode('你好，世界！');
  var p = document.createElement('p');
  p.style.textAlign = 'center';
  p.appendChild(text1);
  p.appendChild(br); 
  p.appendChild(text2);
  
  document.body.appendChild(p);
  

  cd 到js文件目录，运行命令，执行js。如下：

  cd Documents/kraken
  kraken example.js
  

此时，你应该能够正常运行这份js代码了。下面的步骤，可以帮助你在其他平台运行这份js代码。

• brew install cmake

• 安装Kraken源码
  cd到你本地安装三方框架源码文件夹

  git clone https://gitee.com/mirrors/OpenKraken.git
  

• 构建 Bridge

  npm run build:bridge:all
  

  • 报错解决：
  1. fix the upstream dependency conflict…
     解决：
     根据提示添加后缀 npm run build:bridge:all --fource
  2. gulp缺失 cannot find module ‘gulp’
     解决：npm i gulp
     
  3. 找不到安卓sdk包
     解决：搜索文件：修改脚本中的相对路径

     else if (platform == 'linux') {
     androidHome = process.env.ANDROID_HOME;
     }
     

     
  • 成功安装截图：
    

• 运行代码到移动端
  cd到kraken库的example文件夹，执行flutter run -v

  • 报错：

    			bool get hasPixels;
  [        ]            ^^^^^^^^^
  

  • 解决：
    搜索文件
    
    

  添加如下修改

  @override
  bool get hasPixels => false;
  

- 运行：
`flutter run -v`