最近用MUI做了一个跨平台App项目，由于初学MUI，踩了不少坑。后面将陆续更新一些项目中遇到的问题及解决方案，让初学者少走弯路！
原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/6d8a599eaf28
场景：
用户点击个人中心的"登录/注册"会跳到"登录/注册"页面，由于"登录/注册"页面不提供导航栏和返回按钮(为了界面美观)，这就导致用户不注册登录的话就无法返回到上一级页面进行其他操作。安卓手机自带物理返回键，可以不用担心这个问题；但是苹果手机是没有物理返回键的，这就想到了iOS自带的侧滑返回功能可以解决这个问题：
通用侧滑返回
看了一下MUI的官方文档，只发现了这样一种方式，在MUI初始化的时候开启右滑关闭功能：
//mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init();方法中设置swipeBack参数，如下：
mui.init({
swipeBack:true //启用右滑关闭功能
});
这种方式实现的右滑关闭功能安卓和iOS通用，但需要在屏幕上快速滑动，有时候会操作失败，体验差。
iOS原生侧滑返回
MUI基于HTML5+封装了一个openWindow()的方法用于跳转页面,通过这种方法可以使用原生导航栏（titleNView）。需要在styles参数中配置titleNView参数(参考MUI文档：打开带原生导航栏的新页面)：
mui.openWindow({
url: webviewUrl,
id: webviewId,
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
titleNView: { // 窗口的标题栏控件
titleText:"标题栏", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
titleSize:"17px", // 字体大小,默认17px
backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
progress:{ // 标题栏控件的进度条样式
color:"#00FF00", // 进度条颜色,默认值为"#00FF00"
height:"2px" // 进度条高度,默认值为"2px"
}
}
});
我们的场景是不需要导航栏的，所以把titleNView参数删掉。试了一下导航栏没了，但是依然不支持侧滑功能。
后来在HTML5+文档中发现了popGesture这个属性：
popGesture: (String 类型 )窗口的侧滑返回功能:
- 可取值： "none"-无侧滑返回功能； "close"-侧滑返回关闭 Webview窗口； "hide"-侧滑返回隐藏webview窗口。
popGesture的默认值是"none", 需要在styles参数中设置popGesture为"close"或者"hide"才可以实现iOS原生侧滑功能，代码如下：
mui.openWindow({
url: webviewUrl,
id: webviewId,
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
popGesture: "close"
}
});
注意：这样还会存在状态栏的问题，请参考：MUI-解决iOS原生侧滑返回时状态栏出现白色条的问题（设置沉浸式状态栏）
网友评论