mui技术问题总结

  1. 跳转问题关闭原页面会闪一下的问题:

在进行页面关闭时,通常采用plus.webview.currentWebview().close()来进行当前页面的关闭,这个时候会出问题,就是页面无法正常跳转,会一直显示加载。解决方法就是增加延时函数进行页面的延时关闭,这是就会成功的来到新页面,但又会出现一个新的问题,关闭老页面时,会在新页面闪一下,这样的体验是很不好的。然后经过查阅,可以通过先hide也就是隐藏,再进行close关闭,这里要注意的就是延时的时间设置,隐藏的延时必须比关闭的延时短,不然就起不到隐藏的效果,也无法解决关闭时老页面闪一下的问题。这里还得注意的是延时的时间必须合理设置不能过长也不能过短,过短就无法解决老页面关闭闪一下的问题,过长的话如果用户很快的来回去两个页面,那么就会出现老页面还没有关闭又来到了老页面,这样就会出问题,所以延时的时间设置非常的重要。

2.Mui.openwindow打开已经打开的页面:

通过openwindow打开已经打开的但没有关闭的页面,mui.plusReady是不会就行运行的,所以会导致页面没有刷新。所以打开的页面跳转到其他页面时需要进行页面关闭。

3.Text内容加n不能换行的问题:

这个问题就是在设计协议样式时遇见的,开始在百度搜索text内容怎么换行,回答都是用n或者rn等等,当进行使用时发现依旧没有达到换行的目的,但是也没有n显示,所以n应该是可以进行作用的,但是这里没有进行换行,然后继续进行百度。最后发现是css的white-space属性的问题,这里默认关闭了换行,所以在更改white-space的属性后n就能进行换行了,以下是white-space的属性值:

normal:忽略多余的空白,只保留一个空白(默认);

pre:保留空白(行为方式类似于html中的pre标签);

nowrap:只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。

pre-wrap:保留空白符序列,正常地进行换行;

pre-line:合并空白符序列,保留换行符;

inherit:从父元素继承white-space属性的值。

我们这次的设置就是white-space:pre-wrap,就解决了n不能换行的问题。

具体详情可参考:https://blog.csdn.net/weixin_38055381/article/details/86003034

4.图片无法加载的问题:

在有些地方发现自己的图片会无法显示出来,最开始以为是网络的问题导致图片无法正常的加载。在后面发现不是网络的问题,然后通过百度发现如果图片的命名带有了中文,那么图片就无法加载出来,所以图片命名一定不要带有中文字。

5.弹出菜单的关闭问题:

在使用弹出菜单进行页面跳转后,再返回来时发现菜单没有关闭,这样就导致了用户体验上存在一定的问题,这里的解决办法是给弹出菜单里面的点击事件里加上mui('#popover').popover('toggle');这句话,然后就可以解决弹出菜单点击跳转后再返回页面时,菜单没有关闭的问题。但这个mui('#popover').popover('toggle');需要小心使用,因为mui.popover的作用不仅仅是进行弹出菜单的关闭,它也可以打开弹出菜单。所以一旦你在逻辑上错误的使用了mui('#popover').popover('toggle');那么不仅不能起到关闭弹出菜单的作用,还会导致弹出菜单胡乱开启。

6.引入阿里图标库图标:

因为mui本身的图标库是非常有限的,一般都不能满足一个项目的所需图标,那么就需要进行外部图标的引入,最常用的就是阿里图标(具体网址:https://www.iconfont.cn/)

进入图标库后先选取我们所需要的图标加入购物车,然后进入购物车进行代码的下载,下载后将只需要将iconfont.ttf文件放到mui框架的font文件夹里,iconfont.css放到css的文件夹里就可以进行图标使用了,调用方法class="mui-icon iconfont 图标名字"这里需要引入前面的iconfont.css文件。

7.手机物理返回键设置:

在mui里,手机的物理返回键默认的是返回上一个父页面,所以在有点情况下需要进行修改来保证逻辑的正确性,具体的修改就是对mui.back进行修改,在内部加上你要跳转的页面,从而实现对手机物理返回键的控制。

8.预加载问题:

预加载就是在本页面对子页面进行加载,这样做的目的就是防止下一个页面加载时间过长,导致体验上会出现问题。但是进行预加载会出现一个问题,就是当你父页面进行带参跳转时,如果下一个页面已经进行了预加载,那么你的预加载页面的plusready是不会进行渲染的,也就是你通过var self = plus.webview.currentWebview();这种方式是无法获取到上一个页面的传参的,那么这里就会导致错误发生,所以在进行预加载时就必须考虑其他的传参方式而不能使用openwindow来进行传参和plus.webview.currentWebview()进行参数获取的方式,目前我的解决思路是采用原生的localStorage来进行传递。

9.特殊图标颜色处理:

这次的进度条完全是用图标来进行构成的,特别是颜色处理上是一个比较难的难题。因为对于数字图标的颜色,你改变color只能是改变的外面那一圈的颜色并不能对那个数字颜色进行修改,这里有两种方法第一种就是在阿里巴巴图标库将图标颜色进行修改后才下载,这样做就不能用上面第六点提到的方法进行引入,因为这样引入的图标还是没有经过修改的图标,这里你就得用symbol引用,这样才能引入自己修改颜色后的图标。另一个方法就是可以通过修改background-color来进行修改文字颜色,然后把背景弄成和图片一样的形状。但是这里会有一个问题就是图标会有一层阴影,这样导致了和设计图产生了差异,那么如何来解决呢(这里我弄了几天还是没有成功解决这个问题,最后是另一个同学解决了这个问题),就是背景颜色采用渐进色来进行,这样就是只要文字的地方有颜色然后接近图标边沿的地方又和大的背景颜色一样,这样就解决了图标有阴影的问题,也成功修改了图标内部文字的颜色。

你可能感兴趣的:(html5mui)