深入小程序系列之二、Flutter 和小程序混编

举报
FinClip 发表于 2020/03/31 14:15:53 2020/03/31
【摘要】 本文我们将开一下脑洞,在 Flutter 工程基础上下集成及运行小程序方案。

背景


本文我们将开一下脑洞,在 Flutter 工程基础上下集成及运行小程序方案。

先看一下效果如下:

1585634689977703.gif



新建 Flutter 样例工程


Flutter 的安装


Flutter 的安装可参考https://flutterchina.club/get-started/install/具体上主要执行以下三步即可。本文将使用 Flutter1.12.hotfix8 稳定版作为开发环境。


  • 下载 FlutterSDK

  • 配置 PATH 环境路径

  • flutter doctor 检查环境


新建 Flutter 工程

flutter create --template=app --org=com.finogeeks.flutter --project-name=mini_flutter -i objc -a java ./mini_flutte


执行以上命令后,正常将会提示以下信息

All done!
[✓] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.3.1)
[✓] Android Studio: is fully installed. (version 3.6)
[!] IntelliJ IDEA Ultimate Edition: is partially installed; more components are available. (version 2019.3.3)
[✓] VS Code: is fully installed. (version 1.42.1)
[!] Proxy Configuration: is partially installed; more components are available.
[✓] Connected device: is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd mini_flutte
  $ flutter run

Your application code is in mini_flutter/lib/main.dart.


注意!flutter 需要依赖本地安装对应的 iOS,Android 开发工具,即需要安装 Xcode 和 AndroidStudio。具体安装使用方法这里不赘述。

这里我们用 VSCode+Xcode 作为开发组合环境,如果要正常调试需要确保以下三个检查项目是正常的。


[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.3.1)

Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)

VS Code: is fully installed. (version 1.42.1)

[!] Proxy Configuration: is partially installed; more components are available.


集成小程序解析引擎


这里我们采用凡泰免费社区版的小程序解析引擎,只需要 10 行代码量不到即可完成小程序集成。

  1. 引入小程序引擎插件。在 pubspec.yaml 文件中引入小程序 Flutter 插件

mop: ^0.2.0


2.在 main.dart 文件中增加以下小程序引擎初始化方法。Mop.instance.initialize这里需要用到 sdkkey 和 secret。可以直接在https://mp.finogeeks.com免费注册获取。注册使用方法可以参考接入指引


  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> init() async {
    if (Platform.isIOS) {
      final res = await Mop.instance.initialize(
          '22LyZEib0gLTQdU3MUauAYEY1h9s9YXzmGuSgQrin7UA', '9e05fa0015d7dbfa',
          apiServer: 'https://mp.finogeeks.com', apiPrefix: '/api/v1/mop');
      print(res);
    } else if (Platform.isAndroid) {
      final res = await Mop.instance.initialize(
          '22LyZEib0gLTQdU3MUauAYEY1h9s9YXzmGuSgQrin7UA', '9e05fa0015d7dbfa',
          apiServer: 'https://mp.finogeeks.com', apiPrefix: '/api/v1/mop');
      print(res);
    }
    if (!mounted) return;
  }


3、在主界面上增加三个按钮来打开小程序

 Center(
    child: Container(
      padding: EdgeInsets.only(
        top: 20,
      ),
      child: Column(
        children: <Widget>[
          Container(
            width: 140,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5)),
              gradient: LinearGradient(
                colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],
                stops: const [0.0, 1.0],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
            child: FlatButton(
              onPressed: () {
                Mop.instance.openApplet('5e3c147a188211000141e9b1',
                    path: 'pages/index/index', query: '');
              },
              child: Text(
                '打开画图小程序',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          SizedBox(height: 30),
          Container(
            width: 140,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5)),
              gradient: LinearGradient(
                colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],
                stops: const [0.0, 1.0],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
            child: FlatButton(
              onPressed: () {
                Mop.instance.openApplet('5e4d123647edd60001055df1');
              },
              child: Text(
                '打开官方小程序',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          SizedBox(height: 30),
          Container(
            width: 140,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5)),
              gradient: LinearGradient(
                colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],
                stops: const [0.0, 1.0],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
            child: FlatButton(
              onPressed: () {
                Mop.instance.openApplet('5e637a18cbfae4000170fa7a');
              },
              child: Text(
                '我的对账单',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    ),
  )


4、运行 Flutter 程序


  • 在代码根目录执行 flutter devices 查看本机安装的模拟器。

  • 执行 flutter run --debug 运行示例,运行效果之如本文最前面所展示的图示。


本文示例代码: https://github.com/finogeeks/mop-flutter-demo


相关文章:凡泰极客私有云小程序技术


关于凡泰极客:帮助金融机构乃至任何希望拥有类似技术的其他行业机构,建立“碎片”的集散地、降低管理成本、提高研发效能,形成自己的数字化生态、与客户和伙伴建立真正的数字化连接。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200