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来进行修改文字颜色，而后把背景弄成和图片同样的形状。可是这里会有一个问题就是图标会有一层阴影，这样致使了和设计图产生了差别，那么如何来解决呢（这里我弄了几天仍是没有成功解决这个问题，最后是另外一个同窗解决了这个问题），就是背景颜色采用渐进色来进行，这样就是只要文字的地方有颜色而后接近图标边沿的地方又和大的背景颜色同样，这样就解决了图标有阴影的问题，也成功修改了图标内部文字的颜色。