Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to integrate and run Mini Program on the basis of Flutter project". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to integrate and run Mini Program on the basis of Flutter project".

Installation of new Flutter sample project Flutter

This article will use Flutter1.12.hotfix8 stable Edition as the development environment.

Download FlutterSDK

Configure the PATH environment path

Flutter doctor check the environment

New Flutter project flutter create-- template=app-- org=com.finogeeks.flutter-- project-name=mini_flutter-I objc-a java. / mini_flutte

After executing the above command, the following information will be prompted normally

All done! [✓] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN) [✓] Android toolchain-develop for Android devices: is fully installed. (Android SDK version 29.0.3) [✓] Xcode-develop for iOS and macOS: is fully installed. (Xcode 11.3.1) [✓] Android Studio: is fully installed. (version 3.6) [!] IntelliJ IDEA Ultimate Edition: is partially installed; more components are available. (version 2019.3.3) [✓] VS Code: is fully installed. (version 1.42.1) [!] Proxy Configuration: is partially installed; more components are available. [✓] Connected device: is fully installed. (1 available) Run "flutter doctor" for information about installing additional components.In order to run your application, type: $cd mini_flutte $flutter runYour application code is in mini_flutter/lib/main.dart

Be careful! Flutter depends on the local installation of the corresponding iOS,Android development tools, that is, you need to install Xcode and AndroidStudio. The specific installation and use methods will not be discussed here.

Here we use VSCode+Xcode as the development combination environment, if you want to debug properly, you need to make sure that the following three check items are normal.

[✓] Xcode-develop for iOS and macOS: is fully installed. (Xcode 11.3.1)

Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)

VS Code: is fully installed. (version 1.42.1)

[!] Proxy Configuration: is partially installed; more components are available.

Integrated Mini Program parsing engine

Here we use Fantai free community version of Mini Program parsing engine, only need less than 10 lines of code to complete Mini Program integration.

Introduce Mini Program engine plug-in. Introduce Mini Program Flutter plug-in into pubspec.yaml file

Mop: ^ 0.2.0

two。 Add the following Mini Program engine initialization method to the main.dart file. Mop.instance.initialize sdkkey and secret are needed here. You can register for it directly at https://mp.finogeeks.com for free. For registration, please refer to the access guide.

/ / Platform messages are asynchronous, so we initialize in an async method. Future init () async {if (Platform.isIOS) {final res = await Mop.instance.initialize ('22LyZEib0gLTQdU3MUauAYEY1h9s9YXzmGuSgQrin7UABA,' 9e05fa0015d7dbfasting, apiServer: 'https://mp.finogeeks.com', apiPrefix:' / api/v1/mop'); print (res) } else if (Platform.isAndroid) {final res = await Mop.instance.initialize ('22LyZEib0gLTQdU3MUauAYEY1h9s9YXzmGuSgQrin7UA,' 9e05fa0015d7dbfastly, apiServer: 'https://mp.finogeeks.com', apiPrefix:' / api/v1/mop'); print (res);} if (! mounted) return;}

3. Add three buttons to the main interface to open Mini Program

Center (child: Container (padding: EdgeInsets.only (top: 20,), child: Column (children: [Container (width: 140,decoration: BoxDecoration (borderRadius: BorderRadius.all (Radius.circular (5)), gradient: LinearGradient (colors: const [Color (0xFF12767e), Color (0xFF0dabb8)] Stops: const [0.0,1.0], begin: Alignment.topCenter, end: Alignment.bottomCenter,), child: FlatButton (onPressed: () {Mop.instance.openApplet ('5e3c147a188211000141e9b1), path:' pages/index/index' Query:'') }, child: Text ('Open Picture Mini Program', style: TextStyle (color: Colors.white), SizedBox (height: 30), Container (width: 140) Decoration: BoxDecoration (borderRadius: BorderRadius.all (Radius.circular (5)), gradient: LinearGradient (colors: const [Color (0xFF12767e), Color (0xFF0dabb8)], stops: const [0.0,1.0], begin: Alignment.topCenter, end: Alignment.bottomCenter,),) Child: FlatButton (onPressed: () {Mop.instance.openApplet ('5e4d123647edd60001055df1') }, child: Text ('Open official Mini Program', style: TextStyle (color: Colors.white), SizedBox (height: 30), Container (width: 140) Decoration: BoxDecoration (borderRadius: BorderRadius.all (Radius.circular (5)), gradient: LinearGradient (colors: const [Color (0xFF12767e), Color (0xFF0dabb8)], stops: const [0.0,1.0], begin: Alignment.topCenter, end: Alignment.bottomCenter,),) Child: FlatButton (onPressed: () {Mop.instance.openApplet ('5e637a18cbfae4000170fa7a') }, child: Text ('my statement', style: TextStyle (color: Colors.white),],),)

4. Run the Flutter program

Execute flutter devices from the code root directory to view the locally installed emulator.

Execute flutter run-- debug to run the example, as shown in the illustration at the top of this article.

Thank you for reading, the above is the content of "how to integrate and run Mini Program on the basis of Flutter project". After the study of this article, I believe you have a deeper understanding of how to integrate and run Mini Program on the basis of Flutter project. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.