目录
1.2.预览图片wx.previewImage() 点击始终显示第一张图片
3.2. scroll-view锚点定位scroll-into-view属性失效
3.3.微信小程序,引入weapp组件库Popup组件里嵌套自定义组件时,关闭Popup,再次点击不生效
6.2.[“usingComponents“][“component1“]:“xxx“
1. 微信小程序Api使用
1.1路由跳转方式wx.redirectTo()和wx.navigateTo()有时会失效
wx.redirectTo()只是关闭当前页面,跳转到某个页面,会叠加图层,跳转页面次数太多可能找不到图层(官方没有明确说明上限是多少,查资料显示一般在4/5层之后失效)。
wx.navigateTo(),可以配合返回上一页api,保留当前图层,再跳转某个页面(文档说明上限是10层)。
wx.reLaunch()关闭所有页面,打开新的页面。
按需求将部分路由api更换为wx.reLaunch(),避免图层叠加过多而失效。
1.2.预览图片wx.previewImage() 点击始终显示第一张图片
使用时的几个问题:
1、每次预览后页面会刷新,产生数据叠加;
问题原因:api自动触发onShow,如果当前页面接口请求用的push方法去处理的返回来的数据,那么在预览图片后,就会不断往缓存中添加新的一组数据。
解决方案:
(1)每次请求前先清除一下数据(最好就不要在当前页面做push方法的数据处理);
(2)页面既有逻辑太多怕清错,添加一个变量控制是否要请求接口,点击图片时禁止调取接口。
2、假设有两张图片,点击预览第二张图片时,图片永远显示第一张。
不算是坑,检查后发现是页面并没有取值到对应的index,所以不能直接使用 current: this.data.imgUrl[e.target.dataset.index],需要在页面中点击图片的位置(而不是for循环的位置)绑定 data-index="{{index}}"。
wx.previewImage({
current: this.data.imgList[index],
urls: this.data.imgList
})
2.域名配置相关问题
2.1.wx.downloadFile()加载图片不显示
具体表现场景:
图片占位且一直刷新。
解决方案:
本地开发的时候会生效,是因为勾选了“不校验合法域名的选项”,但微信上传测试环境后,HTTPS 请求就需要配置合法域名,上传wx.uploadFile()和下载wx.downloadFile()网络请求也是一样的。
在微信开发者工具检查是否配置合法域名,如未配置,登陆微信小程序后台【开发】--【开发管理】--【开发设置】--【服务器域名】进行配置。
3.组件样式&属性不一致/失效
3.1.微信小程序picker组件,不同系统样式不一致
左为安卓样式,右为ios样式。
解决方案:
业务要求需要以左侧为准,样式得统一,可以将小程序组件更换为vant weapp组件库popup +picker组合使用。
<van-popup show="{{ showReason }}" bind:close="onCloseReason" position="bottom" round>
<van-picker columns="{{ reasonArray }}" bind:confirm="bindPickerChange" default-index="{{ index }}" custom-class="index font" title="标题名称 " show-toolbar value-key="reasonName" bind:cancel="onCloseReason" visible-item-count="5" active-class="choiceReason" />
</van-popup>
3.2. scroll-view锚点定位scroll-into-view属性失效
使用时的几个问题:
1、将scroll-view放在父组件中,滚动区内容单独封装在子组件中,scroll-into-view不定位。
解决方案:将scroll-view标签从父组件移入到子组件,页面可定位。
2、解决第一个问题后,从a页面进入b页面,在b页面也需要锚点定位,但是定位的位置不准确,始终偏上。
检查思路及解决方案:
(1)检查封装的子组件中子元素是否有flex布局,scroll-view默认不支持,需开启,或者将子元素弹性盒属性变更为浮动属性(第二个办法多少有点傻,但浏览帖子有人scroll-view不生效也不知道为啥,还只能改用float);
(2)scroll-view的父级元素无高度时,scroll-view不能使用height:100%,要使用固定高度;
(3)不同手机屏幕高度不同,动态获取手机高度后计算赋值,再将值传给子组件;
// 在onLoad周期获取视口高度
wx.getSystemInfo({
success: (res) => {
// 获取可使用窗口宽度
let clientHeight = res.windowHeight;
// 获取可使用窗口高度
let clientWidth = res.windowWidth;
// 算出比例
let ratio = 750 / clientWidth;
// 算出高度(单位rpx) - 固定元素的高度滚动区高度
let height = clientHeight * ratio – 父组件页面其他元素高度;
this.setData({
height: height,
})
}
});
(4)获取a页面定位元素的生命周期(onLoad)在接口调用(onShow)之前,数据未完全渲染就已经开始定位,所以产生偏差。
可以将请求挪到onLoad中 + 定时器同时使用,双重保险。
onLoad(options) {
//请求接口的方法
//开启定时器
setTimeout(() => {
//接收a页面传来的id名称,进行锚点定位
if (!!options.toView) {
that.setData({
toView: options.toView
})
}
}, 50)
}
纵向滚动时,.wxml中写入以下属性就好。
<scroll-view style="height: {{height}}rpx;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true">
3.3.微信小程序,引入weapp组件库Popup组件里嵌套自定义组件时,关闭Popup,再次点击不生效
业务场景:由于对弹窗样式有要求,所以没有使用官方提供的wx.showModal(),而是使用Popup封装的弹窗组件。在点击页面按钮弹出弹窗组件,关闭后再次点击按钮,点击事件没有被触发,弹窗不弹出。
问题原因:嵌套的自定子组件虽然也跟随Popup关闭,但留在了原位,遮挡了按钮操作。
解决方案:去掉Popup自定义样式中的flex元素,将其移入自定义组件中设置,只保留基础的宽高背景色属性。
3.4.live-play 组件 bindnetstatus、bindstatechange不生效
真机模式预览,本地开发工具是个废材。另外示例代码中,binderror不管是真机还是开发工具,都不生效,可以放弃使用了。
4.Js报错
5.生命周期相关问题
5.1.初次进入小程序,底部tabbar权限展示错误
业务场景:自定义子组件tabbar权限初次登录本地存储登录信息,进入首页时,展示为未登录首页权限,推出小程序前台再次进入小程序时,才显示正确。
问题原因:判断权限使用的生命周期错误。tabbar权限判断放在了(attached)周期中,会早于index页父组件(onShow)前触发。也就是说,权限信息还没获取到,权限判断就已经开始了,所以页面显示错误。
解决方法:将attached(在组件实例进入页面节点树时执行)修改为ready(在组件在视图层布局完成后执行),这时父组件已经拿到权限判断的数据,之后执行子组件的判断,数据正确。
6.其他问题
6.1.input获取焦点时页面内容会被上推
业务场景:
1、微信小程序,自定义地图搜索,顶部按钮使用绝对定位和粘性定位不生效,输入框输入文字时按钮会被顶出屏幕。
问题原因:input获取焦点弹出键盘时,默认自动上推页面。
解决方法:
1、组件设置 adjust-position=“{{false}}” ,键盘弹起时,禁止自动上推页面。
2、设置1后,输入框在获取焦点时,可能会被弹出的键盘覆盖,看不到输入的内容。需要同时给input设置动态style=” padding-bottom :{{pb }}rpx” ,<input/>绑定 bindfocus(获取焦点)和bindblur(失去焦点),当触发焦点键盘抬起时,赋值为当前键盘高度;键盘关闭赋值为0。
//触发input焦点时,动态赋值padding-bottom高度
keyBoardOnFun(e) {
console.log(e.detail.height)
if (e.detail.height) {
this.setData({
paddingBottom: (e.detail.height * 2 - 500) * 2.5 // -500 *2.5 操作为漏出输入框dom
})
}
},
//失去input焦点时,动态修改padding-bottom为0
keyBoardCloceFun(e) {
this.setData({
paddingBottom: 0
})
},
6.2.[“usingComponents“][“component1“]:“xxx“
启动小程序控制台直接报错:
微信小程序无法找到组件的问题 [“usingComponents“][“component1“]:“xxx“未找到
解决方法:把子组件移出来,编译一下,再把子组件移进去,重新点击编译……