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

最近做小程序，实在不想做。然后来吐槽下小程序的坑吧。也只做了这一个项目，有不对的地方请指正见谅。

一、
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方面

不支持伪类。。

待补充。。。。。