Flutter integrates WeChat login and sharing functions

16040666:

1. WeChat open platform to create applications

Click "Create Mobile Application", fill in the relevant information and submit for review

Apply for permission to share and log in after approval

2.ios related configuration

1.Associated Domains:

In xcode, click in turn: left root directory Runner--"Runner under TARGETS--"Signing & Capabilities--"+Capability--"Add Associated Domains

Fill in the domain name in Domains, for example, if your domain name is www.abc.com, the format to fill in is: applinks:www.abc.com

2. apple-app-site-association file configuration

Create a file and write in the file:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "teamID.BundleID",
                "paths": [ "/app/*" ]
            }
        ]
    }
}

appID consists of teamID and BundleID, both of which can be viewed in the Apple Developer Center

Click on identifiers under certificates, identifiers&Profiles, click on your own application, you can see the relevant information of the application under Edit your App ID Configuration, and teamID is the content under App ID Prefix​

Fill in the obtained teamID and BundleID into appID according to teamID.BundleID

Deploy the configured apple-app-site-association file to the server

3.URLscheme

Click in order in xcode: Runner in the root directory on the left--"Runner under TARGETS--"Info--"Click URL Types to expand--"In ​Identifier​​write weixin​​,​​URL Schemes​​ ​Write the AppID in the application details of WeChat Open Platform

4.LSApplicationQueriesSchemes configuration whitelist

Click on the Info.plist file in xcode --"​Custom IOS Target Properties​--"Expand the item item of LSApplicationQueriesSchemes --"Add a whitelist

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

3. Introduce plug-ins

Because the WeChat payment function is not designed, the second one is selected in fluwx and fluwx_no_pay

fluwx_no_pay: ^2.5.2

4. Initialization

The value of universalLink: fill in the domain name configured in xcode after "https://", which is consistent with the Universal Links in the WeChat open platform

void initState() {
    initFluwx();
}

void initFluwx() async {
    await registerWxApi(
        appId: "微信开放平台的AppID",
        doOnAndroid: true,
        doOnIOS: true,
        universalLink: "https://*********"
    );
}

5. Share code

Check whether WeChat is installed before sharing

isWeChatInstalled.then((value){
    if(value){
        // 执行分享操作
    }else{
        print('无法打开微信,请检查是否安装了微信');
    }
});

There are many types of sharing, such as sharing links, pictures, videos, etc., which can be shared to the circle of friends, conversations with friends, and favorites. The following is the packaging method:

// share.dart

import 'dart:typed_data';
import 'package:fluwx_no_pay/fluwx_no_pay.dart';
import 'dart:io';

class share_wx{
  /**
   * 分享链接
   * 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}) {
    // 字符串不为空
    bool strNoEmpty(String value) {
      if (value == null) return false;

      return value.trim().isNotEmpty;
    }
    desc = desc ?? "";
    title = title ?? "";
    if (desc.length > 54) {
      desc = desc.substring(0, 54) + "...";
    }
    if (title.length > 20) {
      title = title.substring(0, 20) + "...";
    }
    WeChatScene wxScene = WeChatScene.SESSION;
    if (scene == 2) {
      wxScene = WeChatScene.TIMELINE;
    } else if (scene == 3) {
      wxScene = WeChatScene.FAVORITE;
    }
    WeChatImage image = null;
    if (thumbFile != null) {
      image = WeChatImage.file(File(thumbFile));
    } else if (thumbBytes != null) {
      image = WeChatImage.binary(thumbBytes);
    } else if (strNoEmpty(networkThumb)) {
      image = WeChatImage.network(Uri.encodeFull(networkThumb));
    } else if (strNoEmpty(assetThumb)) {
      image = WeChatImage.asset(assetThumb, suffix: ".png");
    }
    var model = WeChatShareWebPageModel(
      url,
      thumbnail: image,
      title: title,
      description: desc,
      scene: wxScene,
    );
    shareToWeChat(model);
  }

/**
   * 分享图片到微信,
   * file=本地路径
   * url=网络地址
   * asset=内置在app的资源图片
   * scene=分享场景,1好友会话,2朋友圈,3收藏
   */
  void ShareImage({String title,
    String decs,
    String file,
    String url,
    String asset,
    int scene = 1}) async {
    WeChatScene wxScene = WeChatScene.SESSION;
    if (scene == 2) {
      wxScene = WeChatScene.TIMELINE;
    } else if (scene == 3) {
      wxScene = WeChatScene.FAVORITE;
    }
    WeChatShareImageModel model = null;

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

6. Login code

After clicking WeChat login, first determine whether WeChat is installed, and then send WeChat authorization

GestureDetector(
    onTap: (){
        //判断是否安装了微信
        isWeChatInstalled.then((value){
            if(value){
                //发送微信授权
                sendWeChatAuth(scope: 'snsapi_userinfo', state:"wechat_sdk_demo_test").then((value){
                    print('拉取微信用户信息:${value}');
                }).catchError((e){});
            }else{
                print('无法打开微信,请检查是否安装了微信');
            }
        });
    },
)

Monitor the return result of WeChat authorization, and execute the login logic if the authorization is successful

void initState() {
    _weChatResponseEventHandler();
}

void _weChatResponseEventHandler(){
  weChatResponseEventHandler.distinct((a, b) => a == b).listen((event) {
    print('监听微信:${event.errCode}');
    if(event is WeChatAuthResponse){
      int errCode = event.errCode;
      print('微信登录返回值:ErrCode :${event.errCode}  code:${event.code}');
      if(errCode == 0){
        print('用户同意授权登录');
        String code = event.code;
        // 调接口将code传给后端,执行登陆操作
        ......
      }else if(errCode == -4){
        print('用户拒绝授权登录');
      }else if(errCode == -2){
        print('用户取消授权登录');
      }
    }
  });
}

Guess you like

Origin blog.csdn.net/YML_426/article/details/128916526