微信小程序笔记，持续更新中...

1.微信小程序 view、text内英文数字不换行

设置word-break:break-all;

遇到场景：wxParser-plugin插件纯数字不换行，例如：123874962138462871946219346137463128946321647823462894612的

不论设置多宽，数字一行，‘的’一行

2.获取自定义组件为null：this.selectComponent('#id');

一定要在json的usingComponents里添加组件

3.在textare文本输入框频繁切换时，focus设置有时好使，有时不好使。

1.focus的true和false是成对出现的。设置了ture后，要有false。有时键盘的状态和focus状态对应不上，会造成不好使

2.在两个页面都需要键盘，在第二个页面跳转回第一个页面之前，要手动设置第二个页面的focus为false。不然第一个页面的键盘会出问题

this.setData({ focus:false });

wx.navigateBack({delta: 1 })

4.小程序内图片是webp格式，iOS不显示，尤其是wxparser中。

例如：https://mmbiz.qpic.cn/mmbiz_png/RKXPwqBsMlj0OonVtc0aHsKnYVwdr2muHeurgFKqPoW4xxDHGia3O4FTqkLiaB920ZoSktGFhh9BHCdcrrxDeYPg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

暴力方法：手动删掉webp

5.overflow: hidden有时不好使

设置display：block

6.flex row 中有image和view，image宽度不好使

image设置flex-shrink:0;

7.css设置2行，截取显示字符串

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

8.flex布局 space-between，最后一行左对齐

after伪元素item宽和其他一样，高为0进行占位

.container:after{
 content: ""; 
 width: 其他item宽度; 
 display: block; 
 height:0; 
}

9.z-index只能在position属性值为relative或absolute或fixed的元素上有效。

10. 1rpx的border在ios上显示不全

view外边添加一个warp_view,对view的after添加border

.border::after { 
  content: '';
  position: absolute;  /* 把父视图设置为relative，方便定位*/
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 40rpx;
  border: 2rpx solid #fff;
}

11.事件穿透给底层

style = "pointer-events: none"