Serverless轻松实现WEB页面与应用交互,玩转活动运营

闭包流星
• 阅读 733

当今移动应用日益丰富,应用里的内容更新愈发高频。如果仍旧依靠手机的原生页面来hold这些变化会比较困难,不但开发者需要持续提供新版本去更新页面,用户也需要不断地更新应用版本方可获取最新的内容。这种状况下,在应用中嵌套WEB页面获得了众多开发者的青睐,成为解决问题的首选方式。

HUAWEI AppGallery Connect提供的Serverless服务可以帮您快捷部署WEB网页,WEB页面数据与原生应用的连接,助力开发者每天将不同的页面与内容呈现在用户眼前。

Serverless服务具体是如何实现WEB页面和原生应用的连接呢?下面举个栗子吧。

电商应用日新月异,商家经常会推出琳琅满目的促销活动,对不同品类进行重点推广。某电商应用举办一个品牌馆的活动,领域内的各大主流品牌都参与此次活动。基于此,电商平台需要提供一个统一风格的WEB展示框架,同时为每个品牌设立一个WEB页面,来展示品牌介绍以及促销活动的详情。

上述诉求,通过Serverless服务可轻松实现:
 使用云函数,实现不同品牌的页面内容分发逻辑。
 使用云数据库云存储,用于保存页面的内容数据,以及此项目应用所需的数据。
 使用云托管,将此活动的WEB网页托管云上。
 当前端页面将用户选择的品牌作为入参传递给云函数,云函数对接云数据库和云存储,通过此入参获取页面内容相关的数据和资源,并统一调度分发到托管的WEB网页上呈现。

其中云函数和前端页面的实现尤为关键。
Serverless轻松实现WEB页面与应用交互,玩转活动运营
 云函数部分
以java语言为例,我们需要构建一个普通的Maven框架的Java工程。按云函数的标准框架,我们创建一个入口函数,函数的其中一个入参为JSONObject类型的变量,用于实现函数在被调用时可通过此变量获取用户选择的品牌名字。此外,在云函数中集成云数据库的Server SDK,可以实现函数对接云数据库查询对应品牌的所有数据。
在筛选数据的时候您可以通过类似如下的语句指定品牌来实现:
CloudDBZoneQuery<goods> query = CloudDBZoneQuery.where(goods.class).equalTo("brand", brand);
数据查询成功后,通过入口函数的返回,实现云函数回传数据到前端页面。按云函数编写规范,入口函数的返回值需为JSON形式,选择云函数自带的CanonicalHttpTriggerResponse类。

 前端页面部分
通过集成云函数的Web JS SDK,并在函数中创建HTTP触发器,来实现云函数的触发逻辑。当前端页面触发函数时,需要将函数所需的入参通过请求发送给函数。按接口规范,需将所有参数写成Json键值形式,带入到触发函数的方法中。
以传入品牌名称为例,传入的参数类似如下的结构:
{

“brand” : Huawei

}
前端页面触发函数接口调用成功后,您可以对调用方法设置监听回调,回调中即可获取到函数的返回,即在函数中查询到的此品牌所有数据,最终将这些数据填充展示在页面框架上。

按照上述步骤,“电商品牌馆”的活动即可轻松实现!

而除了WEB页面的高效部署,面对开发效率低、运维成本高、资源浪费等困境,Serverless认证服务、云函数、云数据库、云存储以及云托管服务,其跨平台、上线快、成本低、免运维的特性,让您不必关心云侧资源的管理和运维,仅需聚焦业务创新及业务逻辑的实现,有效提高应用开发效率。
Serverless轻松实现WEB页面与应用交互,玩转活动运营
更有Serverless模板,助您快速部署和集成抽奖、游戏排行榜、短URL生成、图片尺寸调整等产品功能,降本增效快人一步。

