Flutter Scheme is used (share the link on WeChat and open the App in the browser to jump to a specific page: such as details and event pages)

Scenes: Share the product with WeChat friends in the product details of the app developed by Flutte. The user clicks the link browser to open and jump to the product details in the app.

Idea:

1. The connection shared by WeChat has parameters at the end, for example:https://xxx.com/xxx?goodsId=1&code=A101

2. The user clicks to open the connection browser, and the path jumps directly to a certain page on the mobile terminal. Then, when the page is initialized, the parameters on the link are obtained, and the parameters on the link are spliced ‚Äč‚Äčinto the protocol set by the Flutter App. For example:window.location.href = `dynamictheme://detail?id=${this.$route.query.goodsId}&code=${this.$route.query.code}`;

3. Configure the protocol for both Android and iOS in the Flutter App, give the protocol to the front end, jump to the parameters according to the protocol, and then get the connection to jump to the APP in main.dat, and get the parameters on the connection for routing. Jump with parameters

First: WeChat sharing

1.Introduce fluwx plug-in

fluwx: ^3.8.1+1 #WeChat SDK plug-in

2.Used in main.dart

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


 await fluwx.registerWxApi(
    appId: "appId",//This id needs to be obtained from the WeChat document
    doOnAndroid: true,
    doOnIOS: true,
    universalLink: "https://help.wechat.com/app",
  );

3.share:

fluwx.shareToWeChat(
     // promote_links
     fluwx.WeChatShareWebPageModel(
     // "${InfoList['PromoteLinks']}", // The shared link address is the link that users click to jump to in WeChat
     title: 'Share title', // title

     description:'Let's watch together! ', // Description, the default is the link
     thumbnail: fluwx.WeChatImage.asset(
     'assets/image/Bai.png'),
     scene: fluwx.WeChatScene.SESSION));

This way you can share the link to WeChat

Then the user connects and clicks on the browser in the upper right corner to open it.

URL Scheme

Introduction to Android Scheme

1. Scheme in android is an intra-page jump protocol;

2. By defining your own scheme protocol, you can easily jump to various pages in the app;

3. Through the scheme protocol, the server can customize it to tell the App to jump to the internal page of the App.

Using uni_links library

uni_links: ^0.5.1

Used in main.dart file

import ‘package:uni_links/uni_links.dart’;

Android configuration

My configuration:

Up code

 <intent-filter>
          <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data android:scheme="dynamictheme"/>
            <data 
                  android:host="detail"
                  android:scheme="dynamictheme"/>
          </intent-filter>

iOS configuration

path:ios/Runner/Info.plist

<! -- Scheme Skip app -->
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>dynamictheme</string>
			</array>
		</dict>
		<dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>weixin</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>wxid</string>
        </array>
    </dict>

	</array>

dart code

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

    initPlatformStateForStringUniLinks();
  }
  Future<void> initPlatformStateForStringUniLinks() async {
    // The App is not open and the scheme is captured here.
    try {
      initialLink = await getInitialLink();
      if (initialLink != null) {
        // Jump to the specified page
        schemeJump(initialLink);
      }
    } on PlatformException {
      initialLink = 'Failed to get initial link.';
    } on FormatException {
      initialLink = 'Failed to parse the initial link as Uri.';
    }
  }
  // box.read("login") ==null

  void schemeJump(String schemeUrl) {
    final _jumpUri = Uri.parse(schemeUrl.replaceFirst(
      'dynamictheme://',
      'http://path/',
    ));
    switch (_jumpUri.path) {
      case '/detail':
        Get.to(ProductDetails({
          'id': _jumpUri.queryParameters['id'],
          'code': _jumpUri.queryParameters['code']
        }));
        break;
      default:
        break;
    }
  }

Mobile code

Because my technologies are Vue and Flutter, and the projects I am responsible for use both, so I write them all by myself.

 created(){
    if (this.$route.query.goodsId) {
        window.location.href = `dynamictheme://detail?id=${this.$route.query.goodsId}&code=${this.$route.query.code}`;
      }
  },

Summary: This is just one method. I tried another deep connection method, but it was unsuccessful. Secondly, I found that many apps on the market are also jump apps in this form, so I used this method. After completion, there are still areas for optimization, such as opening the app in the WeChat browser, etc.

Related Posts

Overwriting the repositories warehouse address in gradle in Flutter and Android

Dialog of Getx series

Introduction to FLET: Building Flutter Apps with Python

Flutter uses ScrollController to obtain and control the scrolling position of the scrolling component

Flutter framework detailed explanation

Flutter configuration

Detailed explanation of flutter exporting ipa package

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*