• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

将移动站转化成移动应用:wap2app

Frame/Browser 薛 陈磊 324次浏览 1个评论 扫描二维码

说起IDE,或者那些好用的IDE,这个问题犹如PHP是不是世界上最好的语言,总能一石投水般引起争议和讨论,市面上的IDE非常之多,功能性也越来越便捷与复杂,伴随而来的是越来越大的体积和启动速度,其实从功能性来说,相似点是非常多的,主要还是操作习惯的问题,导致换IDE的时候非常不顺手,觉得惯用IDE最好用,而引起了甜咸党之争;

市面上常用的IDE包括VScode,Sublime,Webstorm,Notepad++,Dreamweaver,HBuilder,记事本等(大神会心一笑),这些除了记事本我都用过,用的最长算HBuilder(反弹一切鄙视 ̄へ ̄),最开始接触使用HBuilder的时候是16年,那时候就已经了解HBuilder团队并不是仅仅做集成开发编辑器,同样包括Html5+,MUI等其他产品的开发和发布,特别是MUI的诞生时代,是诸个前端ui(移动)发展很快的时候,有很多人使用反馈,当然也有吐槽;

说了这么多,不是安利,而是最近注意到HBuilder团队(其实应该是DCloud,叫习惯了)的wap2app项目,简单的说就是将移动站点转换成移动应用;wap2app在HBuilder启动时的推广:

将移动站转化成移动应用:wap2app

其实这种技术不算新颖或者说是突破性的,市面上可能有比wap2app更早的转换方案,并且这种解决方案必然会遭受到原生开发/React nativer的鄙视,以及对其性能表现的质疑,但不妨可以在某些特定条件下为实现快速迭代而考虑采用的方案(对比推翻重来的情况下等);并且wap2app强化框架提供比较高的性能支持:

  • 提供了原生渲染能力,让界面渲染速度和动画效果,达到原生体验(优化后的体验有多好,可以滚动到文档底部看“案例体验”章节)
  • 提供丰富的系统原生能力(定位、分享、支付、推送等),达到原生功能
  • 通过 json 配置页面规则和强化规则,工作量低,学习成本低
  • M站仅需稍作修改,改造成本低
  • 强化部分和之前的M站解耦合,M站后续升级业务逻辑,生成的App自动含有更新后的业务逻辑

按照强化框架的设计,开发者只需要在原移动站点(PC站理论上是一样的,只是界面显示差异)上做wap2app 客户端的配置编程工作,和移动站的强化改造工作改造工作,就可以在HBuilder中发布成原生app安装包,强化工作包括:

  • wap2app 本地端的工作:通过框架提供的 sitemap.json 文件,描述页面关系和动画强化方案,以达到原生的窗体切换效果。当 sitemap.json 配置无法满足复杂需求时,可使用 app.js 编程进行增强处理。
  • M站的改造工作:针对 App 运行环境(可根据UA区分),进行适当的改造。包括去掉一些 App 里不应该出现的页面元素(如底部的电脑版链接,或某些原生 App 下载引导等)。
  • 扩展原生的能力:如果需要调用 DCloud 的 HTML5+ 引擎 扩展的原生能力,比如M站之前无法实现的微信分享、推送、原生支付等,需要进行必要的编程工作。这部分工作,可以在 wap2app 本地端实现,也可以直接在M站实现(注意判定当前运行环境)。

将移动站转化成移动应用:wap2app

开始一个wap2app,可以创建一个新的空白模板,从模板上从新开始,或者是将已存在的移动站改造Nview文件,也可以看看官方推荐的Hello Wap2app示例如上图,结合官方文档,了解项目的基本结构和改造方式(方法和布局其实和微信小程序有点像),然后发布原生文件(需要一定量的原生配置项);

似曾相识的Nview模板结构:
将移动站转化成移动应用:wap2app
wap2app在性能方面使用subNview,使得性能比较接近原生应用,但是在Nview布局结构和M站改造方面,并不是只需要配置公用sitemap.json/app.js就可以的,开发者需要重新将原站点页面结构/布局/样式/元素隐藏与否等都要重构,对于稍大点的电商网站,要花费的精力并不小,另外在生态圈方面,用户活跃度/知识问答也不是很火热(对应开头的原生鄙视链);但是无论如何,我们都看到了这个增强型框架的存在和社区,对于开发者来说,多了一个选择和尝试,希望这样的社区越来越多。

资料:

DCloud社区官网

wap2app官方文档

 


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明将移动站转化成移动应用:wap2app
喜欢 (2)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
(1)个小伙伴在吐槽
  1. 不错
    刘小康2018-05-10 11:02 回复 Windows 7 | Chrome 64.0.3282.186