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

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

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;
  }

  /**
   * 分享图片到微信,
   * file=本地路径
   * url=网络地址
   * asset=内置在app的资源图片
   * scene=分享场景,1好友会话,2朋友圈,3收藏
   */
  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);
  }

  /**
   * 分享文本
   * content=分享内容
   * scene=分享场景,1好友会话,2朋友圈,3收藏
   */
  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);
  }

/***
 * 分享视频
 * videoUrl=视频网上地址
 * thumbFile=缩略图本地路径
   * scene=分享场景,1好友会话,2朋友圈,3收藏
 */
  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);
  }

  /**
   * 分享链接
   * url=链接
   * thumbFile=缩略图本地路径
   * scene=分享场景,1好友会话,2朋友圈,3收藏
   */
  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;
  }

/**
 * 直接下载图片到本地临时目录
 * ios必须带有后缀,不然exists会永远=false
 */

  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仿微信分享功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-01-14

Flutter实现仿微信底部菜单栏功能

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MyHomePage(), ), ); } } class MyHomePage extends Sta

flutter仿微信底部图标渐变功能的实现代码

先给大家展示下效果图,感觉不错请参考实例代码. 实现思路 在flutter中,如果想实现上面的页面切换效果,必然会想到pageView.pageView的controller可以监听到pageView的滚动事件,也可以获取pageView滚动的位置,所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了. 改变图标颜色 图标是从微信中提取出来的,都是webp格式的图片.要改变图片颜色可以使用ImageIcon这个组件. ImageIcon会把一张图片变成单色图片,所以只要图片没有多色的要求

flutter 实现点击下拉栏微信右上角弹出窗功能

先看效果实现 需求分析 这个是使用 PopupRoute这个路由类进行实现 大概原理就是利用PopupRpute这个类进行改造,然后自定义一个页面,页面内镶嵌一个动画类,用来实现缩放动画 大概分为三部分,PopupRoute改造,弹出页面设置,动画类设置. 为什么选择PopupRoute? 可以镶嵌在flutter本身的路由管理之中 也就是逻辑操作都是正常的页面管理,可以手动管理,也可以用路由返回直接关掉,不会影响原有页面和布局 第一步,改造PopupRoute类 import 'package

Flutter 仿微信支付界面

左侧是微信支付的界面,右侧是开发完成后的效果,图标是从 iconfont 上下载的.首先介绍一下本篇涉及到的组件. 带装饰效果的 Container 实际过程中我们经常会遇到一个容器需要额外的样式,例如圆角,背景色等.在 Flutter 中,对于各种容器都有一个 decoration 的属性,可以用于装饰容器.典型的用法有设置背景色.圆角.边框和阴影等,其中背景色可以使用渐变色.decoration 是一个 Decoration 对象,最常用的是 BoxDecoration,BoxDecorat

Flutter实现微信朋友圈功能

本文实例为大家分享了Flutter实现微信朋友圈功能的具体代码,供大家参考,具体内容如下 今天给大家实现一下微信朋友圈的效果,下面是效果图 下面还是老样子,还是以代码的方式进行讲解 import 'package:dio/dio.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:nursery_school_gardener/view/ma

Android实现微信朋友圈发本地视频功能

一.前言 前一篇文章已经详细介绍了如何使用Xposed框架编写第一个微信插件:摇骰子和猜拳作弊器 本文继续来介绍如何使用Xposed框架编写第二个微信插件,可以将本地小视频发布到朋友圈的功能.在这之前我们还是要有老套路,准备工作要做好,这里还是使用微信6.3.9版本进行操作,准备工作: 1.使用apktool工具进行反编译,微信没有做加固防护,所以这个版本的微信包反编译是没有任何问题的. 2.借助于可视化反编译工具Jadx打开微信包,后续几乎重要分析都是借助这个工具来操作的. 二.猜想与假设 做

Android仿微信朋友圈全文、收起功能的实例代码

前言 一般在社交APP中都有类似朋友圈的功能,其中发表的动态内容很长的时候不可能让它全部显示.这里就需要做一个仿微信朋友圈全文.收起功能来解决该问题.在网上看到一个例子-->http://www.jb51.net/article/105251.htm,写的很不错,但是有个bug,他这个Demo只有在条目固定的时候才正常,当增加.删除条目的时候会出现全文.收起显示混乱的问题.原因是他使用了固定的position作为key来保存当前显示的状态.这篇文章在他的基础上进行优化. 效果图 具体代码 (详细

Android 实现微信,微博,微信朋友圈,QQ分享的功能

Android 实现微信,微博,微信朋友圈,QQ分享的功能 一.去各自所在的开发者平台注册相应的Key值:引入相关jar包.权限等 二.ShareUtil工具类 import android.app.Activity; import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.PackageManager; import android.graphics.Bit

java开发微信分享到朋友圈功能

微信分享功能开发 用了一天时间,把微信发送给朋友和分享到朋友圈功能开发出来,在这里给大家分享一下,避免大家走弯路. 一.服务器端程序 package com.wiimedia.controller; import java.io.IOException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.text.ParseException; import

Android 高仿微信朋友圈拍照上传功能

模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用 选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限 当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)

Android 仿微信朋友圈点赞和评论弹出框功能

贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现

关于Android实现简单的微信朋友圈分享功能

1.先下载微信分享的jar包放在lib目录下,并且添加依赖, 清单文件添加 <activity android:name=".wxapi.WXEntryActivity" android:exported="true">//产生回调 </activity> 2.在工程下新建如图所示的包和Activity Activity里面的内容主要是创建微信api并且注册返回回调值 private final String APP_ID= "wx

Android自定义TextView仿微信朋友圈文字展开全文功能

Android自定义TextView仿微信朋友圈文字信息,展开全文功能 代码及注释如下: 首先写一个xml文件 showmore.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical

iOS实现微信朋友圈视频截取功能

序言 微信现在这么普及,功能也做的越来越强大,不知大家对于微信朋友圈发视频截取的功能或者苹果拍视频对视频编辑的功能有没有了解(作者这里也猜测,微信的这个功能也是仿苹果的).感觉这个功能确实很方便实用,近来作者也在研究音视频功能,所以就实现了一下这个功能. 功能其实看着挺简单,实现过程也踩了不少坑.一方面记录一下:另一方面也算是对实现过程的再一次梳理,这样大家看代码也会比较明白. 效果 我们先看看我实现的效果 实现 实现过程分析 整个功能可以分为三部分: 视频播放 这部分我们单独封装一个视频播放器

android实现微信朋友圈发布动态功能

本文实例为大家分享了android仿微信朋友圈发布动态功能的具体代码,供大家参考,具体内容如下 效果图: 本文概述 用到的开源库:仿照微信的图片选择器,Luban压缩图片,glide 上面红圈部分,当用户选中图片时,当=9张时,那个加号图片就会消失! 本文主要仿照微信的发布动态功能,主要时针对微信发布动态时,选中图片后的变化状态! 整体布局 这可以看到,控制图片状态的地方就是一个recyclerview 思路 利用recyclerview的多行视图来实现! 微信上的效果是,先选中图片后才会进入这