FinClip ReactNative DEMO

本项目提供在 ReactNative 环境中运行小程序的 DEMO 样例

👉 https://www.finclip.com/ 👈

官方网站 | 示例小程序 | 开发文档 | 部署指南 | SDK 集成指南 | API 列表 | 组件列表 | 隐私承诺

---

🤔 FinClip 是什么?

有没有想过，开发好的微信小程序能放在自己的 APP 里直接运行，只需要开发一次小程序，就能在不同的应用中打开它，是不是很不可思议？

有没有试过，在自己的 APP 中引入一个 SDK ，应用中不仅可以打开小程序，还能自定义小程序接口，修改小程序样式，是不是觉得更不可思议？

这就是 FinClip ，就是有这么多不可思议！

🤩 效果预览

本项目是 FinClip 小程序在 ReactNative 工程基础上下集成及运行小程序 DEMO 演示，您可以按照下方流程测试，验证 FinClip 小程序在 ReactNative 环境下的实际效果。

先看一下运行效果~

⚙️ 操作步骤

第一步 引入小程序引擎插件

在 package.json 文件中引入小程序 ReactNative 插件

"react-native-mopsdk": "^1.0.1"

第二步 初始化引擎

在 main.dart 文件中增加以下小程序引擎初始化方法。

在 Mop.instance.initialize 中，需要用到 SDK KEY 和 SECRET。

import MopSDK from 'react-native-mopsdk';
// 1. mop初始化
MopSDK.initialize({
    appkey: '22LyZEib0gLTQdU3MUauASlb4KFRNRajt4RmY6UDSucA',
    secret: '4a915e447bcbd439',
    apiServer: 'https://api.finclip.com',
    apiPrefix: '/api/v1/mop'
  }, (data) => {
    console.log('message;', data);
  });

第三步 打开小程序

MopSDK.openApplet('appid','','',(data)=>{});

• SDK KEY 和 SDK SECRET 可以从 FinClip 获取，点 这里 注册账号；
• 进入平台后，在「应用管理」页面添加你自己的包名后，点击「复制」即可获得 key\secret\apisever 字段；
• apiServer 和 apiPrefix 是固定字段，请直接参考本 DEMO ；
• 小程序 ID 是管理后台上架的小程序 APP ID，需要在「小程序管理」中创建并在「应用管理」中关联；

小程序 ID 与 微信小程序ID 不一样哦！（这里是特指 FinClip 平台的 ID ）

📋 接口文档

点击这里 查看 React Native 快速集成文档

🔗 常用链接

以下内容是您在 FinClip 进行开发与体验时，常见的问题与指引信息

• FinClip 官网
• 示例小程序
• 文档中心
• SDK 部署指南
• 小程序代码结构
• iOS 集成指引
• Android 集成指引
• Flutter 集成指引

☎️ 联系我们

微信扫描下面二维码，关注官方公众号 「凡泰极客」，获取更多精彩内容。

微信扫描下面二维码，邀请进官方微信交流群（加好友备注：finclip 咨询），获取更多精彩内容。

Stargazers

Forkers