简介: 弱网拉包无障碍,深度提升用户体验

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

什么是预置小程序

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

  • 提升用户体验
    通过预置包的方式把页面内静态资源嵌入到应用中并随应用一起发布,可以使用户第一次开启应用时即无需依赖网络环境下载资源,可以直接开始使用。
  • 实现动态更新
    在推出新版本或紧急发布的时候,可以在小程序 IDE 中进行迭代开发,通过 mPaaS 控制台发布,客户端中集成的小程序 SDK 会自动将小程序更新到最新的版本。这种发布无需通过应用商店审核,可以让用户及早接收到更新。

预置小程序的实现原理

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

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

小程序预置包的结构

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

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

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

小程序预置包的使用过程

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

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

前提条件

  • 已接入小程序组件。更多关于小程序组件的接入信息,请参见 快速开始使用小程序。
  • 已接入 H5 容器 组件。更多关于 H5 容器的接入信息,请参见 快速开始使用 H5 容器。

操作步骤-Android

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

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

在工程中添加预置代码,以在应用启动时调用预置代码安装应用。预置代码示例如下:

new Thread(new Runnable(){
    @Override
    public void run(){
        MPNebula.loadofflineNebula(jsonFileName: "h5_json.json",
                                  new MPNebulaOfflineInfo(offLineFileName:"2020121620201216_1.0.1.0.amr",
                                                         addId:"2020121620201216",
                                                         version:"1.0.1.0"));
    }
}).start();

说明:

  • 此方法为阻塞调用,请不要在主线程上调用内置预置包方法。
  • 此方法仅能调用一次。若多次调用,仅第一次调用有效。所以需要一次性传入所有需预置预置包信息。
  • 如果内置多个 AMR 包,需要要确保文件已存在;如不存在,会造成其他内置预置包失败。
  1. 启动小程序。启动小程序的示例代码如下。
/**
* 启动小程序
*
* @param appId 小程序id
*/
public static void startApp(String appId);
  1. 更新小程序
    默认情况下,每次打开应用,小程序 SDK 都会尝试检查是否有可更新的版本。出于服务端压力考虑,该检查有时间间隔限制,默认为 30 分钟。如果想立即检查最新可用版本,调用下方的代码来请求更新。一般情况下,可以在应用启动或者用户登录后调用。
MPNebula.updateAllApp(new MpaasNebulaUpdateCallback(){
@Override
public void onResult(final boolean success, final boolean isLimit) {
super.onResult(success, isLimit);
runOnUiThread(new Runnable() {
@Override
public void run() {
AUToast.makeToast(NebulaAppActivity.this,
success ? R.string.update_success : R.string.update_failure, 2000).show();
}
});
}
});

结语

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

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

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

作者:查克拉空

原文链接

本文为阿里云原创内容,未经允许不得转载

