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

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

什么是预置小程序

预置小程序是指将小程序的渲染、逻辑、配置等静态资源打包在一个压缩包内,客户端预先下载小程序包到本地、直接从本地加载资源的过程。预置小程序可以最大程度地摆脱网络环境对 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. 对TCP/IP协议的理解

    话说两台电脑要通讯就必须遵守共同的规则,就好比两个人要沟通就必须使用共同的语言一样.一个只懂英语的人,和一个只懂中文的人由于没有共同的语言(规则)就没办法沟通.两台电脑之间进行通讯所共同遵守的规则,就 ...

  2. springMVC+JDBC:分页示例

    文章来源:http://liuzidong.iteye.com/blog/1067492 一 环境:XP3+Oracle10g+MyEclipse6+(Tomcat)+JDK1.5 二 工程相关图片: ...

  3. python基础笔记((1)

    逻辑与或非用的是and or not. 除法即使整除结果也是浮点数 地板除//结果一定是整数. 内存中的字符串是Unicode编码,str.encode('utf-8 or ascii')将class ...

  4. WINDOWS.H already included. MFC apps must not #include Windows.h

    做C++.C#和C++/CLI的混合编程有一段时间了,填了不少的坑. 今天又遇到一错误,想着挺容易就解决,估计是大脑疲惫,折腾许久才找到原因. 错误: 错误 C1189 #error: WINDOWS ...

  5. Android 开发Day7

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

  6. 记录--Vue 2和Vue 3:谁将成为前端界的披萨与汉堡之争?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在前端开发的世界里,Vue.js一直是一个备受追捧的框架.随着Vue 3的发布,开发者们开始热烈讨论它与Vue 2之间的差异和优势.就像披 ...

  7. C# 强大的网页处理类NSoup

    地址: https://github.com/GeReV/NSoup using System; using System.Collections.Generic; using System.Comp ...

  8. 在nginx中使用proxy protocol协议

    目录 简介 proxy protocol在nginx中应用 在nginx中配置使用proxy protocol 在nginx中启用proxy protocol 使用Real‑IP modules 请求 ...

  9. K8s技术全景:架构、应用与优化

    本文深入探讨了Kubernetes(K8s)的关键方面,包括其架构.容器编排.网络与存储管理.安全与合规.高可用性.灾难恢复以及监控与日志系统. 关注[TechLeadCloud],分享互联网架构.云 ...

  10. Python scipy.ndimage.find_objects用法及代码示例

    用法 scipy.ndimage.find_objects(input, max_label=0) 在标记数组中查找对象. 参数: input: 整数数组 包含由不同标签定义的对象的数组.值为 0 的 ...