Uni-app 开发技巧（2020-01-17 更新）

11. uniapp 使用nvue 布局不生效 （HB版本 2.5.1.20200103）
    使用class 布局在切花的时候不生效，
    解决方法 使用 style 布局就可以了

12. 使用titleNvue 中buttions 配置的导航按钮, uni-app在App端动态修改导航栏按钮

// #ifdef APP-PLUS  
var webView = this.$mp.page.$getAppWebview();  

// 修改buttons  
// index: 按钮索引, style {WebviewTitleNViewButtonStyles }  
webView.setTitleNViewButtonStyle(0, {  
    text: 'hello',  
});  

// 修改按钮上的角标  
// index: 按钮索引, text: 角标文本内容  
webView.setTitleNViewButtonBadge({  
    index: 0,  
    text: 10,  
});  

// 设置 searchInput的 focus  
// focus: true | false  
webView.setTitleNViewSearchInputFocus(true)  

// 设置 searchInput的 text  
webView.setTitleNViewSearchInputText(text)  

// searchInput 通过 webview 的 setStyle 方法进行更新  
var tn = currentWebview.getStyle().titleNView;  
if (tn.buttons) {    
uni.getSystemInfo({    
    success:function(res){    
        if (res.platform=="ios") { // 这里在HBuilderX 1.9.9版本有个bug，searchInput的I变小写了 ，临时绕过下。更高版本会修复此bug    
            tn.searchinput.placeholder = 'test';    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        } else{    
            tn.searchInput.placeholder = 'test'; //这里有个已知bug，HBuilderX 1.9.9上，当searchInput位于首页时，动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        }    
    }    
})    
}    

// #endif

参考这个原理，可以任意修改titleNView的所有内容，titleNView的style内容详见：
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

button的相关属性参考：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewButtonStyles

searchInput的相关属性参考：https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewSearchInputStyles

9. 在nvue页面 使用 .stop 阻止事件冒泡不起作用
   目前解决方法： 在事件中使用

// 第一种方法不带参数
<view @click.stop="click">
click:function() {
    event.stopPropagation();
}

// 第二种方法带参数的
<view @click.stop="click(item,$event)">
click:function(item,event) {
    event.stopPropagation();
}

8. 在 iPhoneX 上列表底部安全区域获取：

padding-bottom: 0;  
padding-bottom: constant(safe-area-inset-bottom);  
padding-bottom: env(safe-area-inset-bottom);  

7.导航栏使用字体图标、设置透明导航栏

"style": {
    "app-plus": {
        "titleNView": {
            "type": "float",
            "titleText": "",
            "backgroundColor": "rgba(0,0,0,0.3)",
            "buttons":[
                {
                    "text": "\ue619",
                    "float": "left",
                    "width": "auto"
                }
            ]
        }
    }
}

6. 文本两段对齐显示

text-aligin: justify

5. 解决安全区域颜色和页面背景色不统一或者有安全区域问题

设置之后系统会自动设置安全区域高度

"safearea": {
            "bottom": {
                "offset": "none|auto"
            }
        },

4. 文本显示两行

    width:200px;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

3. 文本单行展示，超出的现实三个点

    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

2. 原生tabbar 中间按钮凸起或者剧中显示实现方法

    "midButton": {
        "height": "44px",
        "iconPath": "static/tabbar/tab_icon_ps@3x.png",
        "iconWidth": "37px",
        "backgroundImage": ""
    }

1. 页面闪白问题解决方法在pages.json 中添加一下代码来设置你想要的颜色

    "globalStyle": {
        "app-plus": {
            "background": "rgba(34, 33, 33, 1)"
        }
    },