微信小程序开发报错及解决记录
目录
1. 微信小程序Api使用
1.1.路由跳转方式wx.redirectTo()和wx.navigateTo()有时会失效
1.2.预览图片wx.previewImage() 点击始终显示第一张图片
2.域名配置相关问题
2.1.wx.downloadFile()加载图片不显示
3.组件样式&属性不一致/失效
3.1.微信小程序picker组件,不同系统样式不一致
3.2. scroll-view锚点定位scroll-into-view属性失效
3.3.微信小程序,引入weapp组件库Popup组件里嵌套自定义组件时,关闭Popup,再次点击不生效
4.Js报错
5.生命周期相关问题
5.1.初次进入小程序,底部tabbar权限展示错误
6.其他问题
6.1.input获取焦点时页面内容会被上推
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元素,将其移入自定义组件中设置,只保留基础的宽高背景色属性。
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为0keyBoardCloceFun(e) {this.setData({paddingBottom: 0})},
6.2.[“usingComponents“][“component1“]:“xxx“
启动小程序控制台直接报错:
微信小程序无法找到组件的问题 [“usingComponents“][“component1“]:“xxx“未找到
解决方法:把子组件移出来,编译一下,再把子组件移进去,重新点击编译……
微信小程序开发报错及解决记录相关推荐
- 微信小程序开发报错:page is not constructed because it is not found
今天上课做练习时发生了"page is not constructed because it is not found"和上面图片显示的错误,原来是要清空index.json里面的 ...
- 小程序开发报错 使用wx.reLaunch跳转报错 Expected updated data but get first rendering data如何解决 ???
页面跳转 使用wx.reLaunch({url: '/pages/list-item/list-item'}) 报错 VM15485:5 Expected updated data but get f ...
- 微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现 一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
- Taro开发微信小程序遇到的问题和解决方法
Taro开发微信小程序遇到的问题和解决方法 参考文章: (1)Taro开发微信小程序遇到的问题和解决方法 (2)https://www.cnblogs.com/wuliujun521/p/114753 ...
- 微信小程序开发难?资深大V教您微信小程序制作步骤和方法
微信小程序开发难?资深大V教您微信小程序制作步骤和方法 一.登录微信公众平台 就能在菜单"开发"---"基本配置"中看到小程序的AppID了,小程序的 Ap ...
- 微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框 模态弹窗 操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...
- 微信小程序开发文档及文件上传示例(JAVA)
微信小程序开发文档及文档上传示例 一.什么是微信小程序 小程序是一种无需下载安装,即可使用的手机应用.只需要扫描二维码,或是搜一搜,就能立即使用. 与APP不同的是,小程序无需下载安装.无需卸载.用完 ...
- 微信小程序view水平垂直居中完美解决
微信小程序view水平垂直居中完美解决 .view_box{display: flex;align-items: center;justify-content: center;width: 100%; ...
- 微信小程序开发之SVG的使用
因为工作的原因,最近开始接触并且了解微信小程序.太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下.这一篇先总结一下svg在小程序中的使用. S ...
最新文章
- 东北师大计算机考研报名人数,东北师范大学考研难吗?一般要什么水平才可以进入?...
- Command_Of_Windows1
- Java抽象类的概念和使用
- UGUI_不添加摄像机解决UI与UI特效叠层
- hdu 1058 Humble Numbers
- java switch语句_Java 14:查看更新的switch语句
- html5垂直线怎么画,HTML5 Canvas画线技巧
- 腾讯疯狂扩展7000人!我居然挂在了项目这块。。。
- php opcodes 还原代码,深入理解PHP原理之Opcodes(PHP执行代码会经过的4个步骤是什么)...
- Bailian2714 求平均年龄(POJ NOI0105-01)【入门】
- vim 图解常用快捷键操作
- Trello使用向导
- Linux基础三(软件安装管理)
- GROUP BY中ROLLUP/CUBE/GROUPING/GROUPING SETS使用示例
- matlabR2016a与solidworks2016联合仿真的经验分享
- SE Block (Sequeze and Excitation)
- Angular入门到精通系列教程(14)- Angular 编译打包 Docker发布
- 【微信小程序】本地服务页面案例实现
- 如何移除Office 365标题栏上的账号信息
- [SHOI 2008]小约翰的游戏