基于Small及Weex的定制化APP方案

最新推荐文章于 2024-03-25 22:57:18 发布
最新推荐文章于 2024-03-25 22:57:18 发布
阅读量1.9k 收藏 2
点赞数 2
分类专栏： 【 Android 】 【 Weex 】 文章标签： android 插件 ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/walid1992/article/details/61416635
版权

基于Small及Weex的定制化APP方案

前言

small是android与iOS平台比较出名的轻巧的跨平台插件化框架，也正是被这一点吸引，决定将small应用到集团内部的应用引擎模块化方案中，本篇博文主要讲述本人基于small在android平台实现的定制化APP方案（运营自由配置、自由组合、自动打包）~

框架解决问题

  1. 由于公司业务的发展，导致更多的超级app诞生于世，导致app 项目太大、耦合严重，且相关开发人员相互耦合，导致效率低下
  2. app 热修复问题在很多场景是急需的
  3. 对于开发效率方面，采用了weex模块进行快速迭代

在介绍框架之前首先熟悉一下small的原理~

原理介绍

small 插件化方案分为两个步骤

  1. gradle 打包插件机制
  2. 运行期加载机制

打包插件机制

官方说明

将多个app与lib工程编译成so文件

运行期加载机制

Dynamic load classes

官方说明

DexClassLoader不支持”.so”后缀，为了让应用启动时能自动复制插件包到应用存储目录，需要支持”.so”后缀。做法就是模拟 压缩包加载代码块，创建一个dex元素，再反射添加到宿主class loader里的dexPathList。

Dynamic load resources

官方说明

Dynamic register activities
activity 启动过程：

注： Android activities受Instrumentation监控

  1. 由Activity的startActivityForResult方法启动，通过instrumentation的execStartActivity方法激活生命周期。
  2. 在ActivityThread的performLaunchActivity方法中通过instrumentation的newActivity方法实例化。
small 实现方案：

1. 首先在宿主manifest中注册一个命名特殊的占坑activity

<!-- Stub Activities -->
<activity android:name=".A.0" android:launchMode="standard"/>

2. 封装一个instrumentation，替换掉宿主的

（1）、欺骗startActivityForResult(启动过程1)以获得生命周期
（2）、欺骗performLaunchActivity(启动过程2)来创建插件activity实例

ActivityThread thread = currentActivityThread();
Instrumentation base = thread.@mInstrumentation;
Instrumentation wrapper = new InstrumentationWrapper(base);
thread.@mInstrumentation = wrapper;

class InstrumentationWrapper extends Instrumentation {
    // 欺骗startActivityForResult获得生命周期
    public ActivityResult execStartActivity(..., Intent intent, ...) {
        fakeToStub(intent);
        base.execStartActivity(args);
    }

    // 欺骗performLaunchActivity创建实例
    @Override
    public Activity newActivity(ClassLoader cl, String className, Intent intent) {
        className = restoreToReal(intent, className);
        return base.newActivity(cl, className, intent);
    }
}

项目构建

按照官方的教程，初始化成功之后，项目结构如下：

框架获取

  1. git clone https://github.com/osmartian/odyssey.git
  2. cd odyssey
  3. npm install

项目结构

small-frame
├── app (宿主app)
│      ├── LaunchActivity  
│      │  
│      └── SmallApp
│
├── app.top (topbar框架APP)
│      │ 
│      └── MainActivity  
│              
├── app.bottom (bottombar框架app)
│      │
│      └── MainActivity  
│
├── app.home （首页模块app）
│      └── MainFragment
│
├── app.weex （weex模块app）
│      │ 
│      ├── MainActivity  
│      │
│      └── MainFragment
│         
├── app.detail （详情模块app）
│      ├── MainActivity
│      │   
│      └── SubActivity
│
├── lib.weex （weex lib 库）
│
├── lib.martian （公共工具库）
│           
└── lib.style （公共样式库）
       └── res
           ├── colors.xml
           ├── dimens.xml
           └── styles.xml

config驱动文件打包APK流程

打包配置说明

