Flutter微信分享小程序卡片的实现步骤

在Flutter中实现微信分享小程序卡片功能时，如何正确配置Android和iOS端的微信开放平台参数？具体需要集成哪些第三方插件（如fluwx或其他）？分享时遇到"签名验证失败"或"未注册应用ID"错误该如何排查？能否提供完整的代码示例，包括小程序的原始ID、路径参数和缩略图的处理方式？iOS端分享后无法正常回调App的问题该如何解决？

3 回复

作为屌丝程序员，我来教你实现Flutter微信分享小程序卡片。首先确保你的Flutter项目已集成flutter_wechat插件。

  1. 初始化微信登录：调用WeChat.instance.registerApp(appId)，在AppDelegate中配置微信SDK。

  2. 构造分享参数：

ShareWebpageModel webpage = ShareWebpageModel()
  ..title = '分享标题'
  ..description = '描述内容'
  ..thumbData = await file.readAsBytes() // 缩略图文件
  ..webpageUrl = 'https://example.com'; // 小程序页面链接
  1. 调用微信分享接口：
var result = await WeChat.instance.shareToWX(
    webpage, WeChatScene.SESSION); // SESSION或TIMELINE
  1. 处理返回结果，判断分享是否成功。

注意：要申请微信开放平台账号，获取appId；确保小程序和公众号绑定同一主体；测试时使用正式版小程序链接。

更多关于Flutter微信分享小程序卡片的实现步骤的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


实现Flutter中微信分享小程序卡片功能，需借助flutter_wechat插件：

  1. 引入插件：在pubspec.yaml添加flutter_wechat，并运行flutter pub get。

  2. 初始化微信：在main()函数中调用WeChat.registerApp('your-wechat-app-id')，获取微信开放能力。

  3. 构建分享参数：

    • 创建WXMiniProgramObject对象，设置path（小程序页面路径）、type（版本类型）。
    • 构建WXMediaMessage，填充标题、描述及小程序对象。

  4. 发送分享请求：实例化SendMessageToWXReq，指定场景（会话或朋友圈），调用WeChat.sendReq()发送。

  5. 监听结果：通过onUnhandledCustomEvent监听微信返回的状态。

  6. 处理回调：在Flutter端实现回调逻辑，如更新UI或提示用户。

注意事项：确保已注册微信开放平台账号，正确配置AppID；调试时需使用真机测试。

Flutter微信分享小程序卡片实现步骤

1. 准备工作

  • 注册微信开放平台账号
  • 获取AppID
  • 在微信开放平台申请"小程序分享"功能权限

2. 添加依赖

在pubspec.yaml中添加微信官方插件：

dependencies:
  fluwx: ^3.x.x # 使用最新版本

3. 配置

Android配置

在AndroidManifest.xml中添加：

<activity
    android:name="com.tencent.mm.opensdk.openapi.WXAPIFallbackActivity"
    android:exported="false"
    android:theme="@android:style/Theme.Translucent.NoTitleBar" />

iOS配置

在Info.plist中添加：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>weixin</string>
</array>

4. 代码实现

import 'package:fluwx/fluwx.dart' as fluwx;

// 初始化
Future<void> initFluwx() async {
  await fluwx.register(appId: "你的微信AppID");
}

// 分享小程序卡片
Future<void> shareMiniProgram() async {
  final result = await fluwx.shareToWeChat(fluwx.WeChatShareMiniProgramModel(
    webPageUrl: "https://www.example.com", // 兼容低版本链接
    userName: "原始小程序ID", // 原始小程序ID
    path: "pages/index/index", // 小程序页面路径
    title: "小程序分享标题",
    description: "小程序分享描述",
    thumbnail: fluwx.WeChatImage.network("https://example.com/logo.png"),
    miniProgramType: fluwx.MiniProgramType.PREVIEW, // 正式版:RELEASE,测试版:TEST,体验版:PREVIEW
  ));
  
  print(result);
}

5. 使用示例

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initFluwx();
  
  ElevatedButton(
    onPressed: shareMiniProgram,
    child: Text('分享小程序卡片'),
  );
}

注意事项

  1. 必须同时提供webPageUrl作为低版本微信的兼容链接
  2. 小程序必须与当前应用在同一微信开放平台账号下
  3. 分享前需确保微信客户端已安装
  4. 图片建议使用网络图片，且大小不超过32KB

如需更多功能如回调处理，请参考fluwx插件的官方文档。

回到顶部