技术干货 | mPaaS 小程序高玩带你起飞:客户端预置小程序无视网络质量

本文涉及的产品
mPaaS订阅基础套餐,标准版 3个月
简介: 弱网拉包无障碍,深度提升用户体验

封面图0226.png

mPaaS小程序起飞秘笈

客户端预置小程序,免疫弱网伤害

提香童旺夺牙?

传统的小程序技术容易受到网络环境影响,当网络质量不佳时可能导致拉取不到小程序包的情况。通过预置小程序,即可规避该问题。本文介绍了预置小程序的原理和预置小程序的实现过程。



什么是预置小程序

预置小程序是指将小程序的渲染、逻辑、配置等静态资源打包在一个压缩包内,客户端预先下载小程序包到本地、直接从本地加载资源的过程。预置小程序可以最大程度地摆脱网络环境对 mPaaS 小程序页面的影响。使用预置包能够为客户端带来以下优势:


  • 提升用户体验
    通过预置包的方式把页面内静态资源嵌入到应用中并随应用一起发布,可以使用户第一次开启应用时即无需依赖网络环境下载资源,可以直接开始使用。


  • 实现动态更新
    在推出新版本或紧急发布的时候,可以在小程序 IDE 中进行迭代开发,通过 mPaaS 控制台发布,客户端中集成的小程序 SDK 会自动将小程序更新到最新的版本。这种发布无需通过应用商店审核,可以让用户及早接收到更新。


预置小程序的实现原理

本文从以下方面介绍了预置小程序的实现原理:

  • 小程序预置包的结构
  • 小程序预置包的使用过程


小程预置包的结构

小程序预置包是一个 .amr 格式的压缩文件,将后缀 amr 改成 zip 解压缩后,可以看到其中包含的 HTML 资源和 JavaScript 代码等。待小程序容器加载后,这些资源和代码能在 UC 内核渲染。


以 Android 系统为例,下图显示了一般资源包的目录结构:

  • 一级目录:一般为资源包的 ID,如 2020121620201216_1.0.1.0.zip。
  • 二级目录及往后即为业务自定义的资源文件。并设定当前预置包默认打开的主入口文件,如 /index.html

1.png


小程序预置包的使用过程

使用小程序预置包的过程可以分为以下三个步骤:

  1. 请求包信息
    从服务端请求小程序包,并将小程序包信息存储到本地数据库的过程。包信息包含了小程序包的下载地址、小程序包版本号等。
  2. 下载小程序包
    小程序包从服务端下载到手机。
  3. 安装小程序
    下载目录,拷贝到手机安装目录。



前提条件



操作步骤-Android

  1. 预置小程序包。
  1. 在 mPaaS 控制台发布小程序包并下载 AMR 文件和配置文件。image.png

    配置台理

    小程序汉试包管理

    开放平合小程完兰理

    小程序正式包管理

    新出

    小程序包列

    活机

    轴入名称哦ID

    平台

    小阳不他坛本

    3个天点

    纤台

    下实电于女件

    钊发布

    查石习

    1.0.20

    正比发布中

    转信豆

    test

    全于台

    10.10

    下卖也三文件

    正发有中

    自发布

    当石信息

    手刻标

    F民AMR文件

    预兰小程序

  2. 将下载到的 AMR 文件和配置文件放置在 mPaaS 项目的 assets 目录下。
    image.png

    androidTest

    main

    assets

    config

    ppcustomconfigjson

    2020121620201216.1.0.1.0.am

    ?

    商h

    h5jsonjson

    java

    comexample.threebluepoint

    H5ReceivedSsErrorHandlerlmpl

    MainActivity

    Myapp

    res

    AndroidManifestxml

    test

  3. 在工程中添加预置代码,以在应用启动时调用预置代码安装应用。预置代码示例如下:
newThread(newRunnable(){
@Overridepublicvoidrun(){
MPNebula.loadofflineNebula(jsonFileName: "h5_json.json",
newMPNebulaOfflineInfo(offLineFileName:"2020121620201216_1.0.1.0.amr",
addId:"2020121620201216",
version:"1.0.1.0"));
    }
}).start();

说明

  • 此方法为阻塞调用,请不要在主线程上调用内置预置包方法。
  • 此方法仅能调用一次。若多次调用,仅第一次调用有效。所以需要一次性传入所有需预置预置包信息。
  • 如果内置多个 AMR 包,需要要确保文件已存在;如不存在,会造成其他内置预置包失败。


  1. 启动小程序。启动小程序的示例代码如下。
