chimera_flutter_code_push教程-(简易版)

详细版视频教程：https://www.bilibili.com/video/BV1HU4y1n73t?p=1&share_medium=iphone&share_plat=ios&share_source=WEIXIN&share_tag=s_i×tamp=1626504521&unique_k=i6onBS

准备工作

1.配置环境

export FLUTTER_ROOT=/Volumes/data/flutter_sdk/flutter_sdk

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

export PATH=${FLUTTER_ROOT}/bin:${PATH}

export PATH=${FLUTTER_ROOT}/bin/cache/dart-sdk/bin:${PATH}

export PUB_CACHE=${FLUTTER_ROOT}/.pub-cache

export PATH=${PUB_CACHE}/bin:${PATH}

2.切记要安装 http-server，因为后续的工作需要http-server:

brew install http-server

3.下载编译器

编译工具下载链接: https://github.com/Waytoon/chimera_flutter_code_push

[email protected]

[email protected]

注：Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision f4abaa0735 (2 weeks ago) • 2021-07-01 12:46:11 -0700 Engine • revision 241c87ad80 Tools • Dart 2.13.4
请使用最新版本的flutter环境!!!
编译器目前只支持mac跟M1
目前调试的话只支持安卓模拟器调试！！！

开始接入

1.创建Flutter项目

flutter create hello

[email protected]

生成项目，用IDE打开hello，运行代码

[email protected]

2.执行编译器

我们把下载的 rust_compile
放到到一个指定目录，随意给一个名字，我们就用tool吧：

[email protected]

1-打开终端terminal,进入编译器的目录，运行命令

chmod 777 rust_compile

以使得编译器有权限可以运行

2-在终端中运行 ./rust_compile：

[email protected]

第一次运行编译器，会生成配置文件config.yaml,如下图 :

[email protected]

3-打开config.yaml并配置如下内容：

  # Project path
  projectPath: /Users/ryanliu/Desktop/test/hello #修改成hello的目录
  # Flutter SDK
  flutterSdkPath: /Users/ryanliu/development/flutter #修改当前flutter环境的SDK目录
  # Compile cache path
  buildCachePath: /Users/ryanliu/Desktop/temp/dart_compile_cache #设置一个专门目录保存dart_compile_cache
  # FTP
  #ftpConfig: 192.168.80.141|root|123456  此处可忽略

[email protected]

4-在终端中再次运行./rust_compile执行我们的编译过程

这时候可能会出现 - wtbase library not found！

[email protected]

这时我们需要解决一下项目的报错。

1.在项目的 wtbase 的文件夹下的 pubspec.yaml文件进行修改 :

在原flutter_code_push_next更换配置，可以换成本地文件，也可以换成git路径

 flutter_code_push_next:
    git:
      url: https://github.com/Waytoon/chimera_flutter_code_push_next.git
      path: flutter_code_push_next

注：如果用本地路径需要在git上把代码下载到本地然后配置好路径。
这时pubspec.yaml文件可能有警告，在description: A new Flutter package.下面加上publish_to: none。

2.找到主工程的 pubspec.yaml文件添加:

dependencies:
  wtbase:
    path: ./wtbase

3.进入到wtbast-lib-generate文件夹下创建一个mapping文件夹

4.创建新的myapp.dart文件粘贴下面的代码：

import 'package:flutter/material.dart';

void run() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter ++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '这是一个示例工程：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

5.修改main.dart粘贴下面的代码：

import 'package:wtbase/wtbase.dart';
import 'package:hello/myapp.dart';

Future main() async {
  bool isNative = false;
  if (isNative) {
    run();
  } else {
    String downloadUrl = "http://192.168.1.110:8080/hello.bin";
    readCode = WTAnalysisReadCode();
    await readCode.initDownloadFilePath();
    await readCode.downloadPathAndReadFile(downloadUrl);
    readCode.executeMethod('package:hello/myapp.dart', 'run');
  }
}

6.test文件的报错进行重新引用。

7.分别在主工程跟wtbase文件夹下执行
flutter pub get

然后在终端中再次运行./rust_compile

[email protected]

注：如果有报错的再次分别在主工程跟wtbase文件夹下执行
flutter pub get
解决完所有的错误，保证代码没有报错。

3.配置本地服务

在执行完./rust_compile后，在主工程的assets文件夹下会存在一个hello.bin的文件。

1.cd到assets文件夹下，执行：
http-server -c -1

[email protected]

请注意downloadUrl现在仅支持内网测试。downloadUrl需要以http://192.168开头。
如需支持外网请求，请联系[email protected]。

复制http-server下面的链接，我的是http://192.168.80.115:8080,用来修改main.dart里的

String downloadUrl = "http://yourlocalhost/hello.bin";

复制代码修改成：

String downloadUrl ="http://192.168.80.115:8080/hello.bin";

到此配置完毕

4.运行项目

1.运行项目
2.可以尝试在myapp.dart中进行修改代码
3.执行./rust_compile
4.模拟器杀死程序，再次打开。