微信小程序技巧与踩坑（持续更新）

记录开发小程序过程中的一些相对冷门的技巧和踩坑，持续更新中

用户资料

1. 单纯显示微信用户的名字头像可以不需要用户授权，提高用户体验，使用open-data即可，限制：样式比较局限，和一般的view或text有所不同，而且其内不能放其他标签，会显示不出来open-data文档
   举个栗子：
   

// wxml
 <view class="headerWrapper">
        <open-data class='avator' type="userAvatarUrl"></open-data>
        <view class='blur'></view>
        <view class="userWrapper">
            <open-data class='userAvatarUrl' style="border-radius:50%;display:block;" type="userAvatarUrl"></open-data>
            <open-data class="userNickName" type="userNickName"></open-data>
        </view>
    </view>

// wxss
.headerWrapper {
    height: 365rpx;
    border-bottom: 1px solid #ddd;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.avator {
    position: absolute;
    width: 100%;
    text-align: center;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

.blur {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .8);
    height: 100%;
    width: 100%;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    z-index: 98;
}

WXML中toFixed保留小数点后2位（WXML中使用较复杂语法）

1、 新建一个filter.wxs

var filters = {
    toFix: function (value) {
        console.log('转换2位小数')
        return value.toFixed(2)//此处2为保留两位小数，保留几位小数，这里写几
    }
}
module.exports = {
    toFix: filters.toFix,
    toNumber: filters.toNumber,
}

2、 WXML中引入WXS

<wxs module="filters" src="../../utils/filters.wxs"></wxs>

3、 WXML中使用

<text>
 {{ filters.toFix(price) }}
</text>

icon与文字水平对齐的方法

给icon套一个view，对外层view的高度设置要与其对齐的文字的font-size相同的值即可(rpx)