技术干货 | mPaaS 小程序高玩带你起飞:客户端预置小程序无视网络质量的更多相关文章

  1. 神探Python程序员,带你千里捉小三!(附详情代码)

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 王翔 清风Python PS:如有需要Python学习资料的小伙伴 ...

  2. 技术干货 | 轻松两步完成向 mPaaS 小程序传递启动参数

    前言 在部分场景下,需要向小程序的默认接收页(pages/index/index)传递参数. 本文将以传递 name 和 pwd 参数为例,分别介绍此场景在 Android 小程序和 iOS 小程序中 ...

  3. 【纯·技术干货】更 App 化的小程序开发

    2018 年 10 月13 日,由又拍云和知晓云联合主办的 Open Talk 丨2018 小程序开发者沙龙系列活动广州站拉开帷幕,糗事百科前端负责人宋航在沙龙上做了<更App化的小程序开发&g ...

  4. 分享iOS开发常用(三方类库,工具,高仿APP,实用网站,技术干货)

    一 . JSONModel  (三方类库会有更新,建议大家在线下载) http://pan.baidu.com/s/1i5ybP1z 二.AFNetworkiong http://pan.baidu. ...

  5. 微信小程序如何玩转分销

    截止目前,微信月活跃用户已经高达8.89亿,微信这个庞大的互联网巨头下一个目标是什么? 打造属于自己的“AppStore”.小程序正是完成这个微信生态体系的一块完美拼板, 张小龙预言:未来2年内,小程 ...

  6. 微信小程序支付,带java源码

    先说下这个的背景吧... 本人是做java后端的,自认为还有很大的发展空间(嘻嘻,你懂的),看过一段时间的小程序可是没有支付成功...最近公司要做小程序项目,老大让我看下小程序,折腾了好几天,参照着h ...

  7. 结对编程——带UI的小初高数学学习软件

    一.简介 本次项目要求: 1.所有功能通过图形化界面操作,可以是桌面应用,可以是网站(编程语言和技术不限): 2.用户注册功能.用户提供手机号码,点击注册将收到一个注册码,用户可使用该注册码完成注册: ...

  8. 带UI的小初高数学学习软件—艰难地用C++(QT库)实现的过程

    从互相了解对方的代码思路然后确定用C++编写,到用win32写界面时变得摇摆不定的考虑着要不要改变语言,再到用QT写完界面后发现短信接口一般都不提供C++,最后到QT打包出来的可执行文件在别的设备上无 ...

  9. 如何玩转小程序+公众号?手把手教你JeeWx小程序CMS与公众号关联

    随着微信小程序新功能.新入口的不断更新,小程序的商业价值逐步增强,特别是小程序与公众号的深度融合,已经让小程序成为各行业新的营销渠道.Jeewx平台专注小程序的开发,逐步完善小程序生态圈,通过简单操作 ...

  10. 【Bugly技术干货】那些年我们用过的显示性能指标

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言: 注:Google 在自己文 ...

随机推荐

  1. 【开源库推荐】#1 SpiderMan 可快速查看Android闪退崩溃日志

    原文:https://stars-one.site/2020/12/22/android-log-spiderman 开发Android的时候想必大家都遭受过这种经历: 用户手机上App闪退了,但是我 ...

  2. day14--Java常用类之字符串相关类02

    Java常用类 2.字符串相关类 String.StringBuilder.StringBuffer类是三个字符串相关类. String类代表不可变字符序列,StringBuilder类和String ...

  3. Spring Boot学习日记14

    Thymeleaf 语法学习 简单表达式: 变量表达式:${...} 选择变量表达式:*{...} 消息表达式:#{...} 链接网址表达式:@{...} 片段表达式:~{...} 文字 文本文本:, ...

  4. Android 开发Day7

    <project version="4"> <component name="ExternalStorageConfigurationManager&q ...

  5. 记录--vue3中的ref,toRef,toRefs

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个 ...

  6. HTML/ CSS 入门

    前言 我们在之前的学习中,对于网络有了一定的了解.现在我们来学习一些基础的 HTML/ CSS 知识.希望阅读完这篇文章能达到编写简单页面的程度. 目录: HTML/ CSS 的发明: HTML 基础 ...

  7. UE4 c++重构简单死亡之眼的效果

    虚幻社区中有蓝图教学视频 使用C++重构,主要用到UGameplayStatics类中的SetGlobalTimerDilation方法,以及角色的相机管理器的调用,之后通过StartCameraFa ...

  8. Web、Android等程序开发中src引入外部文件和资源的方法总结

    方法一:使用相对于当前文件(源文件)的相对路径 使用 ../ 对于这个例子来说 ../ 把路径带到了项目根目录的下一级目录 1 <script src="../static/js/wo ...

  9. SQL Server表分区-水平分区3

    目录 一.常用分区步骤 1.创建文件组 2.创建数据文件到文件组里面 3.使用图形界面向导创建分区表(不推荐) 3.使用T-SQL构建分区函数与分区方案(推荐) [3.1]建表时构造 [3.2]已有表 ...

  10. 新零售SaaS架构:客户管理系统架构设计(万字图文总结)

    什么是客户管理系统? 客户管理系统,也称为CRM(Customer Relationship Management),主要目标是建立.发展和维护好客户关系. CRM系统围绕客户全生命周期的管理,吸引和 ...