Flutter集成微信小程序技术教程

我正在参加「掘金·启航计划」

引言

移动应用程序在现代社会中发挥着越来越重要的作用。跨平台开发框架Flutter的出现让开发者能够更方便地构建应用程序。与此同时，微信小程序也在不断演变，从简单的小工具向全面的业务应用发展。为了更好地满足用户的需要，我们需要在Flutter应用程序中集成微信小程序的能力。本文介绍了如何使用Flutter WeChat Channel插件实现在Flutter应用程序中集成微信小程序。

Flutter框架简介

Flutter是一款功能强大、易于学习的移动应用程序开发框架。由谷歌开发，使用单一代码库构建应用程序，可以同时在iOS和Android上进行发布和运行。Flutter的主要特点是快速、高效和美丽的用户界面。

微信小程序介绍

微信小程序是微信内的应用程序，用户无需下载或安装任何应用即可使用。它是基于微信生态系统的轻量级应用，支持丰富的功能和服务，例如游戏、生活、工具等。

准备工作

在开始集成微信小程序之前，我们需要做一些准备工作。

安装Flutter

如果你已经安装了Flutter，请跳过此步骤。如果你未安装Flutter，请根据Flutter安装指南进行安装。在你的终端中，运行以下命令：

git clone https://github.com/flutter/flutter.git -b stable --depth 1

完成后，将flutter目录添加到PATH环境变量中，以便运行Flutter命令。在终端中运行以下命令即可：

export PATH="$PATH:`pwd`/flutter/bin"

注册微信小程序并获取应用程序ID和应用程序密钥

在集成微信小程序之前，你需要在微信开发者平台上注册并创建一个微信小程序。如果你已经完成这一步骤，请跳过此步骤。如果你还没有注册微信小程序，请前往微信开放平台注册并创建一个微信小程序。

在创建微信小程序之后，你将获得应用程序ID和应用程序密钥。这些信息用于后续的微信小程序集成。

集成Flutter WeChat Channel插件

Flutter WeChat Channel插件是一个Flutter插件，用于管理和控制微信应用程序的数据流和开发功能。它可以让Flutter应用程序与微信小程序交互，并提供各种功能。接下来，我们将为你介绍如何使用Flutter WeChat Channel插件集成微信小程序。

添加flutter_wechat_channel插件依赖

我们首先需要在Flutter项目中添加flutter_wechat_channel插件的依赖。在pubspec.yaml文件中添加以下代码块：

dependencies:
  flutter_wechat_channel: ^1.0.0

配置Android平台与IOS

在微信开放平台申请一个App ID，并将其配置到Flutter应用中。对于Android平台，需要将App ID配置到AndroidManifest.xml文件中，并在MainActivity的onCreate方法中调用FlutterWechatChannel.registerApp方法进行注册。对于iOS平台，需要将App ID配置到Info.plist文件中，并在Xcode中添加URL Schemes和Universal Link域名等配置。

这里就不贴IOS的配置了，因为我用的windows电脑，装不了Xcode，哈哈哈🐶

<!-- AndroidManifest.xml --> 
<manifest> 
    <application> 
            <meta-data android:name="wechatAppId" android:value="Wx1234567890" /> 
    </application> 
</manifest>

注册微信小程序

我们需要在我们的Flutter应用程序中注册微信小程序。在我们的Flutter应用程序中，我们可以使用以下代码来实现这一点：

import 'package:flutter_wechat_channel/flutter_wechat_channel.dart';

const String WECHAT_MINI_PROGRAM_ORIGINAL_ID = "your_mini_program_original_id";
const String WECHAT_MINI_PROGRAM_PATH = "your_mini_program_path";

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  WeChatChannel _weChatChannel;

  @override
  void initState() {
    super.initState();

    _weChatChannel = WeChatChannel();
    _weChatChannel.register(
      appId: WECHAT_APP_ID,
      appSecret: WECHAT_APP_SECRET,
    );
    _weChatChannel.registerMiniProgram(
      miniProgramType: WeChatMiniProgramType.release,
      originalId: WECHAT_MINI_PROGRAM_ORIGINAL_ID,
      path: WECHAT_MINI_PROGRAM_PATH,
      imageUrl: "",
      title: "",
      description: "",
    );
  }
}

实现功能

我们现在已经准备好在我们的Flutter应用程序中实现微信小程序集成。以下是我们可以实现的两个基本功能：

启动微信小程序

我们可以使用以下代码在Flutter应用程序中启动微信小程序：

