关于用MUI开发APP的一个小总结

最近做的一个项目，是关于房产的一个app；由于只会前端的一点东西，也没有任何的开发经验，所以所做的一切都是百度找的，最后找到了MUI这个框架，说是最接近原生APP的一个框架，反正我啥也不会，就这么用吧；

总结一点问题
一，关于固定定位的问题
其实在IOS下固定定位并不稳定，特别是在用户输入内容的时候，固定定位就会出问题，其实我是比较想用绝对定位来模拟固定定位的，但是因为很多东西不是很熟悉，加上MUI框架都是这么用固定定位的，所以这种小bug我也就没管了

二，沉浸式导航的问题
在我们做沉浸式导航的时候，是需要在配置文件manifest.json里的plus的节点下的statusbar对象里设置”immersed”: true，这样确实是设置好了沉浸式，但是这样你会发现你的头部完全都跑到状态上去了，所以我们的做法就是会给头部加一个padding值，然后因为不同的手机的状态栏高度是不一样的，所以我们需要动态去计算出状态栏的高度，然后给相应的padding-top值；当然MUI框架的头部都设置了box-size:border-box;所以我们还需要设置高度，这个都只是CSS的问题而已，这样做也不是什么问题；一切都没什么问题，不过个人感觉这样做不太好，因为状态栏的颜色什么的不好设置；感觉不要给头部设置什么高度或者padding，其实直接在打开页面的时候就设置状态栏的颜色，这样会靠谱一些

三，自定义事件的兼容问题
安卓手机上都没什么问题，但是在IOS下，如果要执行自定义事件，有一些条件的，比如如果这个页面是新创建的话，那么自定义事件，必须是在这个页面loaded事件发生了以后才会执行的；所以为了兼容两个系统以下的代码会更好一些

var wv = plus.webview.getWebviewById("a.html");
if(!wv){
    wv = plus.webview.create("a.html","a.html");
    wv.addEventListener("loaded",function(){
        wv.show("none",1,function(){
            mui.fire(wv,"getId",{
                ....
            });
        })
    })
}else{
    wv.show("none",1,function(){
        mui.fire(wv,"getId",{
            ....
        });
    })
}

四，关于请求数据的问题
个人的总结，我觉得在前端请求数据的时候，我们应该把每一个状态都做好相应的提示；一般请求数据分为三个状态
1）请求之前(为了防止用户多次请求，这个时候应该是让提交数据的按钮禁用掉，不管用什么办法);
2）请求成功了（把刚刚禁止掉的按钮恢复正常，做相应的数据展示）
3）请求失败了（把刚刚禁止掉的按钮恢复正常，做相应的提示）

五，关于前端的发送数据给后台和请求到数据以后如何展示的问题
利用vue的双向数据绑定和模板渲染会省事很多，虽然双向数据绑定还没有用到过，但是应该是比自己写要靠谱很多，因为利用双向数据绑定根本无需做什么，发送数据的时候，也是服务器返回来的原格式，这样会很方便

六，上拉刷新和下拉刷新的问题
iOS平台的下拉刷新，使用的是 mui 封装的区域滚动组件，为保证两个平台的 DOM 结构一致，内容页面需统一按照如下 DOM 结构构建：

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">

    </ul>
  </div>
</div>

这里注意，虽然利用了滚动组件，但是这里不需要再初始化滚动组件了，不然会有问题的

七，关于滚动组件
如果是利用vue去渲染的内容，在渲染完成以后一定要记得初始化滚动组件，不然就会失效

暂时先写到这里，其他问题回头再补上。。。。

来源：CSDN

作者：导乐符

链接：https://blog.csdn.net/qq_36800701/article/details/79297794

标签

mui

软件