小程序学习之旅-碎片

最近比较忙，活比较赶，先记录一些有用的东西，回头再整理吧

1 小程序wepy中Filter的使用

官方文档

可能会出现的问题
module "xxxxxx.wxs.js" is not defined 的官方issues

注：好像和 wepy-redux 的 @connect 兼容的不是很好。。。

2【坑】wepy.showModal() 回调无作用

3 微信小程序navigateTo到下一个页面之后，返回的时候如何带回参数？

页面栈，首先在页面A定义一个方法，然后在页面B中通过getCurrentPages 获取页面A的实例，再调用其方法直接进行更新数据。（注意页面A必须使用wx.navigateTo跳转到页面B，不能使用wx.redirectTo，这样会关闭上一个页面，导致页面B无法获取上一页Page实例。）

methods = {
      setAddress(data) {
        console.log('setAddress', data)
      },
}

methods = {
      confim() {
            this.getCurrentPages()[self.getCurrentPages().length - 2]
            .setAddress('aaaaaa');
      },
}

4 微信小程序怎么做出前端table的效果

<view class="container">
    <view class="table">
        <view class="tr">
            <view class="th">标题1</view>
            <view class="th">标题2</view>
            <view class="th">标题3</view>
            <view class="th">标题4</view>
            <view class="th">标题5</view>
        </view>
        <view class="tr" wx:for="{{5}}">
            <view class="td">{{内容}}</view>
            <view class="td">{{内容}}</view>
            <view class="td">{{内容}}</view>
            <view class="td">{{内容}}</view>
            <view class="td">{{内容}}</view>
        </view>
    </view>
</view>

.table {
　　border:1px solid #dadada;
　　border-right: 0;
　　border-bottom: 0;
　　width: 98%;
}
.tr {
　　width: 100%;
　　display: flex;
　　justify-content: space-between;
}
.th,.td {
　　padding: 10px;
　　border-bottom: 1px solid #dadada;
　　border-right: 1px solid #dadada;
　　text-align: center;
　　width:100%
}
.th {
　　font-weight: 400;
　　background-color: #dadada
}

5 wepy-redux 在组件中发 action => reducers 去修改state，页面数据不刷新

我在 page 中用 connect 绑定了state 里的一个 list ，然后在子组件中提交了一个 action => reducers 去给 list 添加一个item，然后page 中的 state 没有变。
但是我把提交 action => reducers 的逻辑提到 page ，这个问题就没有了。

6 wepy图片上传cdn的plugin

7【坑】报错找不到 _wepylog.js

重启！！！把相关的都关掉重启一下试试！！！

8 rich-text富文本里头的图片怎么宽度自适应？

nodeText = rich_resource.(/<img/gi, '<img style="display:block;max-width:100%;height:auto"');

将 rich-text 的数据源替换一下，所有的 img 加一个 style

9【坑】hidden不生效

image[hidden] {
display:none;
}

小程序里 hidden 的原理是这样的，所以不要控制要隐藏的元素的 display，或者自己写新的 class 也行

10 浮层盖不住 input 组件（原生组件）

其实是这个问题其实是盖不住原生组件
原生组件有这些：
camera canvas input live-player live-pusher map textarea video
解决的办法也比较简单，给需要覆盖时，给原生组件设置上 z-index:-1 就可以了