小程序踩坑记录--持续更新

1、微信小程序input输入框清除控件

很常见的场景，需要在输入框后面增加一个按钮，清除输入的内容。
通常来说，写法都是写个按钮，定位在输入框的最右边

<view class="flex_r alc justify_between">
    <view>
        <input type="text" model:value="{{ keyWords }}"></input>
        <!-- 定位放在最右边 -->
        <view class="clear_text" wx:if="{{ keyWords  }}"></view>
    </view>
    <button>搜索</button>
</view>

然而在模拟器上面百试百灵，到了真机上，各种不起作用,点击时灵时不领
关键还影响键盘的抬起收起，非常的不银性。问题很大

改造

思路：将输入框与清除控件分开，运用flex布局，输入框与清除控件无缝衔接，动态控制清楚控件的显隐，动态设置border-radius值（样式）
例：

<view class="flex_r alc justify_between">
    <view class="flex_r alc justify_between">
        <input class="flex1 {{ keyWords ? ' borderRadiusType2' : ' borderRadiusType1' }}" type="text" model:value="{{ keyWords }}"></input>
        <view class="clear_text" wx:if="{{ keyWords  }}"></view>
    </view>
    <button>搜索</button>
</view>

输入框与删除控件在同一行，设置输入框flex: 1;
清除控件的高度与输入框的高度一致
输入框没有内容时，清除控件隐藏，输入框自动占满父元素宽度100%
输入框有内容时，清除控件显示，输入框占除去清除控件剩余的100%，设置border-radius: 8rpx 0 0 8rpx;右边无边框，跟清除控件完美拼接。

左边输入框，右边动态显隐的清除控件

2、showShareImageMenu分享图片给微信好友，非图片预览长按

其实很简单，但是可能很多人不知道这个API，我就开始不知道 emmmm~~~

wx.showShareImageMenu({
  path: '/images/newIndex4.png',
  complete: () => {}
})

3、input输入框穿透

经常会遇到，输入框的内容会穿透到跟它毫无干系的元素上方，如上图的右边

只需给input加个css z-index: 1; 别的标签层级比它高就行。

4、border在ios端显示不完善问题

解决方案1
----控制外元素大小问题，个人感觉麻烦
----别人的方法，作者: KevyTian，来源csdn
解决方案2
----1rpx 改为1px，简单，不用算计那么多

5、输入框的键盘抬起问题

问题描述: 经常出现，输入框的键盘跳来跳去，键盘抬起时又落下
解决方案: ----设置550毫秒的延时
例：
wxml

<view class="searchView">
					<input class="search-input" placeholder="请输入你想搜索的内容" 
					focus="{{ focus }}" value="{{ searchValue }}" bindinput="searchChange" name="word" ></input>
					<view class="clearView" hidden="{{ !searchValue }}"><view class="clear" catchtap="clearVal"></view></view>
				</view>

var that = this
setTimeout(() => {
    that.setData({
        focus: true
    })
}, 550)

5、css兼容问题

问题描述: scale: 1;
在安卓设备 不起作用

解决： 使用 transform: scale(5);

-------未完待续，还有些一时想不起来-------
很多坑爹的bug官方都不带管的，没人吱声。O(∩_∩)O哈哈~