小計最近踏的微信小程序的坑

最近做小程序，實在不想做。然後來吐槽下小程序的坑吧。也只做了這一個項目，有不對的地方請指正見諒。

一、
tabbar

app.json裏配置tabbar是原生層的，所以要實現比價奇怪的tabbar只有自己用view寫了，比如：

這樣選中的按鈕圖標都超出了tabbar 的高度，只有的就自己定義一個組件吧

<template name="tabbar">
    <view class="tabbar_box">
        <block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">
            <!-- 選中 -->
            <navigator class="tabbar_nav" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" 
                open-type="switchTab" wx:if="{{item.selected}}">
                <image class="tabbar_icon_on" src="{{item.selectedIconPath}}"></image>
            </navigator>
            <navigator class="tabbar_nav" url="{{item.pagePath}}" style="color:{{tabbar.color}}" open-type="redirect" wx:else>
                <image class="tabbar_icon" src="{{item.iconPath}}"></image>
                <text class="tabbar_text">{{item.text}}</text>
            </navigator>
        </block>
    </view>
</template>

js呢 就定義到app.js

editTabBar: function () {
        var tabbar = this.globalData.tabbar,
            currentPages = getCurrentPages(),
            _this = currentPages[currentPages.length - 1],
            pagePath = _this.__route__;
        (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
        for (var i in tabbar.list) {
            tabbar.list[i].selected = false;
            (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
        }
        _this.setData({
            tabbar: tabbar
        });
    },
    globalData: {
        userInfo: null,
        tabbar: {
            list: [{
                pagePath: "/pages/index/index",
                iconPath: "",
                selectedIconPath: "",
                text: "test"
            },
            .........],
        }
    }

然後再對應頁面裏調用

 onLoad: function () {
        //tabbar
        app.editTabBar();
    }

再說個在app.json裏配置 custom

"window":{
        "navigationStyle": "custom"
    },

屏幕高度就是整個手機屏幕的高度了，看看編輯器顯示佈局信息，但是右邊線程序的退出按鈕不會消失，設計時必須注意啊，不要有按鈕在右邊！！！會重疊遮擋

二、cover-view
如果調用了原生層，原生層有哪些·····map、video、canvas、camera， 想在上面佈局就只有用cover-view、cover-image，
這兩個玩意兒不支持的東西太多了，overflow，zindex不支持，touch事件不支持，具體的不支持去官網看吧。
然後你想想，當map或者vido作爲全屏背景時，需要在上面實現其他元素佈局也是蛋疼的

 <cover-view class="red"></cover-vie>
 <cover-view class="blue"></cover-view>

如上，正常html順序 red是紅色框裏的，blue是藍色框裏的。圈出來有重疊對吧，都是absolute定位。但是問題出在紅色框重疊區域不能點擊了，因爲藍色遮住了，所以換一個

 <cover-view class="blue"></cover-view>
 <cover-view class="red"></cover-vie>

這樣整個紅色框按鈕就都能點擊了。
cover-view設置固定高寬，裏面的元素要是超過cover-view即使absolute 一樣被隱藏。

三、父子組件
子組件通過data 接受父組件數據

<view class="container">
    <import src="../com/son/index.wxml"/>
    <template is="son" data="{{data: 'fuck', aa: '231', event: 'click'}}"/>
</view >

如上事件傳遞也是這樣，子組件不能再裏面自己定義事件，只能通過父組件傳遞過去。

四、點擊事件獲取數據

<cover-view bindtap="click('sadas')"></cover-view>

想這麼傳遞數據是不行的， 那就用dataset咯

<cover-view data-aa="sadas" bindtap="click" ></cover-view>

click(event) {
        let tab = event.currentTarget.dataset.aa;
},

五、css方面

不支持僞類。。

待補充。。。。。