返回顶部
首页 > 资讯 > 移动开发 >Flutter实现仿微信分享功能的示例代码
  • 559
分享到

Flutter实现仿微信分享功能的示例代码

2024-04-02 19:04:59 559人浏览 八月长安
摘要

目录1.首先去pub官网2 在微信开放平台注册开发者账号以及创建你的应用程序3 在分享页面3.1 初始化3.2 检测微信是否安装3.3 分享微信消息总结本文设计到的知识点有主要问题F

Flutter 用来快速开发 Android iOS平台应用,在Flutter 中,通过 fluwx或者fluwx_no_pay 插件来实现微信分享功能

主要还是看自己的需求,本示例我将按照没有支付的实现。至于为什么,主要是ios打包提审比较麻烦。

那么接下来就看一下如何实现吧,

1.首先去pub官网

https://pub.flutter-io.cn/

查找这两个包

fluwx_no_pay

或者

fluwx

安装方式有两种:

方法一:

flutter pub add fluwx_no_pay

方法二:

dependencies:
  fluwx_no_pay: ^3.6.1+5

然后在使用的时候导入

import 'package:fluwx_no_pay/fluwx_no_pay.dart';

虽然它集成的功能很多

但是我们只做分享的演示

2 在微信开放平台注册开发者账号以及创建你的应用程序

微信开放平台链接

开发平台文档

创建应用填写基本的应用信息后,提交微信平台审核,审核通过后

从这里拿到 AppID ,然后再将配置的 iOS 平台的 Universal Links 拿过来,至于如何获取,请查看相关资料。

3 在分享页面

3.1 初始化

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

  Future _initFluwx() async {

    await WxSdk.init();

  }

3.2 检测微信是否安装

如点击按钮时进行分享,分享前检查一下

  bool _wxIsInstalled = false;  
  void _checkWx() async {
    _wxIsInstalled = await WxSdk.wxIsInstalled();
    refreshUI();
  }

3.3 分享微信消息

 String imagePath;

imagePath = await LocalImageCache.instance
          .download(context, widget.cjinfo.cover, ext: ".jpg");
//压缩图片,我这儿用的flutter_image_compress

                          Uint8List image =
                              await FlutterImageCompress.compressWithFile(
                            imagePath,
                            minHeight: 128,
                            minWidth: 128,
                            quality: 20,
                            // rotate: 135,
                          );

                         WxSdk.ShareUrl(
                                  //分享链接
                                  "你的链接",
                                  scene: 1,
                                  thumbFile: imagePath,
                                  desc: "描述",
                                  title: "标题",
                                );

封装的工具

import 'dart:io';
import 'dart:typed_data';
import 'check.dart';
import 'package:fluwx_no_pay/fluwx_no_pay.dart' as fluwx;


class WxSdk {
  // static bool wxIsInstalled;
  static Future init() async {
    fluwx.reGISterWxapi(
        appId: "你的appid",
        doOnAndroid: true,
        doONIOS: true,
        universalLink: "你的universalLink");
  
  }

  static Future<bool> wxIsInstalled() async {
    return await fluwx.isWeChatInstalled;
  }



  
  static void ShareImage(
      {String title,
      String decs,
      String file,
      String url,
      String asset,
      int scene = 1}) async {
    fluwx.WeChatScene wxScene = fluwx.WeChatScene.SESSION;
    if (scene == 2) {
      wxScene = fluwx.WeChatScene.TIMELINE;
    } else if (scene == 3) {
      wxScene = fluwx.WeChatScene.FAVORITE;
    }
    fluwx.WeChatShareImageModel model = null;

    if (file != null) {
      model = fluwx.WeChatShareImageModel(fluwx.WeChatImage.file(File(file)),
          title: title, description: decs, scene: wxScene);
    } else if (url != null) {
      model = fluwx.WeChatShareImageModel(fluwx.WeChatImage.network(url),
          title: title, description: decs, scene: wxScene);
    } else if (asset != null) {
      model = fluwx.WeChatShareImageModel(fluwx.WeChatImage.asset(asset),
          title: title, description: decs, scene: wxScene);
    } else {
      throw Exception("缺少图片资源信息");
    }
    fluwx.shareToWeChat(model);
  }

  
  static void ShareText(String content, {String title, int scene = 1}) {
    fluwx.WeChatScene wxScene = fluwx.WeChatScene.SESSION;
    if (scene == 2) {
      wxScene = fluwx.WeChatScene.TIMELINE;
    } else if (scene == 3) {
      wxScene = fluwx.WeChatScene.FAVORITE;
    }
    fluwx.WeChatShareTextModel model =
        fluwx.WeChatShareTextModel(content, title: title, scene: wxScene);
    fluwx.shareToWeChat(model);
  }