{
  // app基本信息配置
  baseInfo: {
    applicationId: 'com.syswin.toon.bottom',
    versionCode: 2,
    appIcon: 'bottom',
    appName: 'BOTTOM框架',
    versionName: '1.0.1'
  },
  // 框架末班配置
  frame: {
    // 框架模块uri
    uri: 'bottom',
    // 可选
    tags: []
  },
  // 配置small打包配置
  modules: {
    // small 版本
    version: '1.0.0',
    // 需要打包的app及lib
    bundles: [
      {
        uri: 'bottom',
        pkg: 'com.osmartian.small.app.bottom'
      },
      ... 
      {
        uri: 'lib.style',
        pkg: 'com.osmartian.small.lib.style'
      }
    ]
  }
}

APK生成过程

  1. 动态修改APP基本信息

采用动态修改gradle配置方式，修改AppID、appName、appIcon…

在项目根build.gradle中有如下配置，只需动态修改此配置即可：

ext {
    compileSdkVersion = 25
    buildToolsVersion = '25.0.2'
    applicationId = "com.syswin.toon.walid"
    appName = "Walid APK"
    appIcon = "top"
    minSdkVersion = 15
    targetSdkVersion = 25
    versionCode = 10
    versionName = "1.0.1"
}
  1. 设置框架frame模块

动态设置框架模块uri，用于宿主模块调起

见宿主app模块下com.osmartian.small中的config.java文件：

package com.osmartian.small;

/**
 * @Author : walid
 * @Data : 2017-03-14  22:36
 * @Describe : INDEX URL配置
 */
public class Config {
    public static final String INDEX_URI = "bottom?tags=%5B%7B%22name%22%3A%22%E9%A6%96%E9%A1%B5%22%2C%22uri%22%3A%22home%22%7D%2C%7B%22name%22%3A%22%E6%88%91%E7%9A%84%22%2C%22uri%22%3A%22weex%3Furl%3Dhttp%253A%252F%252F172.31.243.44%253A12580%252Fdist%252Fweex%252Fviews%252Fmine%252Fapp.js%22%7D%2C%7B%22name%22%3A%22%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99%22%2C%22uri%22%3A%22weex%3Furl%3Dhttp%253A%252F%252F172.31.243.44%253A12580%252Fdist%252Fweex%252Fviews%252Fuserinfo%252Fapp.js%22%7D%5D";
}
  1. 生成bundle.json small打包需要文件

动态生成bundle.json small打包文件，且copy到android、ios项目

(1)、生成bundle.json文件

const bundlePath = path.join(__dirname, '../../build/output', 'bundle.json')

// 框架模块安装
function packModules(modules) {
  console.log(modules)
  return new Promise((resolve, reject) => {
    fs.writeFile(bundlePath, JSON.stringify(modules), (err) => {
      err ? reject(err) : resolve()
    })
  })
}

(2)、copy 至 android 、 ios项目

// cp -vf build/output/bundle.json android/app/src/main/assets/bundle.json
npm run copy:bundle
  1. 执行small打包 -> so 文件

将需要打包的模块打包成so文件

npm run build:small
  1. 编译生成apk文件

执行npm指令进行apk生成

npm run dev:android 
// 或 
npm run build:android

small 模块跳转操作

1、 跳转h5

  Small.openUri("https://github.com/osmartian/small-frame", getContext());

2、 跳转app module 传值

  Small.openUri("detail?params=我是参数，从首页传送过来的~", getContext());

3、 跳转app module 二级界面

  Small.openUri("detail/sub", getContext());

项目打包APK示例

打包topbar框架APK

  • config 文件配置
{
  baseInfo: {
    applicationId: 'com.syswin.toon.top',
    versionCode: 2,
    appIcon: 'top',
    appName: 'TOP框架',
    versionName: '1.0.1'
  },
  frame: {
    uri: 'top',
    tags: [
      {
        name: '首页',
        uri: 'home'
      },
      {
        name: '发起筹款',
        uri: `weex?url=${encodeURIComponent(`http://${ipAddress}:12580/dist/weex/views/launch/app.js`)}`
      },
      {
        name: '我的',
        uri: `weex?url=${encodeURIComponent(`http://${ipAddress}:12580/dist/weex/views/mine/app.js`)}`
      }
    ]
  },
  modules: {
    version: '1.0.0',
    bundles: [
      {
        uri: 'top',
        pkg: 'com.osmartian.small.app.top'
      },
      {
        uri: 'home',
        pkg: 'com.osmartian.small.app.home'
      },
      {
        uri: 'weex',
        pkg: 'com.osmartian.small.app.weex'
      },
      {
        uri: 'lib.weex',
        pkg: 'com.osmartian.small.lib.weex'
      },
      {
        uri: 'lib.martian',
        pkg: 'com.osmartian.small.lib.martian'
      },
      {
        uri: 'lib.style',
        pkg: 'com.osmartian.small.lib.style'
      }
    ]
  }
}

