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 … …

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

HBuilder开发旅游类APP(一) ----- 实现地图插件调用、苹果和安卓同步混合开发
HBuilder开发旅游类APP(一) ----- 实现地图插件调用.苹果和安卓同步混合开发作者:班尼科本博文内容参考了网络资源,但文章完全是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: ...
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡) 作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 HBuilder H5+ M ...
开发一款出境旅游类APP需要包含哪些功能？
随着人们的经济水平增长,不少人闲暇时间选择去往不同地方旅游.在感受完国内各个地方的美景后,开始对国外的旅游胜地产生了憧憬. 如果去国外旅游,为了方便和安全,安装一款出境旅游APP是最好的选择,那么,开 ...
【旅游类APP源码】开发者案例开源，走过路过不可错过！
小编语继上周分享仿饿了么APP源码后,得到了开发者们的强烈反响.热心的开发者(社区ID:小小昊)又翻箱倒柜地找出一个旅游类项目,大手一挥,慷慨奉献给各位AppCan的同学了!想要学习旅游类APP开发的 ...
【友盟+】国庆假期旅游类APP使用报告（中）
往期回顾: [友盟+]国庆假期旅游类APP使用报告(上) 各类APP用户属性特征 APP使用人群性别属性在APP活跃人群的性别分布方面,男性用户与女性用户在国庆前后使用旅游类APP的比重基本均衡,男 ...
Apicloud开发新闻类App实战项目-老孟编程
Apicloud开发新闻类App实战项目-老孟编程课程名称:Apicloud开发新闻类App实战项目讲师:孟老师课程介绍: 技术点包括: 1:vue实现apicloud开发脚手架--超级实用通用 ...
旅游类App原型制作分享-Triposo
今天带给大家的,还是一款旅游类App,这类App在设计时的一些注意问题前面已经给大家分享过了,这次重点给大家展示的是这一款原型中的启动页面,在设计的时候,只用了一个简单的交互效果:隐藏显示,触发方式是 ...
旅游类App的原型制作分享-Klook
Klook是一款旅游类App,它能探索和预订惊人的旅行活动.在世界各地以最优惠的价格畅玩. 这款原型中,用到了Mockplus的两种滚动方式,一种是把手机外壳拉长,另一种是使用滚动区组件,其中,滚动区 ...
【友盟+】国庆假期旅游类APP使用报告（上）
报告要点 • 旅游各类APP在国庆节前后用户数变化幅度大,票务平台类与出行方式类在国庆期间用户骤降,综合平台类与旅游助手类在国庆期间使用率较高: • 使用形态上来看,旅行助手与综合 ...

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

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

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

最新文章

热门文章