HBuilder开发旅游类APP(二) ----- mui结合H5+,快速实现首页、登录、注册等功能

HBuilder开发旅游类APP(二) ----- mui结合H5+,快速实现首页、登录、注册等功能

作者：班尼科

本博文是本人原创，喜欢请给我点赞，转载请注明出处哦.

标签： 旅游 H5+ MUI 标题栏 沉浸式状态栏
目的： H5+项目和mui项目结合，不懂js也能开发APP

【前言】 H5+项目是原生HTML5+做的API，比如在使用二维码时，需要使用plus.barcode，其他地方，有可能用到plus.webview和plus.nativeUI。
mui项目是封装了原生HTML5+ API的框架，方便开发者迅速开发应用。含mui.css（提供了很多页面样式）和mui.js（封装了原生HTML5+API）。
新建mui项目一样可以调用plus的所有api。本文为了方便开发者使用mui控件，在mui模板项目上结合H5+实现首页的设计，适合初学者快速进入移动APP开发.

Step1. 在HBuilder中选择“mui 登录模板"创建移动APP，目的是有源码参考.

Step2. 重复Step1的操作，创建新的项目temp1

1 . 将manifest.json文件用前文“HBuilder开发旅游类APP(一) 实现地图插件调用、苹果和安卓同步混合开发”(https://blog.csdn.net/c987018237/article/details/89397321)项目的同名文件替换掉，目的是使得地图功能可以沿用，以免重复操作.
修改页面入口如上图

2.从前文(一）中Free Go项目里复制相关文件到新项目中，具体对照下图，其中包括css、js、img以及unpackage目录下的icons文件夹. 注意查看"页面引用关系"以确保文件无缺失，以免影响功能.

3. 建立首页与地图的关系
(1) 向导生成的main.html页面效果如下，显然不符合我们需要.

修改main.html这里的代码如下：

修改后效果如下

其中，“登录”和“设置”功能由模板生成，自然可用.


(2) 实现地图在首页中的显现
通过子页面来实现，在main.html文件中添加如下代码，在init()方法中加载subpages.

效果如下：

真机运行效果如下（代码中已经去掉了maps_map.html中的“重置”按钮和标题栏，聪明的你一定知道怎么做的。就是注释掉就好啦）

界面上存在标题栏上移的问题.

4. 解决“沉浸式状态栏”导致的状态栏高度不合理的问题

当然我们可以修改immersed为false (不要告诉我你不懂这是啥意思)

但我们不打算这么做，因为我们不懂maps相关的页面是否受整个影响。所以，我们这么干：

真机运行如下. 如果你喜欢，可以让状态栏和标题栏同色，随你啦.

下文给APP加上底部栏（底部选项卡），coming soon … …