  static void ShareVideo(String videoUrl,
      {String thumbFile, String title, String desc, int scene = 1}) {
    fluwx.WeChatScene wxScene = fluwx.WeChatScene.SESSION;
    if (scene == 2) {
      wxScene = fluwx.WeChatScene.TIMELINE;
    } else if (scene == 3) {
      wxScene = fluwx.WeChatScene.FAVORITE;
    }
    fluwx.WeChatImage image = null;
    if (thumbFile != null) {
      image = fluwx.WeChatImage.file(File(thumbFile));
    }
    var model = fluwx.WeChatShareVideoModel(
        videoUrl: videoUrl,
        thumbnail: image,
        title: title,
        description: desc,
        scene: wxScene);
    fluwx.shareToWeChat(model);
  }

  
  static void ShareUrl(String url,
      {String thumbFile,
      Uint8List thumbBytes,
      String title,
      String desc,
      int scene = 1,
      String networkThumb,
      String assetThumb}) {
    desc = desc ?? "";
    title = title ?? "";
    if (desc.length > 54) {
      desc = desc.substring(0, 54) + "...";
    }
    if (title.length > 20) {
      title = title.substring(0, 20) + "...";
    }
    fluwx.WeChatScene wxScene = fluwx.WeChatScene.SESSION;
    if (scene == 2) {
      wxScene = fluwx.WeChatScene.TIMELINE;
    } else if (scene == 3) {
      wxScene = fluwx.WeChatScene.FAVORITE;
    }
    fluwx.WeChatImage image = null;
    if (thumbFile != null) {
      image = fluwx.WeChatImage.file(File(thumbFile));
    } else if (thumbBytes != null) {
      image = fluwx.WeChatImage.binary(thumbBytes);
    } else if (strNoEmpty(networkThumb)) {
      image = fluwx.WeChatImage.network(Uri.encodeFull(networkThumb));
    } else if (strNoEmpty(assetThumb)) {
      image = fluwx.WeChatImage.asset(assetThumb, suffix: ".png");
    }
    var model = fluwx.WeChatShareWEBPageModel(
      url,
      thumbnail: image,
      title: title,
      description: desc,
      scene: wxScene,
    );
    fluwx.shareToWeChat(model);
  }
}

check.dart

/// 字符串不为空
bool strNoEmpty(String value) {
  if (value == null) return false;

  return value.trim().isNotEmpty;
}

/// 字符串不为空
bool mapNoEmpty(Map value) {
  if (value == null) return false;
  return value.isNotEmpty;
}

///判断List是否为空
bool listNoEmpty(List list) {
  if (list == null) return false;

  if (list.length == 0) return false;

  return true;
}

//下载图片

import 'dart:convert';
import 'dart:io';
import 'dart:typed_data';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:path_provider/path_provider.dart';

class LocalImageCache {
  static LocalImageCache instance = LocalImageCache();
  String _tmepPath = "";
  void init() async {
    var tempDir = await getTemporaryDirectory();
    _tmepPath = tempDir.path;
  }



 

  Future<String> download(BuildContext context, String url,{String ext = ""}) async {
    try {
      var dio = await Dio()
          .get(url, options: Options(responseType: ResponseType.bytes));
      Uint8List image = Uint8List.fromList(dio.data);
      
      return save(image, url,ext: ext);
    } catch (ex) {
      print("image download error:${ex.toString()}");
      return null;
    }
  }

  
}

总结

本文设计到的知识点有

  • 如何进行微信分享
  • 如何利用dio将图片下载到本地
  • 如何利用flutter_image_compress压缩图片

主要问题

未安装微信

ios未配置白名单

图片太大了(所以我用了压缩技术)32k

开发平台文档

以上就是一些在接入微信分享过程中遇到的一些问题。

到此这篇关于Flutter实现仿微信分享功能的示例代码的文章就介绍到这了,更多相关Flutter仿微信分享功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Flutter实现仿微信分享功能的示例代码