示例图片

top-home.jpg

top-launch.jpg

top-mine.jpg

打包bottombar框架APK

  • config 文件配置
{
  baseInfo: {
    applicationId: 'com.syswin.toon.bottom',
    versionCode: 2,
    appIcon: 'bottom',
    appName: 'BOTTOM框架',
    versionName: '1.0.1'
  },
  frame: {
    uri: 'bottom',
    tags: [
      {
        name: 'Weex首页',
        uri: `weex?url=${encodeURIComponent(`http://${ipAddress}:12580/dist/weex/views/home/app.js`)}`
      },
      {
        name: '原生首页',
        uri: `home`
      },
      {
        name: '我的',
        uri: `weex?url=${encodeURIComponent(`http://${ipAddress}:12580/dist/weex/views/mine/app.js`)}`
      }
    ]
  },
  modules: {
    version: '1.0.0',
    bundles: [
      {
        uri: 'bottom',
        pkg: 'com.osmartian.small.app.bottom'
      },
      {
        uri: 'home',
        pkg: 'com.osmartian.small.app.home'
      },
      {
        uri: 'weex',
        pkg: 'com.osmartian.small.app.weex'
      },
      {
        uri: 'detail',
        pkg: 'com.osmartian.small.app.detail',
        rules: {
          sub: 'Sub'
        }
      },
      {
        uri: 'lib.weex',
        pkg: 'com.osmartian.small.lib.weex'
      },
      {
        uri: 'lib.martian',
        pkg: 'com.osmartian.small.lib.martian'
      },
      {
        uri: 'lib.style',
        pkg: 'com.osmartian.small.lib.style'
      }
    ]
  }
}

示例图片

bottom-weex-home.jpg

bottom-native-home.jpg

bottom-mine.jpg

结语

至此，基于small的定制化APP方案介绍完毕了，此方案还是雏形阶段，也希望业界朋友多多点评、多多吐槽，也希望大家前去start及提一些各自的建议。

项目地址：https://github.com/osmartian/odyssey.git

