微信小程序开发遇到的bug及填坑-CSDN博客

转发功能：

1.获取更多转发信息

通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息，例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket为 true ，当用户将小程序转发到任一群聊之后，此转发卡片在群聊中被其他用户打开时，可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket。通过调用 wx.getShareInfo() 接口传入此 shareTicket 可以获取到转发信息。

2.页面内发起转发

基础库 1.2.0 开始支持，低版本需做兼容处理。

通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage 事件， 如果当前页面没有定义此事件，则点击后无效果。

//wxml
<button open-type="share" hover-class="none">
    <image src="../../images/forward-show.png"></images>
</button>
//js
onShareAppMessage:function(res) {
    if(res.from === "button") {
        //来自页面内的转发
        console.log(res.target,res);
    }
    return {
        title:'', //分享标题
        path:'',  //当前分享页面路径
        imageUrl:''  //分享图片
    }
}复制代码

需求1：当网络慢时数据还没请求回来时默认使用占位图,数据加载回来后使用数据中的图片，图片要实现能左滑

<scroll-view class="scroll_view" scroll-x="{{true}}" wx:if="{{FineWorks.length > 0}}">            <view style="width: {{windowWidth}}">                <block wx:if="{{FineWorks}}" wx:for="{{FineWorks}}" wx:key="index">                    <navigator class="big_img" url="../details/details?comic_id={{item.extra.comic_id}}">                        <image mode="aspectFill" lazy-load="true" src="../../images/hcover.png" style="position: relative;top: 0;left: 0;">                            <image mode="scaleToFill" lazy-load="true" src="{{item.image_ext_url}}"                                   style="position: absolute;left: 0;top: 0;z-index: 1;"></image>                        </image>                        <view class="word_info">                            <text class="name_name">{{item.extra.name}}</text>                            <text class="name_info">{{item.extra.watching_focus}}</text>                        </view>                    </navigator>                </block>            </view> </scroll-view>复制代码

这样会出现一个问题：从左向右滑动时这块内容会出现抖动问题，原因：是占位图加了相对定位，滑动时默认占位图（纯白色）也在滑动误以为是页面内容抖动

解决方法：相对定位要加在外层父级上

<scroll-view class="scroll_view" scroll-x="{{true}}" wx:if="{{FineWorks.length > 0}}">            <view style="width: {{windowWidth}}">                <block wx:if="{{FineWorks}}" wx:for="{{FineWorks}}" wx:key="index">                    <navigator class="big_img" url="../details/details?comic_id={{item.extra.comic_id}}"                               style="position: relative;top: 0;left: 0;">                        <image mode="aspectFill" lazy-load="true" src="../../images/hcover.png">                            <image mode="scaleToFill" lazy-load="true" src="{{item.image_ext_url}}"                                   style="position: absolute;left: 0;top: 0;z-index: 1;"></image>                        </image>                        <view class="word_info">                            <text class="name_name">{{item.extra.name}}</text>                            <text class="name_info">{{item.extra.watching_focus}}</text>                        </view>                    </navigator>                </block>            </view></scroll-view>复制代码

需求2：首页顶部搜索框一直在顶部页面没有滚动时背景色为透明，页面发生滚动时搜索框背景色为白色

//滚动条滚动后触发js

 //js