本文链接: https://lsjlt.com/news/162556.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter实现仿微信分享功能的示例代码
    目录1.首先去pub官网2 在微信开放平台注册开发者账号以及创建你的应用程序3 在分享页面3.1 初始化3.2 检测微信是否安装3.3 分享微信消息总结本文设计到的知识点有主要问题F...
    99+
    2024-04-02
  • Flutter实现仿微信分享功能的示例代码怎么写
    这期内容当中小编将会给大家带来有关Flutter实现仿微信分享功能的示例代码怎么写,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Flutter 用来快速开发 Android iOS平台应用,在Flutte...
    99+
    2023-06-26
  • Flutter仿微信通讯录实现自定义导航条的示例代码
    某些页面比如我们在选择联系人或者某个城市的时候需要快速定位到我们需要的选项,一般都会需要像微信通讯录右边有一个导航条一样的功能,由A到Z进行快速定位,本篇文章我们将自己来实现一个跟微...
    99+
    2024-04-02
  • iOS仿微信图片分享界面实现代码
    以下是一个iOS仿微信图片分享界面的实现代码的示例:```swiftimport UIKitclass ViewController: UIViewController, UICollectionViewDelegate, UIColl...
    99+
    2023-08-11
    iOS
  • flutter 集成微信登录、分享功能
    1.微信开放平台创建应用 点击“创建移动应用”,填写相关信息后提交审核 审核通过后申请分享和登录的权限 2.ios相关配置 Associated Domains: 在xcode中依次点击:左侧根目录Runner--》TARGETS下的R...
    99+
    2023-08-31
    xcode macos ide
  • uniapp实现微信小程序全局分享的示例代码
    目录创建全局分享内容文件引入并全局注册该文件自定义页面分享内容 uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能。主要使用 Vue.js 的 全局混入 概念。 下面直...
    99+
    2024-04-02
  • uniapp模仿微信实现聊天界面的示例代码
    目录项目演示前言主界面chat.vue中引入的js文件chat.vue中引入的组件submit.vue中引入的组件最后项目演示 前言 我是看B站的视频一个一个敲的,讲的还不错。可以...
    99+
    2024-04-02
  • Android 仿微信图像拍摄和选择界面功能(代码分享)
     插件运行后的画面如下: 下面这张图对图像进行筛选,根据照片产生的源头分(QQ和微信和相机) 点击某文件夹后,可以查看该文件夹下包含的所有的图片 图片选择界面 ...
    99+
    2022-06-06
    仿微信 选择 界面 Android
  • 微信小程序实现发动态功能的示例代码
    目录一、设计所需要的表1、文章表2、评论表3、点赞表二、发布动态1、文本区2、最终发表动态效果3、发布动态代码最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一...
    99+
    2022-11-13
    小程序发动态 微信小程序发动态
  • Android 分享功能的实现代码
    Android 分享功能的实现代码 一个Activity中,取出设备上安装的所有支持分享动作的Activity,在grid中显示。 实例代码: public class N...
    99+
    2022-06-06
    Android
  • Android仿微信单击拍照长按录像功能实例代码
    此文章是看郭神公众号发的一篇,仅作学习。 在modlue gradle中添加 compile 'cjt.library.wheel:camera:0.0.7' 在projec...
    99+
    2022-06-06
    Android
  • Flutter实现微信朋友圈功能
    本文实例为大家分享了Flutter实现微信朋友圈功能的具体代码,供大家参考,具体内容如下 今天给大家实现一下微信朋友圈的效果,下面是效果图 下面还是老样子,还是以代码的方式进行讲解...
    99+
    2024-04-02
  • Android 实现微信,微博,微信朋友圈,QQ分享的功能
    Android 实现微信,微博,微信朋友圈,QQ分享的功能 一、去各自所在的开发者平台注册相应的Key值;引入相关jar包、权限等 二、ShareUtil工具类 impor...
    99+
    2022-06-06
    朋友圈 Android
  • Android仿微信布局的实现示例
    目前没有实现微信的功能,只是对微信的各个界面的调动以及对通讯录,发现和我中各个按钮的设置,同时如果你想尝试给微信中各个按钮背后添加功能时间可以用此作为模板哦,如拍照,朋友圈的添加都可...
    99+
    2024-04-02
  • vue+element+electron仿微信实现代码
    目录一.仿得太像了有木有~1.登录窗口2.主窗口 二.构思,以微信设计布局构思三.构建项目四.总结一.仿得太像了有木有~ 1.登录窗口 2.主窗口  二.构思...
    99+
    2022-12-15
    vue+element+electron仿微信 vue+element+electron
  • 微信小程序实现幸运大转盘功能的示例代码
    目录一、项目展示二、抽奖页三、领奖页一、项目展示 幸运大转盘是一个简单的抽奖小程序 参与用户点击抽奖便可抽取轮盘的奖品 二、抽奖页 抽奖页是一个大轮盘和活动规则 页面形式简单 主要...
    99+
    2024-04-02
  • uniapp 实现微信小程序全局分享的示例代码怎么编写
    这期内容当中小编将会给大家带来有关uniapp 实现微信小程序全局分享的示例代码怎么编写,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的...
    99+
    2023-06-22
  • Android实现微信登录的示例代码
    目录一、布局界面二、MainActivity.java微信登录的实现与qq登录类似。不过微信登录比较麻烦,需要拿到开发者资质认证,花300块钱,然后应用的话还得有官网之类的,就是比较...
    99+
    2024-04-02
  • 微信小程序封装分享与分销功能的示例分析
    这篇文章将为大家详细讲解有关微信小程序封装分享与分销功能的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言在微信小程序中,可以很简单的分享一个页面,比微信H5简...
    99+
    2024-04-02
  • iOS实现微信分享多张图片功能
    前言 微信分享到朋友圈,可分享的类型有:文字类型、图片类型、音乐类型、视频类型和网页类型,但是我们在做图片分享的时候发现微信给的API只能分享一张图片,达不到一些APP的需求,而产品...
    99+
    2022-06-03
    iOS 微信分享
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作