微信小程序开发遇到的bug及填坑-白红宇

转发功能：

1.获取更多转发信息

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

2.页面内发起转发

基础库 1.2.0 开始支持，低版本需做。

通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发事件，

如果当前页面没有定义此事件，则点击后无效果。

//wxml//jsonShareAppMessage:function(res) {    if(res.from === "button") {        //来自页面内的转发        console.log(res.target,res);    }    return {        title:'', //分享标题        path:'',  //当前分享页面路径        imageUrl:''  //分享图片    }}复制代码

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


                 
                      
                           
                                
                                     
                                                         
                                     
          
           { {item.extra.name}}
                                      
          
           { {item.extra.watching_focus}}
                                  
                             
                        
                   
       
     复制代码

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

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


                
                     
                          
                               
                                    
                                                        
                                    
         
          { {item.extra.name}}
                                     
         
          { {item.extra.watching_focus}}
                                 
                            
                       
                  
     
    复制代码

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

//滚动条滚动后触发js

//jsscroll: function(e) {        var that = this;        var scrollTop = e.detail.scrollTop;        if (scrollTop >67){            this.setData({                isScrollSearch:true            })        }        if (scrollTop === 0){            this.setData({                isScrollSearch:false            })        }    },    
        
            
                 
                  
                  
                  
      
       取消
                  
                      
                       
                   
                  
                      
                       
                   
              
         
    
    
     //banner//content
    复制代码

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

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

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

删除图标通过定位到input上，在小程序中input的层级最高，点击删除图标光标聚焦到input里，

有穿透，内容删除不了。

解决方法：

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

//wxml:
     
      
       
          
           
        
    //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:
        
             
              
              
                  
                   
               
              
                  
                   
               
              
      
       取消
          
     
    //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;}复制代码

5.scroll-view组件：使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

6.swiper组件：

如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

注意：如果不加判断既有滑动事件又有点击事件会一次请求两回接口