微信小程序开发遇到的bug及填坑

转发功能：

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;}复制代码

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

6.swiper组件：

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

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

微信小程序开发遇到的bug及填坑相关推荐

[转]微信小程序开发需要注意的29个坑
原文地址:https://www.cnblogs.com/tuyile006/p/6269231.html 1.小程序名称可以由中文.数字.英文.长度在3-20个字符之间,一个中文字等于2个字符. 2 ...
微信小程序开发需要注意的29个坑
1.小程序名称可以由中文.数字.英文.长度在3-20个字符之间,一个中文字等于2个字符. 2.小程序名称不得与公众平台已有的订阅号.服务号重复.如提示重名,请更换名称进行设置. 3.小程序名称在帐号信 ...
两百条微信小程序开发跳坑指南（不定时更新）
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序联盟出品跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一 ...
HBuilderX和微信小程序开发避坑
Unexpected token语法错误笔者认为是HBuilderX自己的一些小bug 有时候HbuilderX会给你来个,定位定到姥姥家的--语法错误,它给你定到一个与错误八竿子打不着的地方,如下 ...
微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
微信小程序用户未授权bug解决方法，微信小程序获取用户信息失败解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: bug示例图: 导致这个bug的原因是 wx.getUserInfo(OBJECT) 接口做了调整: ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序开发分析总结
本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法.毕 ...
微信小程序开发总结与心得(一)
Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 0 前言最近的工作重心一直在小 ...

微信小程序开发遇到的bug及填坑

微信小程序开发遇到的bug及填坑相关推荐

最新文章

热门文章