小程序阶段性总结

1.长列表性能优化

貌似没有什么好的办法，减少DOM节点的数量就是最好的办法了。
由于小程序没有追加写的功能，固定位置修改也不大好。

2. 瀑布流实现

css实现方式一般都是左边排完排右边。

css实现

js实现才是一般来说才是实际需求，实现方式比较笨，就是左右两列，计算左列和右列的高度，哪边小，加哪边。
需要注意的是：如果除过图片，也存在其它文字描述。记得要加上文字的高度，即该部分总体高度才是一个item 的高度，不要觉得文字高度固定，便可以忽略，在左右两列item差距较大时，这些固定高度变相差很大， 从而导致瀑布流差距较大。

3.小程序自定义右上角

image.png

第一次看到这个需求时，感觉这需求怎么提出来了，产品给我看了一个别人家的小程序实现了，然后就默默的去啃文档了， 一看，官网还真有。
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

自定义导航栏样式

然后通过 wx.getSystemInfo()来获取状态栏高度。但是这里有坑，因为获取了状态栏高度，还有一个内容高度，要保证你自定义的左上角和右上角的胶囊按钮保持持中，还需要探索一下。

wx.getSystemInfo({
            success: function (res) {
                that.globalData.deviceInfo = res;
                that.globalData.navHeight = res.statusBarHeight + 46;
                // 这个46有待商榷
            }
        });

需要注意的是自定义的设置是全局的，生效的是每一个页面，即每个页面都需要处理一下头部导航。

4. 十层路由限制

1.超出十层内全部重定向。
2.超出十层reLaunch一次。
3.自定义导航栏后重写返回和跳转指令，把路由路径存起来。

5. 事件绑定

冒泡事件和非冒泡事件
事件的捕获阶段，需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
传递参数 data-xxx,不支持驼峰，会自动转成小写

6. 取消搜索

取消搜索

7. scroll-view和下拉刷新的冲突

scroll-view 有自己的下拉刷新，可是整体的下来刷新走的是文档流，需要注意二者的区别。

8 .避免在 onPageScroll 中执行复杂逻辑或调用 setData

9.键盘推起input框在iOS下和fixed布局的冲突。

这里是死结，尽量从设计上绕过。

10. background-image 套用本地图片无效

在使用背景图片的时候用网络图片，就是用外链的形式，比如你将这张图片放到你的服务器，如：https://xxxx/xxx.jpg；

将背景图片使用编码base64进行转换，如：background-image: url("转换后得到的编码文本")，如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可。

使用 image 组件 + position 定位而不是使用 background-image 。

11. 4种弹窗

 wx.showModal({
            title: '写留言',
            content: '这是一个模态弹窗'
        });

模态弹窗

model

操作弹窗

wx.showActionSheet({
            itemList: ['A', 'B', 'C'],
            success (res) {
                console.log(res.tapIndex);
            },
            fail (res) {
                console.log(res.errMsg);
            }
        });

弹窗