王永迪
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Xilinx Zynq SoC的解决方案
01-20
在移动互联、智能终端的高速发展和普及下，网络热点和盲点急需灵活的方案来完善覆盖。 由于基站选址和工程施工难度越来越大，施工成本越来越高，基站设备的集成化、小型化、低功耗、 低成本、 可控性和智能化将是...
github入门教程（非常详细）从零基础入门到精通，看完这一篇就够了
Python_0011的博客
07-16 2万+
如果你是一枚Coder，但是你不知道Github，那么我觉的你就不是一个菜鸟级别的Coder，因为你压根不是真正Coder，你只是一个Code搬运工。说明你根本不善于突破自己！为什么这么说原因很简单，很多优秀的代码以及各种框架源码都存放于github当中！
【GitHub项目推荐--10个最佳开源推荐系统/算法/资源】【转载】
最新发布
j8267643的博客
03-25 1548
推荐系统的核心是推荐引擎，推荐引擎根据特定客户之前的购买历史过滤出他或她感兴趣或会购买的产品。关于客户的可用数据越多，建议就越准确。但如果客户是新客户，这种方法将失败，因为我们没有该客户以前的数据。因此，为了解决这个问题，就需改变策略，通常推荐最受欢迎的产品给客户不一定准确，因为对所有新客户推荐内容都是一样的。因此，一些APP会询问新客户的兴趣，以便他们可以更准确地推荐。针对不同的客户或者产品，推荐引擎的过滤方式可以包括：基于内容的过滤、协同过滤、混合过滤等。（1）基于内容的过滤。
【GitHub】保姆级使用教程
m0_46459413的博客
11-21 2万+
输入网址，无脑下载网易加速器；下载安装完毕后，创建账号进行登录登录后，在右上角搜索框中搜索“学术资源”，并点击；稍等一会儿就会跳转出来“学术资源”的一个页面；此时，我们就可以新打开一个标签页登录GitHub，自由快速访问啦！
GitHub入门指南：一步一步教你使用GitHub
weixin_72668830的博客
05-19 1万+
引言：GitHub是一个流行的代码托管平台，它提供了强大的版本控制和协作功能，对于开发者来说是一个不可或缺的工具。本文将一步一步地教你如何使用GitHub，从注册账号到代码同步，让你能够快速上手并充分利用这个平台。
Android插件化开发之small
11-16
使用的是small当前最新的1.3.0-beta3开发的。 注意在androidstudio3.0版本上开发可能会出现问题。 正常运行。
Small：插件化轻巧之道
03-01
Android插件化编程必看
APP实现插件化学习Demo
08-13
APP实现插件化学习Demo,组件化与插件化华山论剑 http://www.jianshu.com/p/642a759051ea
Small-OS智能卡主要回路和硬件及操作系统的初始化
11-14
当智能卡复位后，程序计数器被装人复位矢量的地址，于是处理器开始执行第1个程序代码。硬件立即被 测试以了解它是否处在...　当芯片硬件被测试并初始化后，则开始初始化操作系统。它的重要内容是设定T＝1协议的数据传输
GitHub入门教程
Sakuya__的博客
01-16 4523
一、注册GitHub账号 GitHub官网https://github.com/ 注册之后，登录注册的邮箱验证后注册完成。 二、下载Git 有Mac，Windows，Linux版本的。下载地址：https://git-scm.com/downloads 下载完后，打开安装，一直Next，然后Install。 三、创建GitHub仓库 1.使用我们刚才注册的账号...
GitHub新手用法详解【适合新手入门-建议收藏！！！】
热门推荐
m0_57787115的博客
04-22 3万+
GitHub新手用法详解【适合新手入门-建议收藏！！！】
GitHub快速上手--GitHub高效操作教程
qq_39724355的博客
07-07 4616
如果你正在看我的这篇文章，说明你已经对GitHub有了一些基础的了解，下面我们将详细叙述每一步的操作，以保证你能够快速上手GitHub，完成对代码的管理。
5分钟学会GitHub基本使用方法，保姆级教程
FMgxth的博客
12-08 2829
这里再总结一下 GitHub 的基本名称，都是上面提到的，光看字面意思不好理解，总结一下方便查询。Pull Request，你想参与别人的项目，或想改进别人的项目，改进后需要提交申请。Repository，翻译为仓库，也是你的项目。你可以理解成一个大的文件夹，或者笔记本。一个项目对应一个 Repository。IssueIssue ，追踪各种想法，增强功能，任务，bug，有点儿像评论留言功能。Star，就是给项目点赞。Fork，将 GitHub的某个特定仓库（所有文件）原封不动地复制到自己的账户下
详解GitHub
wuliyouMaozhi的博客
05-20 7333
GitHub 是一个用于版本控制和协作的代码托管平台。它允许您和其他人从任何地方共同处理项目。在本快速入门指南中，你将：创建和使用存储库启动和管理新分支对文件进行更改并将其作为提交推送到 GitHub打开并合并拉取请求GitHub是一个代码托管云服务网站，帮助开发者存储和管理其项目源代码，且能够追踪、记录并控制用户对其代码的修改。甚至你可以简单粗暴的把它当作一个网盘，用来存储任何东西。
2023全网最新最全 github 入门教程（非常详细）从零基础入门到精通，看完这一篇就够了！！！
logic1001的博客
11-20 4666
如果你是一枚Coder，但是你不知道Github，那么我觉的你就不是一个菜鸟级别的Coder，因为你压根不是真正Coder，你只是一个Code搬运工。说明你根本不善于突破自己！为什么这么说原因很简单，很多优秀的代码以及各种框架源码都存放于github当中！
GitHub入门介绍
weixin_44718395的博客
08-27 2699
主要介绍了怎样登录GitHub，认识github相关功能。
基于vue写一个微商城App的具体代码实现
05-29
很抱歉，由于篇幅限制，这里无法提供完整的代码实现。但我可以给您提供一个大致的代码框架，供您参考： ...以上是基于 Vue 框架写微商城 App 的大致代码框架，具体实现细节还需要根据具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值