点赞
收藏
评论区
推荐文章
凝雪探世界 凝雪探世界
4年前
js-Answers二
前端框架相关什么是单页面应用(SPA)?单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页目标:旨在用为用户提供了更接近本地移动APP或桌面应用程序的体验。流程:第一次请求时,将导航页传输到客户端,其余请求通过RESTAPI获取JSON数据实现:数据的传输通过
编程范儿 编程范儿
3年前
Vue刷新页面有哪几种方式
在Vue项目中,刷新当前页除了window.reload(),你还能想到什么办法?而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。在某个详情页面的时候,我们经常需要通过路由中的详情id去获取内容,当我们在不同的详情页来回切换的时候,打开的页面是同一个,只是需要通过监听路由中的参数id的变化去重新请求详情接口。如果这个详情页只需要一个接口
Souleigh ✨ Souleigh ✨
4年前
如何只使用CSS提升页面渲染速度
用户喜欢快速的Web应用。他们期望页面加载速度快,运行流畅。如果滚动时出现动画中断或延迟,用户很可能就会离开你的网站。作为一名开发者,你可以做很多事情来提升用户体验。本文主要介绍你可以用来提升页面渲染速度的4个CSS技巧。1\.Contentvisibility一般来说,大部分Web应用都有复杂的UI元素,并且它的扩展超出了用户在浏览器
Stella981 Stella981
3年前
Android与H5混合开发
    Android和H5在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要。而android
Wesley13 Wesley13
3年前
3. Vue
路由是根据不同的url地址展现不同的内容或页面。前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做(在单页面应用,大部分页面结构不变,只改变部分内容的使用),之前是通过服务器根据url的不同返回不同的页面。前端路由优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户缺点:不利于SEO,使用浏
Stella981 Stella981
3年前
Android自动化页面测速在美团的实践
背景随着移动互联网的快速发展,移动应用越来越注重用户体验。美团技术团队在开发过程中也非常注重提升移动应用的整体质量,其中很重要的一项内容就是页面的加载速度。如果发生冷启动时间过长、页面渲染时间过长、网络请求过慢等现象,就会直接影响到用户的体验,所以,如何监控整个项目的加载速度就成为我们部门面临的重要挑战。对于测速这个问题,很多同学首先会想到在页面
Stella981 Stella981
3年前
Spring Boot 与 Kotlin Web应用的统一异常处理
做Web应用,请求处理过程中发生错误是非常常见的。SpringBoot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来展示异常内容。选择一个之前实现过的Web应用(chapter1151)为基础,启动该应用,访问一个不存在的URL,或是修改处理内容,直接抛出异常,如:
Wesley13 Wesley13
3年前
10分钟彻底搞懂单页面应用路由
上一次,跟大家科普了小程序的自定义路由routes,开启了路由之旅;今天,顺势就单页面应用路由,跟大家唠个五毛钱,如果唠得不好……退…一块钱?单页面应用特征假设:在一个web页面中,有1个按钮,点击可跳转到站内其他页面。多页面应用:点击按钮,会从新加载一个html资源,刷新整个页面;单页面应
Wesley13 Wesley13
3年前
CSS3实现页面加载进度条
什么情况下会使用到页面加载进度条?当页面中的需要加载的内容很多,用户直接进入则看不到任何内容,体验不好,这个时候就需要使用到页面加载的一个动画,在页面加载结束后再显示主体内容。实现页面加载进度条有哪几种方式?一般可分为两种,1.设置多少时间后显示页面,2.根据页面加载的文档状态来实现如何根据文档状态来实现?
融云IM即时通讯 融云IM即时通讯
6个月前
融云IM干货丨 IM 服务,开通 Web/PC 在线时手机端接收 Push
根据搜索结果,要实现在Web/PC端在线时手机端也能接收Push通知的功能,您可以按照以下步骤操作:访问控制台:您需要访问融云控制台的免费基础功能页面。确认应用信息:在控制台中确认应用名称与环境(开发/生产)是否正确无误。开启功能:找到“Web/PC在线手