开发 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 是移动应用,不要再问为什么浏览器中没有效果这种问题了。