1
0
Fork 0

英文版readme翻译

master
sannilake 2023-11-09 15:01:31 +08:00
parent c9e62f0f33
commit 369f63c51c
3 changed files with 154 additions and 13 deletions

View File

@ -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="./docs//phizlogo.png">
</a>
</p>
<p align="center">
<strong>FinClip ReactNative DEMO</strong></br>
<strong>PhizClip ReactNative DEMO</strong></br>
<p>
<p align="center">
本项目提供在 ReactNative 环境中运行小程序的 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,17 +37,17 @@
</div>
-----
## 🤔 FinClip 是什么?
## 🤔 PhizClip 是什么?
有没有**想过**,开发好的微信小程序能放在自己的 APP 里直接运行,只需要开发一次小程序,就能在不同的应用中打开它,是不是很不可思议?
有没有**试过**,在自己的 APP 中引入一个 SDK ,应用中不仅可以打开小程序,还能自定义小程序接口,修改小程序样式,是不是觉得更不可思议?
这就是 FinClip ,就是有这么多不可思议!
这就是 PhizClip ,就是有这么多不可思议!
## 🤩 效果预览
**本项目是 FinClip 小程序在 ReactNative 工程基础上下集成及运行小程序 DEMO 演示,您可以按照下方流程测试,验证 FinClip 小程序在 ReactNative 环境下的实际效果。**
**本项目是 PhizClip 小程序在 ReactNative 工程基础上下集成及运行小程序 DEMO 演示,您可以按照下方流程测试,验证 PhizClip 小程序在 ReactNative 环境下的实际效果。**
先看一下运行效果~
@ -84,7 +83,7 @@ const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
appkey:
'Ev7QHvml1UcW98Y1GaLfRz34ReffbDESaTXbCoFyKhEm0a3gam0elOOOdZ6Twpa3HkBzlvOwJ2cyhOrMVWuuGw==',
secret: '16f2d2700453ae51',
apiServer: 'https://api.finclip.com',
apiServer: 'https://api.phizclip.com',
apiPrefix: '/api/v1/mop/',
nativeEventEmitter: eventEmitter,
finMopSDK: NativeModules.FINMopSDK,
@ -102,20 +101,20 @@ MopSDK.openApplet({appId: 'xxxx'});
```
- **SDK KEY****SDK SECRET** 可以从 [FinClip](https://finclip.com/#/home) 获取,点 [这里](https://finclip.com/#/register) 注册账号;
- **SDK KEY****SDK SECRET** 可以从 [PhizClip](https://finclip.com/#/home) 获取,点 [这里](https://finclip.com/#/register) 注册账号;
- 进入平台后,在「应用管理」页面添加你自己的包名后,点击「复制」即可获得 key\secret\apisever 字段;
- **apiServer****apiPrefix** 是固定字段,请直接参考本 DEMO
- **小程序 ID** 是管理后台上架的小程序 APP ID需要在「小程序管理」中创建并在「应用管理」中关联
> 小程序 ID 与 微信小程序ID 不一样哦!(这里是特指 FinClip 平台的 ID
> 小程序 ID 与 微信小程序ID 不一样哦!(这里是特指 PhizClip 平台的 ID
## 📋 接口文档
[点击这里](https://www.finclip.com/mop/document/runtime-sdk/reactNative/rn-integrate.html) 查看 React Native 快速集成文档
## 🔗 常用链接
以下内容是您在 FinClip 进行开发与体验时,常见的问题与指引信息
以下内容是您在 PhizClip 进行开发与体验时,常见的问题与指引信息
- [FinClip 官网](https://www.finclip.com/#/home)
- [PhizClip 官网](https://www.finclip.com/#/home)
- [示例小程序](https://www.finclip.com/#/market)
- [文档中心](https://www.finclip.com/mop/document/)
- [SDK 部署指南](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html)
@ -136,3 +135,8 @@ MopSDK.openApplet({appId: 'xxxx'});
## Forkers
[![Forkers repo roster for @finogeeks/finclip-react-native-demo](https://reporoster.com/forks/finogeeks/finclip-react-native-demo)](https://github.com/finogeeks/finclip-react-native-demo/network/members)
## 🌏 多语言文档
- [简体中文](./README.md)
- [English](./readme_en.md)
- [Português](./readme_pt.md)

BIN
docs/phizlogo.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

137
readme_en.md 100644
View File

@ -0,0 +1,137 @@
<p align="center">
<a href="https://www.finclip.com?from=github">
<img width="auto" src="./docs//phizlogo.png">
</a>
</p>
<p align="center">
<strong>PhizClip ReactNative 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&nbsp;Mini&nbsp;Programs-6,000%2B-blue"></a>
<a href="#"><img src="https://img.shields.io/badge/Apps&nbsp;with&nbsp;FinClip-75%2b-yellow"></a>
<a href="#"><img src="https://img.shields.io/badge/Covered&nbsp;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 !**
## 🤩 Effect preview
**This project is a DEMO demonstration of integrating and running the PhizClip applet on the basis of the ReactNative project. You can test according to the process below to verify the actual effect of the PhizClip applet in the ReactNative environment.**
Lets take a look at the running effect first~
<p align="center">
<a href="#">
<img width="auto" src="./docs/mop-react-native-demo.gif">
</a>
</p>
## ⚙️ Steps
## 1. Introduce plug-ins
Introduce mini program engine plug-in.
Introduce the mini program ReactNative plug-in into the package.json file
```objectivec
"react-native-mopsdk": "^1.0.3"
```
Install plugin
```shell
$ npm install react-native-mopsdk --save
$ react-native link react-native-mopsdk
```
## 2. Initialize engine
```objectivec
import MopSDK from 'react-native-mopsdk';
// 1. introduce NativeModules, NativeEventEmitter
import { NativeModules, NativeEventEmitter } from 'react-native';
// 2. mop initialization
const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
MopSDK.initialize({
appkey:
'Ev7QHvml1UcW98Y1GaLfRz34ReffbDESaTXbCoFyKhEm0a3gam0elOOOdZ6Twpa3HkBzlvOwJ2cyhOrMVWuuGw==',
secret: '16f2d2700453ae51',
apiServer: 'https://api.phizclip.com',
apiPrefix: '/api/v1/mop/',
nativeEventEmitter: eventEmitter,
finMopSDK: NativeModules.FINMopSDK,
}).then(res => {
console.log('Initialization successful')
}).catch(err => {
console.log('Initialization failed')
})
```
## 3. Open the applet
```objectivec
MopSDK.openApplet({appId: 'xxxx'});
```
- **SDK KEY** and **SDK SECRET** can be obtained from [PhizClip](https://finclip.com/#/home), click [here](https://finclip.com/#/register ) Register an account;
- After entering the platform, add your own package name on the "Application Management" page and click "Copy" to get the key\secret\apisever field;
- **apiServer** and **apiPrefix** are fixed fields, please refer to this DEMO directly;
- **Mini Program ID** is the Mini Program APP ID listed in the management background. It needs to be created in "Mini Program Management" and associated in "Application Management";
> The Mini Program ID is different from the WeChat Mini Program ID! (This refers specifically to the ID of the PhizClip platform)
## 📋 Interface documentation
[Click here](https://www.finclip.com/mop/document/runtime-sdk/reactNative/rn-integrate.html) Check out the React Native quick integration documentation
## 🔗 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
[![Stargazers repo roster for @finogeeks/finclip-react-native-demo](https://reporoster.com/stars/finogeeks/finclip-react-native-demo)](https://github.com/finogeeks/finclip-react-native-demo/stargazers)
## Forkers
[![Forkers repo roster for @finogeeks/finclip-react-native-demo](https://reporoster.com/forks/finogeeks/finclip-react-native-demo)](https://github.com/finogeeks/finclip-react-native-demo/network/members)
## 🌏 Languages
- [简体中文](./README.md)
- [English](./readme_en.md)
- [Português](./readme_pt.md)