uni-app使用总结

本文主要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不会出现合并的情况

原因未知

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问答

其他

在原生端不同平台也会存在差异。
针对很多比较奇怪的问题可以选择重新编译。