美文网首页flutterAndroidiOS 技巧
微信内唤起app(flutter)

微信内唤起app(flutter)

作者: lyricDon | 来源:发表于2021-12-13 20:52 被阅读0次

    本功能基于flutter平台实现, 但是方法同样适用原生客户端, 区别只在于flutter端是通过sdk发送消息至原生来实现.

    iOS端:

    基于Universal Links实现, 不受微信控制, 此处不细说, 官网照做就行

    安卓端:

    1. 浏览器内:
      通过DeepLink方式唤起app并传递参数, 例如: YOURSCHEME://aa/bb?c=d
    2. 微信内:
      基于微信sdk唤起app并传递参数, 用于微信内网页跳转至app, 标签名<wx-open-launch-app>, H5端和后台需要接入, 具体查看微信文档

    Flutter端:

    依赖库:

    fluwx: 3.6.1+4
    uni_links: 0.5.1

    监听双端link跳转方法

    iOS的Universal Links和安卓的Deeplink均会走下面的方法

    /// 监听外部的跳转链接
      initUniLinks() async {
    
        var __dealUri = (String url) {
          if (url == null || url.isEmpty) {
            return;
          }
          if (url.startsWith("Your.UniversalLink")) {
            var routeName = url.replaceFirst("Your.UniversalLink", "");
            // 此处替换为你自己的路由方法
            Application.navigateTo(context, routeName);
          } else if (url.startsWith("Your.CustomScheme")) {
            var routeName = url.replaceFirst("Your.CustomScheme", "");
            // 此处替换为你自己的路由方法
            Application.navigateTo(context, routeName);
          }
        };
    
        // 监听app未被kill时的跳转
        linkStream.listen((event) {
          __dealUri(event);
        });
    
        try {
          // 获取冷启动连接
          var url = await getInitialLink();
          __dealUri(url);
        } catch (e) {
    
        }
      }
    

    从微信唤起app(安卓端)

    苹果因为是系统级别的跳转, 所以没有这些逻辑

    /// 监听微信跳转
      void _initWechat() {
        __dealUrl(String msg) {
          if (msg == null) {
            return;
          }
          var route;
          try {
            // 这里的取值逻辑自己和H5对接就行
            msg = Uri.decodeQueryComponent(msg);
            var map = jsonDecode(msg);  
            route = map["route"];
          } catch (e) {
            
          }
          if (route != null) {
            // 此处替换为你自己的路由方法
            Application.navigateTo(context, route);
          }
        }
        
        /// 冷启动链接获取
        fluwx.getExtMsg().then((url) {
          if (url?.startsWith("wechatextmsg://") ?? false) {
            Uri uri = Uri.parse(url);
            try {
              // extmsg的值需要encode,不然无法解析成功
              var data = uri.queryParameters['extmsg'];
              // 兼容处理
              if (data == null) {
                data = url.replaceFirst('wechatextmsg://com.ganlin.app/?extmsg=', '');
              }
              var json = jsonDecode(data);
              var path = json['route'];
              Application.navigateTo(context, path);
            } catch (e) {
              
            }
          } else {
            __dealUrl(url);
          }
        });
    
        // 监听app未被kill时的跳转
        fluwx.weChatResponseEventHandler.listen((event) {
          if (event is fluwx.WeChatShowMessageFromWXRequest) {
            var msg = event.extMsg;
            __dealUrl(msg);
          }
        });
      }
    

    以上完成, 双端均可在浏览器微信直接唤起app并跳转到指定页面
    附上一张安卓端效果图:

    安卓端微信内直接唤起app

    相关文章

      网友评论

        本文标题:微信内唤起app(flutter)

        本文链接:https://www.haomeiwen.com/subject/mudsfrtx.html