scroll: function(e) {        var that = this;        var scrollTop = e.detail.scrollTop;        if (scrollTop >67){            this.setData({                isScrollSearch:true            })        }        if (scrollTop === 0){            this.setData({                isScrollSearch:false            })        }    },    <!--search搜索-->    <view class="{{isOpacity? 'search_view_show':'search_view'}}" style="{{isScrollSearch === true && isOpacity === false? 'background:#fff;opacity:0.95;':''}}">        <view class="search_img">            <image class="search_images" src="../../images/search_gray.png"></image>            <input class="search_input" type="text" cursor-spacing="3px" value="{{inputValue}}" placeholder="搜索作品或作者名称" placeholder-style="color:#fff;"                   bindfocus="focusInputEvent" bindinput="bindInputChange"/>            <image class="{{isOpacity === true && searchList.length !== 0? 'del':'del_hidden'}}"                   src="../../images/delete.png" catchtap="onDel"></image>            <view class="{{isOpacity?'qx_view':'qx_view_hidden'}}}" catchtap="onCancel">取消</view>            <block wx:if="{{boyid}}">                <image class="{{isOpacity || id !== 0? 'boy_img_hidden':'boy_img'}}" data-index="{{boyid}}"                       src="../../images/boy.png" catchtap="onToastTap" data-id="{{id}}"></image>                <image class="{{id === 0 || isOpacity === true ? 'girl_img_hidden':'girl_img'}}" data-index="{{girlid}}"                       src="../../images/girl.png" catchtap="onToastTap" data-id="{{id}}"></image>            </block>            <block wx:elif="{{girlid}}">                <image class="{{isOpacity || idg !== 1? 'girl_img_hidden':'girl_img'}}" data-index="{{girlid}}"                       src="../../images/girl.png" catchtap="onToastTap02" data-id="{{idg}}"></image>                <image class="{{idg === 1 || isOpacity === true? 'boy_img_hidden':'boy_img'}}" data-index="{{boyid}}"                       src="../../images/boy.png" catchtap="onToastTap02" data-id="{{idg}}"></image>            </block>        </view>    </view><scroll-view class="content_view" scroll-y="{{isScroll}}" bindscroll="scroll">//banner//content</scroll-view>复制代码

这样会出现一个问题：在安卓机器上滚动页面时页面会出现抖动问题，原因：scroll-view嵌套+bindscroll="scroll" 获取滚动高度改变搜索框背景色的原因

解决方法：不用scroll-view嵌套和不用bindscroll事件，就是重新设计搜索框。直接置顶用一种背景色，或者跟随页面滚动而滚动

需求3：搜索框聚焦输入文字删除图标出现并可以删除input框中的内容，搜索框中的文字删除后对应的搜索结果也一并清除。

删除图标通过定位到input上，在小程序中input的层级最高，点击删除图标光标聚焦到input里， 有穿透，内容删除不了。

解决方法：

在input搜索框和删除图标外包层父元素，公共样式写在父元素上，input占左边，删除图标占右边。

//wxml:<view class="search_img"style="{{isOpacity === true? 'background:rgba(245,245,245,1);border-radius: 30rpx;-webkit-border-radius: 30rpx;-moz-border-radius: 30rpx;-mz-border-radius: 30rpx;':''}}"> <image class="search_images" src="{{isOpacity === true ? '../../images/search_gray_02.png':'../../images/search_gray.png'}}"></image> <input class="{{isOpacity === true?'search_input_focus':'search_input'}}" type="text" value="{{inputValue}}"                 placeholder="搜索作品或作者名称" placeholder-style="color:#fff;font-size:28rpx;"                   bindfocus="focusInputEvent" bindinput="bindInputChange"/>  <image class="{{isOpacity === true && searchList.length !== 0 || noSearch === false? 'del':'del_hidden'}}"                           src="../../images/delete.png"></image>     <view class="{{isOpacity === true && searchList.length !== 0 || noSearch === false? 'bg_del':'bg_del_hidden'}}"                          catchtap="onDel"></view>      <!--删除事件不放在删除图标的原因是图标太小不好点击，需要加大点击面积-->   </view>//wxss:.search_img {  width: 540rpx;  height: 56rpx;  margin-left: 30rpx;  display: inline-block;  margin-top: 16rpx;}.search_img .del {  width: 30rpx;  height: 30rpx;  position:absolute;  top:0;  right:27%;  margin-top:28rpx;  z-index: 99;}.search_img .bg_del {    width: 60rpx;    height: 40rpx;    position:absolute;    top:0;    right:27%;    margin-top:28rpx;    z-index: 99;}.search_img .bg_del_hidden {    width: 60rpx;    height: 40rpx;    position:absolute;    top:0;    right:27%;    margin-top:28rpx;    z-index: 99;    display: none;}.search_img .del_hidden {    width: 30rpx;    height: 30rpx;    position:absolute;    top:0;    right:27%;    margin-top:28rpx;    z-index: 99;    display: none;}.search_img .search_images {  width: 40rpx;  height: 40rpx;  position:absolute;  left:41rpx;  top:24rpx;  z-index: 99;}.search_input {  height: 56rpx;  -webkit-border-radius: 30rpx;  -moz-border-radius: 30rpx;  -mz-border-radius: 30rpx;  border-radius: 30rpx;  padding-left: 52rpx;  color: #fff;  font-size: 28rpx;  margin-bottom: 16rpx;  background:rgba(0,0,0,1);  opacity:0.2;  vertical-align: top;}.search_input_focus{    width: 400rpx;    height: 56rpx;    -webkit-border-radius: 30rpx;    -moz-border-radius: 30rpx;    -mz-border-radius: 30rpx;    border-radius: 30rpx;    padding-left: 52rpx;    color: #333;    font-size: 28rpx;    margin-bottom: 16rpx;    background:rgba(245,245,245,1);    vertical-align: top;}复制代码

