Trust
Trust
  • 发布:2018-08-08 16:00
  • 更新:2018-08-08 16:00
  • 阅读:2480

【分享】合理地利用入口页初始化应用的信息

分类:HTML5+

开发 5+ App 时,『页面入口』通常会配置为应用的首页。这种配置方式,也存在着一些不方便的地方:

  • 首页比较特殊,一些配置需要在 manifest.json 中填写。比如 titleNView、subNViews 等。
  • 登录状态或者环境语言等信息,可能需要在应用启动的时候尽可能早的获取。这些状态也会影响到首页的信息,修改操作不是很方便。

其实可以换一个思路,利用『页面入口』作为一个初始化的页面。这个页面不显示出来,登录状态或者语言等信息的处理在这里完成。

调整页面

依旧使用 index.html 作为入口,同时调整 splash 为手动关闭。新建一个 home.html 作为实际的首页,id 约定为 home。

index.html

因为这个页面没有实际的内容,因此前面需要将 splash 调整为手动关闭,防止白屏。

在这个页面完成的工作有:

  • 获取登录状态
  • 获取当前系统语言信息
  • 监听 backbutton

获取完相关信息后,打开实际的首页窗口。如果需要用到 titleNView 或者 subNViews,那么在 js 中完成配置或绘制,相较于在 json 中配置会更加灵活。

var url = 'home.html';  
var login = $login.getValue();  
var lang = $lang.getValue();  
var webview = null;  

url += '?login=' + login + '&lang=' + lang;  

webview = plus.webview.create(url, 'home', {  
  titleNView: {  
    backgroundColor: '#ff3333',  
    titleText: '首页',  
    titleColor: '#ffffff',  
  },  
});  
webview.show('none');

注意这里未使用动画效果,一来节省开销,二来动画也看不到。

home.html

这是真正的首页,在这个页面要完成的工作主要有:

  • 获取入口页传递过来的参数信息。
  • 根据参数信息,初始化相应的内容。
  • 在合理的时机选择关闭 splash。

登录

未登录状态下,其实有两种引导用户登录的方式。

  • 弹框提示用户去登录。
  • 直接打开登录页,并且登录页点击 back 触发退出的逻辑。

如果选择直接打开登录页,就可以理解为应用是强制需要登录的,那么登录页 back 需要走退出的逻辑。并且 splash 的关闭也应当在登录页完成。

语言

语言信息的初始化,建议两种方式。

  • 应用本地 js 中存储配置读取。
  • 联网从服务器拉取。

无论选择哪种方式,都应当在渲染语言信息相关的内容后,再选择关闭 splash。

结束

实际开发中,需要根据业务场景灵活掌握,而非一成不变。附件中有一个简单的示例项目,下载后直接拖到 HBuilder/HBuilderX 中真机运行即可预览效果。

注意:这是 5+ App 是移动应用,不要再问为什么浏览器中没有效果这种问题了。

1 关注 分享
miskss

要回复文章请先登录注册