uni-app使用总结

分类：uni-app

uniapp

本文主要uni-app开发项目遇到的一些问题的总结，关于uni-app具体的介绍和使用请查看uni-app官网。
笔者编译使用的HBuilderX版本为2.4.2.20191115。

样式

1.1 无法设置背景图片

直接使用图片，并且图片大于40kb，官网有说明，主要是针对web之外的平台存在限制。

1.2 根据官方文档设置窗口背景颜色无效（在pages.json设置窗口默认backgroundColor或者单独设置窗口style中的backgroundColor都没有效果）

在页面中设置

page {  
    background-color: #ccc;  
}

1.3 设置页面navigationBarShadow导航栏阴影无效

关于导航栏的一些问题只能自己编写自定义组件或者nvue组件来解决，具体可以阅读[官方文档](uni-app官网

1.4 使用flex布局，如果嵌套了scroll-view，flex布局会失效

<view class="content">  
        <view class="fixed-item"></view>  
        <view class="flex-item">  
            <scroll-view></scroll-view>  
        </view>  
 </view>

.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    width: 100%;  
}  

.fixed-item {  
    width: 100%;  
    height: 100px;  
    background-color: #007AFF;  
}  
.flex-item {  
    flex: 1;     
}

1.5 原生端给组件设置margin无效，margin不会出现合并的情况（使用flex时）

原因未知

vue语法

2.1 在原生端App.vue没有vue的生命周期，但是有页面的生命周期，但是web端两者都存在

原因未知

2.2 vuex在原生端是不支持使用命名空间的，但是在web端是支持的

原因未知

2.3 $attrs无效

无

2.4 不支持vue-router

使用uni.navigateTo和uni.switchTab代替router.push方法实现页面跳转，uni.swtichTab在跳转tab页面时使用，但是不能再tab页面使用uni.redirectTo，不然跳转的目标页面也会出现底部tab栏

2.5 app端不支持v-slot传值

原因未知

2.6 v-for方法遍历数字时，web端从1开始，但是原生端从0开始

原因未知

2.7 原生端ref无法获取uni原生组件，web端可行

原因未知

2.8 onShow第一次触发时，$refs的内容为空

在this.$nextTick(() => {})中使用$refs

组件与接口

3.1 组件不可控，无法通过event修改组件的显示值（input、switch组件）

Web端可以通过$refs设置（switch通过$refs获取然后设置switchChecked的值），但原生端无法通过$refs获取组件无法使用这个方法实现

3.2 uni-request无法设置cookie

将cookie数据放在header字段中

3.3 监听subNVue的显示和隐藏

SubNVue无法监听显示和隐藏，显示可以在调用show时在回调函数中触发。可以通过下列方式监听：

const qrcode = uni.getSubNVueById(‘qr_code’)   
qrcode.addEventListener(‘hide’, () => {   
    console.log(‘hideQrCode’)   
})   
qrcode.addEventListener('show', () => {   
    console.log(‘showQrCode’)   
})

3.4 disableScroll: true无法禁止页面整体滚动

设置

“App-plus”: {  
    “bounce”: “none”  
}

3.5 使用subNVues,点击遮罩将无法关闭popup

style样式中的background不能设置为除transparent的其他值

3.6 CanvasContext.draw在App中无法执行回调函数

在vue页面中可以使用，在nvue中无法执行回调函数

3.7 修改导航栏

var wv = this.$mp.page.$getAppWebview();  
        wv.setStyle({    
            titleNView: {    
                “buttons”: [  
                {  
                  “fontSrc”: “/static/uni.ttf”,  
                  “fontSize”: “14”,  
                  “color”: “#FFFFFF”,  
                  “text”: `\ue333 ${address.city}`,  
                  "background": "rgba(0,0,0,0)”,  
                  "float": “left”,  
                  “width”: “96px”  
                }  
              ]  
            }    
        });

具体可以参考[官网](uni-app在App端动态修改原生导航栏 - DCloud问答