Flutter微信集成插件fl_wx的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter微信集成插件fl_wx的使用

fl_wx 是一个对 fluwx 进行简单封装的插件，用于在 Flutter 应用中集成微信功能。本文将详细介绍如何使用 fl_wx 插件进行微信授权登录、支付、分享等操作。

1. 初始化与注册

首先，在应用启动时初始化并注册微信插件：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MaterialApp(
      title: 'FlWX',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      navigatorKey: FlExtended().navigatorKey,
      home: Scaffold(
          appBar: AppBar(title: const Text('FlWX')),
          body: const Center(child: _HomePage()))));
}

2. 基本操作

以下是一些基本的操作方法：

  • 注册：调用微信 SDK 并初始化。
  • 安装判断：检查设备是否安装了微信。
  • 授权登录：通过微信进行授权登录。
  • 支付：通过微信进行支付。
  • 打开微信：打开微信应用。
  • 分享：通过微信进行分享。
class _HomePage extends StatelessWidget {
  const _HomePage();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Wrap(spacing: 12, alignment: WrapAlignment.center, children: [
      Button('register', onPressed: () {
        FlWX().register(
            appId: '1111',
            params: FlWXCallbackParams(
                onHttp: (url) async {
                  return '';
                },
                onLog: (v) => log(v),
                onToast: (v) => showToast(v)));
      }),
      Button('isInstalled', onPressed: () {
        FlWX().isInstalled.then((value) {
          showToast(value.toString());
        });
      }),
      Button('isSupportOpenBusinessView', onPressed: () {
        FlWX().isSupportOpenBusinessView.then((value) {
          showToast(value.toString());
        });
      }),
      Button('authBy', onPressed: () {
        FlWX().authBy(NormalAuth(scope: ''));
      }),
      Button('pay', onPressed: () {
        final pay = {}.toPayment();
        if (pay != null) FlWX().pay(pay);
      }),
      Button('open', onPressed: () {
        FlWX().open(WeChatApp());
      }),
      Button('shareText', onPressed: () {
        FlWX().shareText('shareText');
      }),
      Button('share', onPressed: () {
        FlWX().share(WeChatShareTextModel('share'));
      }),
      Button('getExtMsg', onPressed: async {
        final result = await FlWX().getExtMsg();
        if (result != null) showToast(result);
      }),
    ]);
  }
}

3. 示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中集成微信插件：

import 'package:fl_extended/fl_extended.dart';
import 'package:fl_wx/fl_wx.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MaterialApp(
      title: 'FlWX',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      navigatorKey: FlExtended().navigatorKey,
      home: Scaffold(
          appBar: AppBar(title: const Text('FlWX')),
          body: const Center(child: _HomePage()))));
}

class _HomePage extends StatelessWidget {
  const _HomePage();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Wrap(spacing: 12, alignment: WrapAlignment.center, children: [
      Button('register', onPressed: () {
        FlWX().register(
            appId: '1111',
            params: FlWXCallbackParams(
                onHttp: (url) async {
                  return '';
                },
                onLog: (v) => log(v),
                onToast: (v) => showToast(v)));
      }),
      Button('isInstalled', onPressed: () {
        FlWX().isInstalled.then((value) {
          showToast(value.toString());
        });
      }),
      Button('isSupportOpenBusinessView', onPressed: () {
        FlWX().isSupportOpenBusinessView.then((value) {
          showToast(value.toString());
        });
      }),
      Button('authBy', onPressed: () {
        FlWX().authBy(NormalAuth(scope: ''));
      }),
      Button('pay', onPressed: () {
        final pay = {}.toPayment();
        if (pay != null) FlWX().pay(pay);
      }),
      Button('open', onPressed: () {
        FlWX().open(WeChatApp());
      }),
      Button('shareText', onPressed: () {
        FlWX().shareText('shareText');
      }),
      Button('share', onPressed: () {
        FlWX().share(WeChatShareTextModel('share'));
      }),
      Button('getExtMsg', onPressed: async {
        final result = await FlWX().getExtMsg();
        if (result != null) showToast(result);
      }),
    ]);
  }
}

class Button extends ElevatedButton {
  Button(
    String text, {
    super.key,
    required super.onPressed,
  }) : super(child: Text(text));
}

更多关于Flutter微信集成插件fl_wx的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter微信集成插件fl_wx的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成微信登录功能通常需要使用到第三方插件，例如fl_wx。以下是一个简要的代码示例，展示了如何在Flutter项目中配置和使用fl_wx插件来实现微信登录。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加fl_wx插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  fl_wx: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

2. 配置iOS和Android项目

iOS配置

  1. 注册App ID：确保你已经在微信公众平台上注册了App ID，并配置了iOS平台的相关信息。

  2. 下载SDK：从微信开放平台下载最新的微信SDK，并将其集成到你的iOS项目中。通常，这需要将微信SDK的库文件（如libWeChatSDK.a）添加到你的Xcode项目中，并配置相关的Header Search Paths。

  3. URL Types配置：在Xcode中，为你的应用添加URL Types，其中Identifier为wechat，URL Schemes为你在微信开放平台上配置的iOS平台App ID（去掉前缀wx）。

  4. Info.plist配置：在Info.plist中添加LSApplicationQueriesSchemes，包含weixin和weixinapi。

Android配置

  1. 注册App ID：同样，确保你已经在微信公众平台上注册了App ID，并配置了Android平台的相关信息。

  2. 下载SDK：从微信开放平台下载最新的微信SDK，并将其集成到你的Android项目中。通常，这需要将微信SDK的jar包或aar包添加到你的项目中。

  3. 配置AndroidManifest.xml：

    <activity
    android:name=".wxapi.WXEntryActivity"
    android:exported="true"
    android:launchMode="singleTop"
    android:theme="@android:style/Theme.Translucent.NoTitleBar">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:scheme="你的Android平台AppID" />
    </intent-filter>
</activity>

    注意替换你的Android平台AppID为实际在微信开放平台上配置的Android平台App ID（去掉前缀wx，并添加://sj后缀，如wx1234567890abcdef://sj）。

  4. 添加权限：

    <uses-permission android:name="android.permission.INTERNET" />

3. Flutter代码实现

在你的Flutter项目中，你可以使用fl_wx插件来发起微信登录请求。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:fl_wx/fl_wx.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter WeChat Login'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _weChatLogin,
            child: Text('Login with WeChat'),
          ),
        ),
      ),
    );
  }

  Future<void> _weChatLogin() async {
    try {
      // 初始化WeChat SDK（注意替换为你的App ID）
      await FlWx.registerApp("你的AppID");

      // 发起登录请求
      var result = await FlWx.login();
      print("WeChat Login Result: $result");

      // 处理登录结果（通常需要将code发送到你的服务器以获取access_token和用户信息）
    } catch (e) {
      print("WeChat Login Error: $e");
    }
  }
}

注意：

  • 在调用FlWx.registerApp时，替换"你的AppID"为你的实际微信App ID。
  • 登录成功后，result将包含一个code字段，你需要将这个code发送到你的服务器，服务器将使用这个code向微信服务器请求access_token和用户信息。

注意事项

  • 确保你已经在微信开放平台上正确配置了你的应用信息，包括包名、签名等。
  • 在实际项目中，处理微信登录结果时，应该考虑到各种异常情况，如网络错误、用户取消登录等。
  • 由于微信SDK的更新和Flutter插件的维护情况可能会有所不同，建议查阅最新的fl_wx插件文档和微信开放平台文档，以确保你的集成是最新和正确的。
回到顶部