import 'package:flutter_wechat_channel/flutter_wechat_channel.dart';

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  WeChatChannel _weChatChannel;

  Future<void> _launchMiniProgram() async {
    await _weChatChannel.launchMiniProgram(
      miniProgramType: WeChatMiniProgramType.release,
      originalId: WECHAT_MINI_PROGRAM_ORIGINAL_ID,
      path: WECHAT_MINI_PROGRAM_PATH,
    );
  }

  @override
  void initState() {
    super.initState();

    _weChatChannel = WeChatChannel();
    _weChatChannel.register(
      appId: WECHAT_APP_ID,
      appSecret: WECHAT_APP_SECRET,
    );
    _weChatChannel.registerMiniProgram(
      miniProgramType: WeChatMiniProgramType.release,
      originalId: WECHAT_MINI_PROGRAM_ORIGINAL_ID,
      path: WECHAT_MINI_PROGRAM_PATH,
      imageUrl: "",
      title: "",
      description: "",
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () => _launchMiniProgram(),
          child: Text("启动微信小程序"),
        ),
      ),
    );
  }
}

其他WeChat Channel功能

除了启动微信小程序之外，WeChat Channel插件还提供了其他功能。以下是一些常用的功能示例：

判断用户是否安装微信

import 'package:flutter_wechat_channel/flutter_wechat_channel.dart';

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
  WeChatChannel _weChatChannel;

  Future<void> _hasInstalledWeChat() async {
    final bool isInstalled = await _weChatChannel.hasInstalledWeChat();
    // Do something with isInstalled...
  }

  @override
  void initState() {
    super.initState();

    _weChatChannel = WeChatChannel();
    _weChatChannel.register(
      appId: WECHAT_APP_ID,
      appSecret: WECHAT_APP_SECRET,
    );
    _weChatChannel.registerMiniProgram(
      miniProgramType: WeChatMiniProgramType.release,
      originalId: WECHAT_MINI_PROGRAM_ORIGINAL_ID,
      path: WECHAT_MINI_PROGRAM_PATH,
      imageUrl: "",
      title: "",
      description: "",
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () => _hasInstalledWeChat(),
          child: Text("判断用户是否安装微信"),
        ),
      ),
    );
  }
}

微信朋友圈分享

要在Flutter中实现微信朋友圈分享，可以使用flutter_wechat_channel库来调用微信API实现。实现步骤如下：

import 'package:flutter_wechat_channel/flutter_wechat_channel.dart';

void shareToWeChatTimeline() async {
  // 检查微信是否安装
  bool isInstalled = await FlutterWechatChannel.isWeChatInstalled;
  if (!isInstalled) {
    // 提示用户安装微信并返回
  }

  // 构造分享内容
  final WeChatShareWebpageObject webpage = WeChatShareWebpageObject(
    title: '分享标题',
    description: '分享描述',
    webpageUrl: 'https://example.com',
    thumbnailData: Uint8List.fromList([]),
  );
  final WeChatShareMessage message = WeChatShareMessage(
    messageType: WeChatMessageType.Webpage,
    webpageObject: webpage,
  );

  // 调用微信API执行分享
  final bool isSuccess = await FlutterWechatChannel.shareToWeChatTimeline(message);
  if (isSuccess) {
    // 分享成功
  } else {
    // 分享失败
  }
}

其中，WeChatShareWebpageObject是分享的内容，包括标题、描述、链接地址和缩略图；WeChatShareMessage是分享的消息对象，包括消息类型和内容；FlutterWechatChannel是调用微信API的接口。

发送消息

通过调用FlutterWechatChannel.sendMiniProgramMessage方法向小程序发送消息。其中，需要提供小程序的App ID和路径，以及消息类型和额外数据。

Future<void> sendMessageToMiniProgram() async {
  final WeChatMiniProgramObject object = WeChatMiniProgramObject(
    webpageUrl: 'https://example.com',
    userName: 'gh_1234567890',
    path: '/pages/index',
    hdImageData: Uint8List.fromList([]),
    withShareTicket: true,
    miniprogramType: WeChatMiniProgramType.Release,
  );
  final WeChatSendMessage message = WeChatSendMessage(
    messageType: WeChatMessageType.MiniProgram,
    miniProgramObject: object,
  );
  final bool isSuccess = await FlutterWechatChannel.sendMiniProgramMessage(
    message: message,
    toUserName: 'gh_1234567890',
  );
  if (isSuccess) {
    // 发送成功
  } else {
    // 发送失败
  }
}

以上就是在Flutter中实现微信朋友圈分享的步骤和代码示例。

更多的功能使用方法可以参考flutter_wechat_channel插件的文档。

5. 总结

本文介绍了如何在Flutter应用中集成微信小程序。我们首先介绍了Flutter框架和微信小程序的基本知识，然后讲解了准备工作和flutter_wechat_channel插件的引入，最后通过代码示例演示了微信小程序的启动和其他功能的实现方法。

在完成了微信小程序的集成之后，可以考虑进一步扩展应用的功能。比如，可以结合第三方地图API实现微信小程序的地图展示；或者结合网络请求库实现微信小程序的数据交互等等。

总之，在Flutter中使用flutter_wechat_channel库集成微信小程序相对来说比较简单和方便，只需要进行简单的配置和调用就可以实现微信小程序与Flutter应用的交互。随着Flutter的不断发展和完善，未来也会有更多的工具库和API提供更丰富的微信小程序集成功能，为开发者提供更多的选择和便利。

abinzhao

引言