FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 小程序转 App 功能介绍

# 功能介绍

小程序转 App 功能帮助您,将已有小程序代码导出为 iOS 与 Android 中可用的工程文件,使用本功能后,只需要通过小程序完成相关产品界面设计与功能实现,所导出的 iOS 与 Android 应用则仅作为小程序所存在的“壳应用”便于用户安装。

并且用户可以通过 ‘App 配置’ 功能去给导出 App 进行一些配置: App 图标配置, 启动闪屏配置, URL Scheme 配置, 权限配置。

# 使用 FIDE 生成 App

# App 配置

  1. 打开 App 配置窗口 3.png

  1. 进行 App 配置

# App 图标配置

App 图标配置分为两种模式: 简单模式和定制模式。

  • 简单模式下,用户只需配置一张图标图片
  • 定制模式下用户需要配置多张图片:
    • iOS 配置 iphone , ipad 两个尺寸
    • android 则需要配置 48 * 48, 72 * 72, 96 * 96, 144 * 144, 192* 192 尺寸图标

# 启动闪屏配置

该配置系启动 App 的闪屏配置,上传相应尺寸的图片即可 7.png

# URL Scheme 配置

App URL Scheme 配置, 目前 iOS, Android 均只支持一条 URL Scheme 配置

# 权限配置

App 权限配置,目前 iOS 支持的配置权限有:

  • 读取相册
  • 使用麦克风
  • 获取位置
  • 使用相机

Android 支持的配置选项有:

  • 位置相关权限:
    • ACCESS_COARSE_LOCATION
    • ACCESS_FINE_LOCATION
  • 相机相关权限:
    • CAMERA
  • I/O 相关权限:
    • READ_EXTERNAL_STORAGE
    • WRITE_EXTERNAL_STORAGE
  • 麦克风相关权限:
    • RECORD_AUDIO

# 生成 App

  1. 打开生成 App 窗口 1.jpg

  2. 选择小程序 AppId 2.png

注意:要选择已上架的小程序

  1. 选择关联应用跟 BundleId 4.png

  2. 选择 App 的生成目录 5.png

  3. 成功生成 App! 6.png

# iOS 工程配置

# 1.1 准备工程

  • 安装Xcode12.1及以上版本
  • 安装FinClip IDE最新版本 (opens new window)
  • 如果要用真机运行调试,需要准备一个Apple开发者账号,如暂时没有可用模拟器进行调试

# 1.2 配置工程

打开IDE导出的文件夹-ios-工程名-工程名.xcworkspace,双击打开

WechatIMG1686

  1. 配置App的工程名,版本号,支持的Apple系统最低版本,支持的设备类型。 WechatIMG1673

  2. 配置App的icon和闪屏页的图片(如果在IDE导出App的时候配置了可忽略,如果不配置的话,icon会是系统默认的白色图标,无闪屏页)。

    WechatIMG1674

    WechatIMG1675

    WechatIMG1676

    WechatIMG1677

  3. 配置App的权限,根据所使用的功能,可自行配置要申请的权限,Api对应所使用的权限可参考我们的文档说明 (opens new window)

# 1.3 运行工程

打开IDE导出的文件夹-ios-工程名-工程名.xcworkspace,双击打开后,可选择用模拟运行或者真机运行。

模拟器运行直接选择一个模拟器后点击command+R运行就可以了。

WechatIMG1682

真机运行需要配置证书后点击command+R运行就可以。

WechatIMG1685

# 1.4 打包上传

  • 在上述应用bundle id,Version,Build,AppIcon,闪屏页,权限,证书等都配置后就可以打包上传了,在Xcode顶部点击Product-Archive,等到导出ipa包或者使用Xcode直接把ipa包上传到App Store Connect。如果导出了ipa包需要使用Transporter工具上传。 iOS1 iOS2 iOS3

# Android 工程配置

# 2.1 准备工程

# 2.2 配置工程

使用Android Studio打开导出的Android工程:

Android-1

选择打开的路径为:finclip_demo\android\finclip_demo

Android-2

第一次打开工程可能耗时较长,需要等待Android Studio自动下载各Android库、依赖库。

# 2.2.1 app/build.gradle

Android-3

Android-4

# 2.2.2 app\src\main\AndroidManifest.xml

可以查看到app声明所需要的权限,可以根据需要自行删减或增加。

Android-5

# 2.2.3 闪屏页

闪屏页的配置图片,可以根据需要使用对应分辨率的图片进行替换。

注意,若要替换,需将所有分辨率对应的图片都进行替换。

Android-6

# 2.2.4 应用图标

应用图标文件,根据需要使用对应分辨率进行替换。

注意,若要替换,需将所有分辨率对应的图片都进行替换。

Android-7

# 2.3 运行工程

# 2.3.1 打开手机开发者模式

不同品牌手机打开的方式可能不同,大部分为在设备详情界面连续点击5次版本号。

然后进到开发者选项界面,打开USB调试。(若有USB安装,也要一并打开)

Android-8

使用usb将手机连接到电脑,手机上会弹出调试授权窗口,点击允许。

Android-9

# 2.3.2 运行应用

最后回到Android Studio,点击右上角的运行图标即可直接在手机上运行debug版本的应用。

Android-10

# 2.4 构建正式应用

# 2.4.1 Build -> Generate Signed Bundle/APK

Android-11

# 2.4.2 选择构建APK

Android-12

# 2.4.3 生成证书

Android-13

初次构建正式版应用时需要生成证书,点击Create new:

Android-14

注意,生成后的证书文件请务必保管好,并牢记两组密码。

点击OK后证书就已经生成,回到构建窗口,所需信息也已自动填上。

Android-15

今后需要再次构建正式应用时,只需要使用choose existing选择之前生成的证书文件,并填上密码、选择alias即可。

点击Next,选择生成的apk文件路径,选择release版本,最后点Finish,开始构建apk。

Android-16

待Android Studio提示构建成功之后,可以在上一步指定的位置找到apk文件。

Android-17

注意,点击Android Studio直接运行的debug应用使用的是默认的自带证书文件,与release应用不同,因此无法覆盖安装,需手动卸载debug应用后再安装release应用。

© 2022 FinClip with ❤

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

400-066-00210755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单

填写 FinClip 问卷抽缤纷夏日盲盒
Hi,这里是我们为 FinClip 用户准备的一封调研问卷,期待您的参与,您的反馈和建议,将指引 FinClip 未来前进的方向。