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

.markdown-body { color: rgba(89, 89, 89, 1); font-size: 15px; font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 0), linear-gradient(1turn, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 0); background-size: 20px 20px; background-position: center }
.markdown-body p { color: rgba(89, 89, 89, 1); font-size: 15px; line-height: 2; font-weight: 400 }
.markdown-body p+p { margin-top: 16px }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { padding: 30px 0; margin: 0; color: rgba(19, 92, 224, 1) }
.markdown-body h1 { position: relative; text-align: center; font-size: 22px; margin: 50px 0 }
.markdown-body h1:before { position: absolute; content: ""; top: -10px; left: 50%; width: 32px; height: 32px; transform: translateX(-50%); background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC"); opacity: 0.36 }
.markdown-body h2 { position: relative; font-size: 20px; border-left: 4px solid; padding: 0 0 0 10px; margin: 30px 0 }
.markdown-body h3 { font-size: 16px }
.markdown-body ul { list-style: disc outside; margin-left: 2em; margin-top: 1em }
.markdown-body li { line-height: 2; color: rgba(89, 89, 89, 1) }
.markdown-body img.loaded { margin: 0 auto; display: block }
.markdown-body blockquote { background: rgba(255, 249, 249, 1); margin: 2em 0; padding: 2px 20px; border-left: 4px solid rgba(178, 174, 197, 1) }
.markdown-body blockquote p { color: rgba(102, 102, 102, 1); line-height: 2 }
.markdown-body a { color: rgba(3, 106, 202, 1); border-bottom: 1px solid rgba(3, 106, 202, 0.8); font-weight: 400; text-decoration: none }
.markdown-body em strong, .markdown-body strong { color: rgba(3, 106, 202, 1) }
.markdown-body hr { border-top: 1px solid rgba(19, 92, 224, 1) }
.markdown-body pre { overflow: auto }
.markdown-body code, .markdown-body pre { overflow: auto; position: relative; line-height: 1.75; font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body table { border-collapse: collapse; margin: 1rem 0; overflow-x: auto }
.markdown-body table td, .markdown-body table th { border: 1px solid rgba(223, 226, 229, 1); padding: 0.6em 1em }
.markdown-body table tr { border-top: 1px solid rgba(223, 226, 229, 1) }
.markdown-body table tr:nth-child(2n) { background-color: rgba(246, 248, 250, 1) }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

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

引言

移动应用程序在现代社会中发挥着越来越重要的作用。跨平台开发框架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提供更丰富的微信小程序集成功能，为开发者提供更多的选择和便利。