/*** 启动小程序** @param appId 小程序id*/publicstaticvoidstartApp(StringappId);


  1. 更新小程序
    默认情况下,每次打开应用,小程序 SDK 都会尝试检查是否有可更新的版本。出于服务端压力考虑,该检查有时间间隔限制,默认为 30 分钟。如果想立即检查最新可用版本,调用下方的代码来请求更新。一般情况下,可以在应用启动或者用户登录后调用。
MPNebula.updateAllApp(newMpaasNebulaUpdateCallback(){
@OverridepublicvoidonResult(finalbooleansuccess, finalbooleanisLimit) {
super.onResult(success, isLimit);
runOnUiThread(newRunnable() {
@Overridepublicvoidrun() {
AUToast.makeToast(NebulaAppActivity.this,
success?R.string.update_success : R.string.update_failure, 2000).show();
            }
        });
    }
});


  1. 校验安全签名
    小程序具有签名校验机制,防止恶意程序篡改下载到设备的小程序包。通过调用 MPNebula 接口设置验签参数即可开启此机制。如果您使用的基线是 10.1.60 或以上版本,需要额外开启容器配置,详情参见 H5 容器配置

说明

  • 请在第一次打开离线包前调用 MPNebula 接口,否则将会导致公钥初始化失败。关于公钥与私钥,参见 配置离线包 > 密钥管理
  • 无论客户端是否开启签名校验,在被判断为 root 的手机上都会强制进行签名校验。
/*** @param publicKey 验签公钥*/publicstaticvoidenableAppVerification(finalStringpublicKey)


  1. 删除本地小程序
    Nebula 提供了删除本地应用信息的接口。当本地应用信息被删除后,再次打开应用时会重新请求服务端下载、更新本地小程序的信息。
publicclassMPNebula {
// appId 为离线包或小程序的应用 IDpublicstaticbooleandeleteAppInfo(StringappId);
}

说明:此 API 在 10.1.68 系列和 10.1.60 系列支持的最低基线版本分别为 10.1.68.8 和 10.1.60.14 。


操作步骤-iOS

  1. 预置小程序包。

a. 在 mPaaS 控制台发布小程序包并下载 AMR 文件和配置文件。

image.png

小程序发布

配芭管理

小程序测试包管理

开放平台小程序管理

小程序正式包管理

小程序包列表

新建

添加

输入名称或ID

探作

小程序包版本

平台

状态

test

下载AMR文件

创硅发布

1.0.1.0

正式发布中

查若信息

下载配文件

查看图标

全平台


b. 新建一个独立的 bundle,如 DemoCustomPresetApps.bundle,将从发布平台下载的 .amr 离线包和 h5_json.json 文件添加到此 bundle 中。

重要:目前发布平台仅支持下载单个离线包的 h5_json.json 配置文件。当预置多个小程序包时,需要将不同 h5_json.json中的 data 数据手动合并到一个配置文件中。


c. 在初始化小程序时,在initNebulaWithCustomPresetApplistPath 接口,设置预置小程序离线包路径为上一步中创建的 bundle。

 - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
     // 初始化 rpc
     [MPRpcInterface initRpc];
     // 初始化容器
     //    [MPNebulaAdapterInterface initNebula];
     // 自定义jsapi路径和预置小程序包信息
     NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle/h5_json.json"] ofType:nil];
     NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle"] ofType:nil];
     NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPlugins.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
     [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:pluginsJsapisPath];
 }


  1. 启动小程序

与非预置小程序类似,进入对应的页面时,调用 Nebula 容器提供的接口方法加载小程序。

[MPNebulaAdapterInterfacestartTinyAppWithId:@"2020121720201217"params:nil];


  1. 更新小程序。

默认情况下,每次打开应用,小程序 SDK 都会尝试检查是否有可更新的版本。出于减少服务端压力的考虑,该检查有时间间隔限制,默认为 30 分钟。如果想立即检查最新可用版本,可调用下方的代码来请求更新。一般情况下,可以在应用启动或者用户登录后调用。

-(void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
    //全量更新本地小程序包信息
    [[MPNebulaAdapterInterface shareInstance] requestAllNebulaApps:^(NSDictionary *data, NSError *error) {
        NSLog(@"[mpaas] nebula rpc data :%@", data);
    }];
}


  1. 校验安全签名。

小程序具有签名校验机制,防止恶意程序篡改下载到设备的小程序包。通过调用 小程序 接口设置验签参数即可开启此机制。

说明

  • 请在第一次打开小程序包前调用 MPNebulaAdapterInterface 接口,否则将会导致公钥初始化失败。关于公钥与私钥,请参见 配置小程序包 > 密钥管理
  • 开启验签
    [MPNebulaAdapterInterface shareInstance].nebulaNeedVerify = YES;


  1. 删除本地小程序。

