变脸式应用 / 创建多个H5应用

创建多个H5应用

[任务]

在示例项目中,只有一个应用即index.html。
实际在一个H5项目中,常常需要多个应用,例如给用户使用的手机客户端应用、给员工使用的员工端应用等。
我们将在同一项目下再创建一个新的“员工端”应用。

筋斗云要求每个H5应用有个内部名称(appName),
在示例应用中,appName定义为user,表示用户端,假如定义员工端应用的内部名称为emp,我们创建这些文件:

  • 新建H5主文件,emp.html, emp.js, emp.css
  • 新建逻辑页目录,名为emp,在这个目录下创建逻辑页。

项目下所有H5应用共用的逻辑放在文件app.js中,共用的样式放在文件app.css中。
第三方库文件,一般放在lib目录下,每个应用均可引用。

在emp.js中正确配置:

$.extend(MUI.options, {
    appName: "emp",
    homePage: "#home",
    pageFolder: "emp",
});

应用内部名称appName将会在callSvr发起的调用中,自动通过URL参数_app传给后端。
后端可以根据应用不同,建议使用不同的cookie名来区分,这样即使浏览器同时打开这两个应用,也不会有冲突。

关于代码放到哪个文件中,原则如下:

  • 逻辑页专用的内容,放到逻辑页的html/js文件中。
  • H5应用专用的内容,或多个逻辑页共享的内容,放到H5主文件html/js/css中。
  • 项目下所有H5应用共享的内容,放到app.js/app.css中。
发布了65 篇原创文章 · 获赞 16 · 访问量 8万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章