readme英文版
parent
ca436ca413
commit
5c21885e19
28
README.md
28
README.md
|
|
@ -1,18 +1,18 @@
|
|||
<p align="center">
|
||||
<a href="https://www.finclip.com?from=github">
|
||||
<img width="auto" src="https://www.finclip.com/mop/document/images/logo.png">
|
||||
<img width="auto" src="./doc/phizlogo.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<strong>FinClip Flutter DEMO</strong></br>
|
||||
<strong>PhizClip Flutter DEMO</strong></br>
|
||||
<p>
|
||||
<p align="center">
|
||||
本项目提供在 Flutter 环境中运行小程序的示例 DEMO
|
||||
<p>
|
||||
|
||||
<p align="center">
|
||||
👉 <a href="https://www.finclip.com?from=github">https://www.finclip.com/</a> 👈
|
||||
👉 <a href="https://www.finclip.com?from=github">https://www.phizclip.com/</a> 👈
|
||||
</p>
|
||||
|
||||
<div align="center">
|
||||
|
|
@ -22,8 +22,7 @@
|
|||
<a href="#"><img src="https://img.shields.io/badge/%E5%B7%B2%E9%9B%86%E6%88%90%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BA%94%E7%94%A8-75%2B-yellow"></a>
|
||||
<a href="#"><img src="https://img.shields.io/badge/%E5%AE%9E%E9%99%85%E8%A6%86%E7%9B%96%E7%94%A8%E6%88%B7-2500%20%E4%B8%87%2B-orange"></a>
|
||||
|
||||
<a href="https://www.zhihu.com/org/finchat"><img src="https://img.shields.io/badge/FinClip--lightgrey?logo=zhihu&style=social"></a>
|
||||
<a href="https://www.finclip.com/blog/"><img src="https://img.shields.io/badge/FinClip%20Blog--lightgrey?logo=ghost&style=social"></a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -38,13 +37,13 @@
|
|||
</div>
|
||||
|
||||
-----
|
||||
## 🤔 FinClip 是什么?
|
||||
## 🤔 PhizClip 是什么?
|
||||
|
||||
有没有**想过**，开发好的微信小程序能放在自己的 APP 里直接运行，只需要开发一次小程序，就能在不同的应用中打开它，是不是很不可思议？
|
||||
|
||||
有没有**试过**，在自己的 APP 中引入一个 SDK ，应用中不仅可以打开小程序，还能自定义小程序接口，修改小程序样式，是不是觉得更不可思议？
|
||||
|
||||
这就是 FinClip ，就是有这么多不可思议！
|
||||
这就是 PhizClip ，就是有这么多不可思议！
|
||||
|
||||
## ⚙️ Flutter 集成
|
||||
|
||||
|
|
@ -79,13 +78,13 @@ class _MyAppState extends State<MyApp> {
|
|||
// Platform messages are asynchronous, so we initialize in an async method.
|
||||
Future<void> init() async {
|
||||
if (Platform.isiOS) {
|
||||
//com.finogeeks.mopExample
|
||||
//com.PhizClip.mopExample
|
||||
final res = await Mop.instance.initialize(
|
||||
'22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',
|
||||
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
|
||||
print(res);
|
||||
} else if (Platform.isAndroid) {
|
||||
//com.finogeeks.mopexample
|
||||
//com.PhizClip.mopexample
|
||||
final res = await Mop.instance.initialize(
|
||||
'22LyZEib0gLTQdU3MUauARjmmp6QmYgjGb3uHueys1oA', '98c49f97a031b555',
|
||||
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
|
||||
|
|
@ -99,7 +98,7 @@ class _MyAppState extends State<MyApp> {
|
|||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('凡泰极客小程序 Flutter 插件'),
|
||||
title: const Text('PhizClip Flutter 插件'),
|
||||
),
|
||||
body: Center(
|
||||
child: Container(
|
||||
|
|
@ -253,8 +252,8 @@ class _MyAppState extends State<MyApp> {
|
|||
///
|
||||
/// initialize mop miniprogram engine.
|
||||
/// 初始化小程序
|
||||
/// [appkey] is required. it can be getted from api.finclip.com
|
||||
/// [secret] is required. it can be getted from api.finclip.com
|
||||
/// [appkey] is required. it can be getted from api.phizclip.com
|
||||
/// [secret] is required. it can be getted from api.phizclip.com
|
||||
/// [apiServer] is optional. the mop server address. default is https://mp.finogeek.com
|
||||
/// [apiPrefix] is optional. the mop server prefix. default is /api/v1/mop
|
||||
///
|
||||
|
|
@ -434,3 +433,8 @@ module.exports = {
|
|||
|
||||
## Forkers
|
||||
[](https://github.com/finogeeks/finclip-flutter-demo/network/members)
|
||||
|
||||
## 🌏 多语言文档
|
||||
- [简体中文](./README.md)
|
||||
- [English](./readme_en.md)
|
||||
- [Português](./readme_pt.md)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -0,0 +1,438 @@
|
|||
<p align="center">
|
||||
<a href="https://www.finclip.com?from=github">
|
||||
<img width="auto" src="./doc/phizlogo.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<strong>PhizClip Flutter DEMO</strong></br>
|
||||
<p>
|
||||
|
||||
<p align="center">
|
||||
👉 <a href="https://www.finclip.com?from=github">https://www.phizclip.com/</a> 👈
|
||||
</p>
|
||||
|
||||
<div align="center">
|
||||
|
||||
<a href="#"><img src="https://img.shields.io/badge/Developers-20,000%2B-brightgreen"></a>
|
||||
<a href="#"><img src="https://img.shields.io/badge/Uploaded Mini Programs-6,000%2B-blue"></a>
|
||||
<a href="#"><img src="https://img.shields.io/badge/Apps with FinClip-75%2b-yellow"></a>
|
||||
<a href="#"><img src="https://img.shields.io/badge/Covered Users-25Million-orange"></a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<p align="center">
|
||||
|
||||
<div align="center">
|
||||
|
||||
[Home Page](https://www.finclip.com/) | [Example Mini-App](https://www.finclip.com/#/market) | [Documentation](https://www.finclip.com/mop/document/) | [Deployment Guide](https://www.finclip.com/mop/document/introduce/quickStart/cloud-server-deployment-guide.html) <br> [SDK Integration Guide](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html) | [API List](https://www.finclip.com/mop/document/develop/api/overview.html) | [Component List](https://www.finclip.com/mop/document/develop/component/overview.html) | [Privacy Commitment](https://www.finclip.com/mop/document/operate/safety.html)
|
||||
|
||||
</div>
|
||||
|
||||
-----
|
||||
## 🤔 What is PhizClip?
|
||||
|
||||
Have you ever **thought** that the developed WeChat Mini-App can be put in your own APP to run directly, and you only need to develop the Mini-App once, and then you can open it in different applications, isn't it incredible?
|
||||
|
||||
Have you ever **tried** to introduce an SDK in your own APP, and you can not only open the Mini-App in the app, but also customize the Mini-App interface and modify the Mini-App style, don't you think it is more incredible?
|
||||
|
||||
**This is PhizClip, with much INCREDIBLE !**
|
||||
|
||||
## ⚙️ Flutter integration
|
||||
|
||||
In the project `pubspec.yaml` add a dependency to the file
|
||||
|
||||
```yaml
|
||||
mop: latest.version
|
||||
```
|
||||
|
||||
## 🖥 Example
|
||||
|
||||
```flutter
|
||||
import 'package:flutter/material.dart';
|
||||
import 'dart:async';
|
||||
import 'dart:io';
|
||||
import 'package:mop/mop.dart';
|
||||
|
||||
void main() => runApp(MyApp());
|
||||
|
||||
class MyApp extends StatefulWidget {
|
||||
@override
|
||||
_MyAppState createState() => _MyAppState();
|
||||
}
|
||||
|
||||
class _MyAppState extends State<MyApp> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
init();
|
||||
}
|
||||
|
||||
// Platform messages are asynchronous, so we initialize in an async method.
|
||||
Future<void> init() async {
|
||||
if (Platform.isiOS) {
|
||||
//com.PhizClip.mopExample
|
||||
final res = await Mop.instance.initialize(
|
||||
'22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',
|
||||
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
|
||||
print(res);
|
||||
} else if (Platform.isAndroid) {
|
||||
//com.PhizClip.mopexample
|
||||
final res = await Mop.instance.initialize(
|
||||
'22LyZEib0gLTQdU3MUauARjmmp6QmYgjGb3uHueys1oA', '98c49f97a031b555',
|
||||
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
|
||||
print(res);
|
||||
}
|
||||
if (!mounted) return;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('PhizClip Flutter plug-in'),
|
||||
),
|
||||
body: Center(
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(
|
||||
top: 20,
|
||||
),
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
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');
|
||||
},
|
||||
child: Text(
|
||||
'Open the sample applet',
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 30),
|
||||
Container(
|
||||
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',sequence: 1);
|
||||
},
|
||||
child: Text(
|
||||
'Open the official applet',
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 📘 Directory structure
|
||||
```
|
||||
.
|
||||
├── LICENSE
|
||||
├── README.md
|
||||
├── android Android project directory
|
||||
│ ├── app
|
||||
│ │ ├── build.gradle Application build configuration
|
||||
│ │ └── src
|
||||
│ │ ├── debug
|
||||
│ │ │ └── AndroidManifest.xml Application manifest file
|
||||
│ │ ├── main Application source directory
|
||||
│ │ │ ├── AndroidManifest.xml Application manifest file
|
||||
│ │ │ ├── java Application source directory
|
||||
│ │ │ │ ├── com
|
||||
│ │ │ │ │ └── finogeeks
|
||||
│ │ │ │ │ └── mop_demo
|
||||
│ │ │ │ │ └── MainActivity.java
|
||||
│ │ │ │ └── io
|
||||
│ │ │ │ └── flutter
|
||||
│ │ │ │ └── plugins
|
||||
│ │ │ │ └── GeneratedPluginRegistrant.java
|
||||
│ │ │ └── res Resource file directory
|
||||
│ │ │ ├── drawable darwable Resource directory
|
||||
│ │ │ │ └── launch_background.xml
|
||||
│ │ │ ├── mipmap-hdpi Picture resource directory
|
||||
│ │ │ │ └── ic_launcher.png
|
||||
│ │ │ ├── mipmap-mdpi Picture resource directory
|
||||
│ │ │ │ └── ic_launcher.png
|
||||
│ │ │ ├── mipmap-xhdpi Picture resource directory
|
||||
│ │ │ │ └── ic_launcher.png
|
||||
│ │ │ ├── mipmap-xxhdpi Picture resource directory
|
||||
│ │ │ │ └── ic_launcher.png
|
||||
│ │ │ ├── mipmap-xxxhdpi Picture resource directory
|
||||
│ │ │ │ └── ic_launcher.png
|
||||
│ │ │ └── values
|
||||
│ │ │ └── styles.xml
|
||||
│ │ └── profile
|
||||
│ │ └── AndroidManifest.xml
|
||||
│ ├── build.gradle
|
||||
│ ├── gradle gradle version configuration directory, which is generally not required
|
||||
│ │ └── wrapper
|
||||
│ │ └── gradle-wrapper.properties
|
||||
│ ├── gradle.properties
|
||||
│ ├── local.properties
|
||||
│ └── settings.gradle
|
||||
├── build
|
||||
├── doc
|
||||
│ └── mop_flutter_demo.gif
|
||||
├── ios iOS Project Directory
|
||||
│ ├── Flutter Flutter-SDK directory, generally no concern
|
||||
│ │ ├── AppFrameworkInfo.plist
|
||||
│ │ ├── Debug.xcconfig
|
||||
│ │ ├── Flutter.framework
|
||||
│ │ ├── Flutter.podspec
|
||||
│ │ ├── Generated.xcconfig
|
||||
│ │ ├── Release.xcconfig
|
||||
│ │ └── flutter_export_environment.sh
|
||||
│ ├── Podfile pod dependency configuration file
|
||||
│ ├── Runner iOS source home directory
|
||||
│ │ ├── AppDelegate.h
|
||||
│ │ ├── AppDelegate.m
|
||||
│ │ ├── Assets.xcassets Picture resource
|
||||
│ │ │ ├── AppIcon.appiconset Icon
|
||||
│ │ │ └── LaunchImage.imageset Start-up diagram
|
||||
│ │ ├── Base.lproj
|
||||
│ │ │ ├── LaunchScreen.storyboard
|
||||
│ │ │ └── Main.storyboard
|
||||
│ │ ├── FATFlutterViewController.h Flutter page controller subclass
|
||||
│ │ ├── FATFlutterViewController.m Flutter page controller subclass
|
||||
│ │ ├── GeneratedPluginRegistrant.h
|
||||
│ │ ├── GeneratedPluginRegistrant.m
|
||||
│ │ ├── Info.plist iOS project profile
|
||||
│ │ └── main.m
|
||||
│ └── Runner.xcodeproj
|
||||
├── lib Flutter source directory
|
||||
│ ├── main.dart Home page
|
||||
│ └── wx_pay.dart Wechat Pay source code
|
||||
├── pubspec.lock
|
||||
├── pubspec.yaml Flutter profile
|
||||
└── test
|
||||
└── widget_test.dart
|
||||
```
|
||||
|
||||
## 📋 Interface document
|
||||
|
||||
### 1. Initialize the applet
|
||||
|
||||
The SDK must be initialized before using the apis provided by the SDK. The interfaces for initializing the SDK are as follows
|
||||
|
||||
```
|
||||
///
|
||||
/// initialize mop miniprogram engine.
|
||||
/// Initialize the applet
|
||||
/// [appkey] is required. it can be getted from api.phizclip.com
|
||||
/// [secret] is required. it can be getted from api.phizclip.com
|
||||
/// [apiServer] is optional. the mop server address. default is https://mp.finogeek.com
|
||||
/// [apiPrefix] is optional. the mop server prefix. default is /api/v1/mop
|
||||
///
|
||||
///
|
||||
Future<Map> initialize(String appkey, String secret,
|
||||
{String apiServer, String apiPrefix})
|
||||
```
|
||||
|
||||
Example of use:
|
||||
```
|
||||
final res = await Mop.instance.initialize(
|
||||
'22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',
|
||||
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
|
||||
```
|
||||
|
||||
### 2. Open applet
|
||||
|
||||
```
|
||||
///
|
||||
/// open the miniprogram [appId] from the mop server.
|
||||
/// Open applet
|
||||
/// [appId] is required.
|
||||
/// [path] is miniprogram open path. example /pages/index/index
|
||||
/// [query] is miniprogram query parameters. example key1=value1&key2=value2
|
||||
///
|
||||
///
|
||||
Future<Map> openApplet(final String appId,
|
||||
{final String path, final String query, final int sequence})
|
||||
```
|
||||
|
||||
### 3. Gets information about the applet currently in use
|
||||
|
||||
The current applet information includes fields such as `appId`, `name`, `icon`, `description`, `version`, `thumbnail`
|
||||
|
||||
```
|
||||
///
|
||||
/// get current using applet
|
||||
/// Gets information about the applet currently in use
|
||||
/// {appId,name,icon,description,version,thumbnail}
|
||||
///
|
||||
///
|
||||
Future<Map<String, dynamic>> currentApplet()
|
||||
```
|
||||
|
||||
### 4. Close all currently open applets
|
||||
|
||||
```
|
||||
///
|
||||
/// close all running applets
|
||||
/// Close all currently open applets
|
||||
///
|
||||
Future closeAllApplets()
|
||||
```
|
||||
|
||||
### 5. A small program to clear the cache
|
||||
|
||||
The small program that clears the cache will be downloaded again when it is opened again
|
||||
```
|
||||
///
|
||||
/// clear applets cache
|
||||
/// A small program to clear the cache
|
||||
///
|
||||
Future clearApplets()
|
||||
```
|
||||
|
||||
### 6. Register applet event handlers
|
||||
|
||||
When a specified event is triggered within the applet, the user is notified, such as the applet is forwarded, the applet needs to obtain user information and register the processor to make a corresponding response
|
||||
|
||||
```
|
||||
///
|
||||
/// register handler to provide custom info or behaviour
|
||||
/// Register applet event handlers
|
||||
///
|
||||
void registerAppletHandler(AppletHandler handler)
|
||||
```
|
||||
|
||||
Processor architecture
|
||||
```
|
||||
abstract class AppletHandler {
|
||||
///
|
||||
/// Forwarding applet
|
||||
///
|
||||
///
|
||||
///
|
||||
void forwardApplet(Map<String, dynamic> appletInfo);
|
||||
|
||||
///
|
||||
/// Get user information
|
||||
/// "userId"
|
||||
/// "nickName"
|
||||
/// "avatarUrl"
|
||||
/// "jwt"
|
||||
/// "accessToken"
|
||||
///
|
||||
Future<Map<String, dynamic>> getUserInfo();
|
||||
|
||||
/// Get the custom menu
|
||||
Future<List<CustomMenu>> getCustomMenus(String appId);
|
||||
|
||||
/// Custom menu click Processing
|
||||
Future onCustomMenuClick(String appId, int menuId);
|
||||
}
|
||||
```
|
||||
|
||||
### 7. Register extension API
|
||||
|
||||
If our small program SDK API does not meet your needs, you can register a custom small program API, and then you can call your own defined API within the small program.
|
||||
|
||||
```
|
||||
///
|
||||
/// register extension api
|
||||
/// Register extension api
|
||||
///
|
||||
void registerExtensionApi(String name, ExtensionApiHandler handler)
|
||||
```
|
||||
|
||||
iOS needs to create the `FinChatConf.js` file in the root directory of the applet. The configuration example is as follows
|
||||
|
||||
```
|
||||
module.exports = {
|
||||
extApi:[
|
||||
{ //Common interaction API
|
||||
name: 'onCustomEvent', // Extension api name This api must be implemented by the Native party
|
||||
params: { // Extend the parameter format of the api to include only the required attributes
|
||||
url: ''
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 📘 Directory structure
|
||||
|
||||
```
|
||||
.
|
||||
├─.github
|
||||
│
|
||||
├─.vscode
|
||||
│
|
||||
├─android Project Android source code
|
||||
│
|
||||
├─ios Engineering iOS source code
|
||||
│
|
||||
├─lib Project Flutter source code
|
||||
│ │
|
||||
│ ├─ main.dart Program entry, and each initialization, call examples
|
||||
│ │
|
||||
│ └─ wx_pay.dart Wechat Payment class example
|
||||
│
|
||||
├─test Test directory, no concern
|
||||
│
|
||||
└─pubspec.yaml Flutter project configuration items
|
||||
```
|
||||
|
||||
## 🔗 Links
|
||||
The following is information on common questions and guidelines for your development and experience with PhizClip
|
||||
|
||||
- [Home Page](https://www.finclip.com/#/home)
|
||||
- [Example Mini-App](https://www.finclip.com/#/market)
|
||||
- [Documentation](https://www.finclip.com/mop/document/)
|
||||
- [SDK Integration Guide](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html)
|
||||
- [Structure of PhizClip](https://www.finclip.com/mop/document/develop/guide/structure.html)
|
||||
- [Integration Guidelines(iOS)](https://www.finclip.com/mop/document/runtime-sdk/ios/ios-integrate.html)
|
||||
- [Integration Guidelines(Android)](https://www.finclip.com/mop/document/runtime-sdk/android/android-integrate.html)
|
||||
- [Integration Guidelines(Flutter)](https://www.finclip.com/mop/document/runtime-sdk/flutter/flutter-integrate.html)
|
||||
|
||||
## ☎️ Contact
|
||||
Scan the QR code below with WeChat and follow the official public number **Finogeeks** for more exciting content.<br>
|
||||
<img width="150px" src="https://www.finclip.com/mop/document/images/ic_qr.svg">
|
||||
|
||||
Scan the QR code below with WeChat and invite into the official WeChat exchange group (add friend note: **finclip consulting**) to get more exciting content.<br>
|
||||
<img width="150px" src="https://finclip-homeweb-1251849568.cos.ap-guangzhou.myqcloud.com/images/ldy111.jpg">
|
||||
|
||||
## Stargazers
|
||||
[](https://github.com/finogeeks/finclip-flutter-demo/stargazers)
|
||||
|
||||
## Forkers
|
||||
[](https://github.com/finogeeks/finclip-flutter-demo/network/members)
|
||||
|
||||
## 🌏 Languages
|
||||
- [简体中文](./README.md)
|
||||
- [English](./readme_en.md)
|
||||
- [Português](./readme_pt.md)
|
||||
Loading…
Reference in New Issue