初探uni-app框架踩坑

時間 2019-11-16

標籤初探 uni app 框架简体版

原文原文鏈接

近些天有接觸到uni-app框架，使用HBuilderX軟件進行編譯，能生成多端項目文件，如微信、百度、支付寶小程序及Android和ios端，記錄遇到的問題

1.條件編譯

我以爲比較突出的一點功能，就是這個條件編譯，指定對應的代碼執行在對應的一端

#ifdef：if defined 僅在某平臺存在
#ifndef：if not defined 除了某平臺均存在
如：只在微信小程序中才執行的代碼
// #ifdef MP-WEIXIN 
uni.getSystemInfo({
    success: res => {
        this.navHeight = `${res.statusBarHeight + 46}px`;
    }
});
// #endif

uni-app條件編譯
在pages.json中也可以有這樣的條件編譯

2.使用相機功能

在Android中，可以在跳轉頁面後直接調用api來使用相機，可是ios上就不行，跳轉後沒法調用相機

/* 調用相機代碼 */
uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['camera'],
    success: res => {
        const tempFilePaths = res.tempFilePaths[0];
    }
});

3.對於scroll-view中的scroll-into-view定位元素

scroll-into-view，值應爲某子元素id（id不能以數字開頭）。設置哪一個方向可滾動，則在哪一個方向滾動到該元素

在使用這個滾動到對應元素時，前端的渲染須要進行必定的延遲纔可以定位到對應的id前端

<scroll-view class="scrollView" scroll-with-animation scroll-x :scroll-into-view="'cate_'+scrollIntoCate">
    <view :id="'cate_'+item.id" v-for="item in cateList" :key="item">{{item.title}}</view>
</scroll-view>

/* 在js中 */
onLoad(options) {
    setTimeout(() => {
        this.scrollIntoCate = options.id;
    }, 400);
},
.scrollView{
    /* 如果橫向滾動定位，應設置寬度 */
    width: 100%;
    /* 如果豎向滾動定位，則應設置高度 */
    height: 100%;
}

若是你是豎向的滾動定位，則你必須設置高度，橫向定位的話，應該設置寬度，不然沒法定位元素

4.對於覆蓋在視頻上的文字

小程序端可以使用cover-view來進行覆蓋視頻，可是，App端暫不支持 cover-view、cover-image 組件之間的嵌套，使得在小程序上可以實現的佈局，app端則樣式錯亂
app端使用了原生子窗體subNav來實現覆蓋
使用後綴名爲nvue的文件vue
- px：以750寬的屏幕爲基準動態計算的長度單位，與vue頁面中的rpx理念相同。（必定要注意nvue裏的px，和vue裏的px邏輯不同）
- wx：與設備屏幕寬度無關的長度單位，與vue頁面中的px理念相同
- 使用nvue的注意點
在pages.json中進行subNav的配置

{
    "path": "pages/video/video",
    "style": {
        "app-plus": {
            /* 子窗體定位 */
            "subNVues":[{  
                "id": "videoChild",
                "path": "pages/video/index", 
                "style": {  
                    "position": "absolute",  
                    "left": "0px",
                    "bottom": "0px",
                    "width": "750px",
                    "height": "100px",
                    "background": "transparent"
                }  
            }]  
        }  
    }
}

將要設置子窗體的頁面放入同一個文件夾，在index.nvue中，文字的放置應該是在text中，在pages.json中也應寫死寬度，不能使用百分比，支持flex佈局，同時，在index.nvue中你要是想設置背景色，則應該使用background-colorios

subNVue 子窗體與 vue/nvue 頁面通訊

/* list.vue文件 */
this.$nextTick(() => {
    uni.$emit('children', Object);
})

/* index.nvue文件 */
<div class="shopInfo" id="videoChild">
    <text class="shopName">@{{shopname}}</text>
</div>


created() {
    uni.$on('children', (data) => {
        this.$nextTick(() => {
            console.log(data);
        })
    })
},
/* 在頁面銷燬前移除監聽事件 */
beforeDestroy(){
    uni.$off('children');
},

5.animation動畫

設置動畫造成不一樣效果，使用不一樣的動畫時間

<view class="listItem" v-for="item in imageList" :key="item.id">
    <image class="itemImg" :src="item.img" :style="{ animationDuration: item.index }"></image>
</view>


this.imageList.push(...res.data.result.list);
    for (let i = 0; i < this.imageList.length; i++) {
    if (!this.imageList[i].index) {
            this.imageList[i].index = parseInt(35 + Math.random() * (10 - 5)) + 's';
    }
}
.itemImg {
    width: 1000upx;
    height: 318upx;
    animation: imageMove linear infinite alternate;
}
@keyframes imageMove {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-30%);
    }
    100% {
        transform: translateX(0);
    }
}

6.指定每次分割數組的長度

開始的時候我想的有點多，想着每次指定分割長度後再進行操做，實際上只要直接操做就能夠了

let cateList = [];
this.cateLength = cateList.length;
let temporaryList = [];
if (cateList.length > 10) {
    for (let i = 0; i < cateList.length; i += 10) {
        let list = cateList.slice(i, 10 + i);
        temporaryList.push(list);
    }
    this.cateList = temporaryList;
}