微信小程序中莫名其妙的坑及解决方法

1.view不能自动换行问题

<!-- 纯数字 -->
<view>1594939392015949393920159392015920159392015920159392</view>
<view style="height:60rpx"></view>

<!-- 纯英文 -->
<view>sdfsgdhsdfgjhgrdfhvretfghjkmlxrdfretfghjkmlxrdflxrdf</view>
<view style="height:60rpx"></view>

<!-- 纯中文 -->
<view>说过的话俯瞰风景规范化刚刚东风风神大公会个百分点怪不得发</view>
<view style="height:60rpx"></view>

<!-- 中文数字 -->
<view>说过的话俯瞰风景规范化1594939392015949312342134234234</view>
<view style="height:60rpx"></view>

<!-- 中文英文数字混合 -->
<view>说过的话俯瞰风景规范化1594939392015949312342134234234vasgdhfdffgnbdsdfghsetger</view>
<view style="height:60rpx"></view>

普普通通的代码,没任何样式, 展示的样子

解决方法:
加上这个样式, 注:适用于纯文本

.word-break{
  word-break: break-all
}

2.ios文本两端对齐问题

在一些表单中可能需要表单项名称两端对齐

  text-align: justify;
  text-align-last: justify; 

在开发者工具中, 以上的确实可以, 可在真机中就没用了…坑爹啊

解决方法:

.title{
  text-align: justify;
  width:140rpx;
  height: 30rpx; // 定高不加高度会变
}
.title::after{
  width: 100%;
  display: inline-block;
  content: '';
}

3.textarea组件层级过高, 浮在遮罩层之上了

由于textarea是原生组件,其他元素z-index改再大也盖不住这个组件,咋整?这边看到2个思路
1.cover-view和 cover-image覆盖其上(官方推荐, 不能满足所有场景, 只能嵌套固定几个组件)
2. 做2个, 一个用来编辑, 一个用来展示, 用wx:if来切换编辑和展示时具体渲染哪个组件