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供应更丰富的微信小程序集成功用，为开发者供应更多的挑选和便当。