需求4:在input搜索框中输入内容后点击删除图标删除内容

出现的问题：点击删除图标内容并没有删除，光标聚焦到input上，因为input的层级最高，所以点击事件不起作用

解决方法：input框占据大部分宽度，删除图标占小部分宽度，删除图标不定位在input框位置之上。

//wxml:<view class="search_input">    <view class="search_img">        <image class="search_images" src="../../images/search_gray_02.png"></image>        <input class="input_input" type="text" placeholder="搜索作品或作者名称" value="{{word}}"               placeholder-style="color:#ccc;font-size:28rpx;" focus="{{focus}}"                bindinput="bindInputChange"/>        <block wx:if="{{word!==''}}">            <image class="del"                   src="../../images/del.png"></image>            <view class="bg_del"                  catchtap="onDel"></view>        </block>        <block wx:if="{{word ===''}}">            <image class="del_hidden"                   src="../../images/del.png"></image>            <view class="{{word? 'bg_del':'bg_del_hidden'}}"                  catchtap="onDel"></view>        </block>        <view class="qx_view" catchtap="onCancel">取消</view>    </view></view>//wxss:.search_input {  width: 100%;  height: 88rpx;  position: fixed;  top: 0;  z-index: 99;  left: 0;  right: 0;  background: #ffffff;  border-bottom: 1rpx solid #E6E6E6;}.search_img {  width: 592rpx;  height: 56rpx;  margin-left: 30rpx;  display: inline-block;  margin-top: 16rpx;  background: #f5f5f5;  border-radius: 30rpx;  -webkit-border-radius: 30rpx;  -moz-border-radius: 30rpx;  -mz-border-radius: 30rpx;}.search_img .search_images {  width: 40rpx;  height: 40rpx;  position: absolute;  left: 41rpx;  top: 24rpx;  z-index: 99;}.search_img .input_input {  width: 450rpx;  height: 56rpx;  padding-left: 52rpx;  color: #333;  font-size: 28rpx;}.search_img .del {  width: 30rpx;  height: 30rpx;  position: absolute;  top: 0;  right: 20%;  margin-top: 28rpx;  z-index: 99;}.search_img .bg_del {  width: 70rpx;  height: 46rpx;  position: absolute;  top: 0;  right: 19%;  margin-top: 28rpx;  z-index: 99;}.search_img .bg_del_hidden {  width: 70rpx;  height: 46rpx;  position: absolute;  top: 0;  right: 19%;  margin-top: 28rpx;  z-index: 99;  display: none;}.search_img .del_hidden {  width: 30rpx;  height: 30rpx;  position: absolute;  top: 0;  right: 20%;  margin-top: 28rpx;  z-index: 99;  display: none;}复制代码