Nebula 提供了删除本地应用信息的接口。当本地应用信息被删除后,再次打开应用时会重新请求服务端下载、更新本地小程序的信息。

/**
 *  @brief 删除本地应用信息(包括包信息、amr以及安装目录)
 *
 *  @date 2019-02-28
 *
 *  @return
 */
-(void)clearAllAppInfo:(NSString *)appId;
//使用方法
[[NBServiceGet() appCenter] clearAllAppInfo:@"2020199503242811"];



结语

mPaaS 小程序源自于支付宝小程序框架,亿级线上业务体量的锤炼,安全性媲美支付宝原生能力。不仅面向自有 App 投放小程序,更可快速构建打包,覆盖支付宝、淘宝、钉钉等应用。


通过使用上述预置小程序的方案,预置小程序不仅可以最大程度地摆脱网络环境对 mPaaS 小程序页面的影响,还能深度体验用户体验、实现动态更新。


mPaaS 小程序(Alpha)限时免费申领中,全新内核完全对齐支付宝标准 API,为您提供更精简的安卓端 SDK。

6708DEE8-50AB-47B4-AA11-7E030C7E32E0.png


撰文:刘启洋、滕宏才


- END -


动态-logo.gif


底部banner.png

相关文章
|
5月前
|
小程序 前端开发
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
校园跑腿小程序系统是一款创新解决方案,旨在满足校园配送需求并拓展校友网络。跑腿员可接单配送,用户能实时跟踪订单并评价服务。系统包含用户、客服、物流、跑腿员及订单模块,功能完善。此外,小程序增设信息咨询发布、校园社区建设和活动组织等功能,助力校友互动、经验分享及感情联络,构建紧密的校友网络。
146 1
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
|
4月前
|
JSON 中间件 Go
Go 网络编程:HTTP服务与客户端开发
Go 语言的 `net/http` 包功能强大,可快速构建高并发 HTTP 服务。本文从创建简单 HTTP 服务入手,逐步讲解请求与响应对象、URL 参数处理、自定义路由、JSON 接口、静态文件服务、中间件编写及 HTTPS 配置等内容。通过示例代码展示如何使用 `http.HandleFunc`、`http.ServeMux`、`http.Client` 等工具实现常见功能,帮助开发者掌握构建高效 Web 应用的核心技能。
250 61
|
4月前
|
运维 网络协议 Go
Go网络编程:基于TCP的网络服务端与客户端
本文介绍了使用 Go 语言的 `net` 包开发 TCP 网络服务的基础与进阶内容。首先简述了 TCP 协议的基本概念和通信流程,接着详细讲解了服务端与客户端的开发步骤,并提供了简单回显服务的示例代码。同时,文章探讨了服务端并发处理连接的方法,以及粘包/拆包、异常检测、超时控制等进阶技巧。最后通过群聊服务端的实战案例巩固知识点,并总结了 TCP 在高可靠性场景中的优势及 Go 并发模型带来的便利性。
|
Ubuntu 网络协议 Unix
02理解网络IO:实现服务与客户端通信
网络IO指客户端与服务端通过网络进行数据收发的过程,常见于微信、QQ等应用。本文详解如何用C语言实现一个支持多客户端连接的TCP服务端,涉及socket编程、线程处理及通信流程,并分析“一消息一线程”模式的优缺点。
190 0
|
6月前
|
小程序 UED
拓展校友网络的创新解决方案:校园论坛圈子小程序+跑腿+二手市场系统
这是一款基于小程序的校园跑腿服务平台,支持多种注册登录方式、下单支付、跑腿接单配送、订单跟踪评价及物流查询功能,并配备客服模块提升用户体验。系统包含用户、客服、物流、跑腿员和订单五大核心模块,功能完善。此外,平台还拓展了校友网络功能,如信息咨询发布、校园社区建设和活动组织等,旨在增强校友互动与联系,形成紧密的校友生态。
166 4
|
8月前
|
监控 Linux PHP
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
200 20
|
8月前
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
8月前
|
监控 关系型数据库 MySQL
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
173 0
|
12月前
|
存储 网络协议 Java
【网络】UDP回显服务器和客户端的构造,以及连接流程
【网络】UDP回显服务器和客户端的构造,以及连接流程
236 3
|
12月前
|
网络协议 Java API
【网络】TCP回显服务器和客户端的构造,以及相关bug解决方法
【网络】TCP回显服务器和客户端的构造,以及相关bug解决方法
180 2

相关产品

  • 移动开发平台 mPaaS