微信小程序的坑(持续更新中)(代码片段)

wonyun wonyun     2022-12-07     522

关键词:

参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发;期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的一些坑;下面针对小程序开发过程中遇到的一些坑跟大家分享,有些没有深究具体原因;

1、原生组件遮盖的问题

由于原生组件层级最高,即使设置了其z-index也于事无补;不能随意在其层级上展示信息,只能通过cover-viewcover-image组件(其实这两个组件也是原生组件)来进行遮盖;

例如,下图在map原生组件上遮盖层:上方banner、地图上的气泡指针以及右下角的归位。

技术图片

另外需要注意一点,若要在覆盖原生组件上,还需要保证一点:

由于`cover-view`和`cover-image`也是原生组件,需要保证他们插入页面的时机晚于要覆盖的原生组件,即先要插入原生组件。

例如上图中,地图上的banner遮盖层若不是包含在map原生组件内,那么就需要在map出现后插入,否则map组件也会覆盖cover-veiw

2、不支持base64格式的图片问题

小程序有些图片是不支持base64格式的,例如cover-image,地图marker的iconPath等。在配合webpack构建小程序代码时需要注意不要对这些图片进行base64转换。

3、地图mapContext的问题

小程序打开AB两个页面,B页面由A页面navigateTo而来,A、B两个页面都有地图组件,并且两个页面都通过wx.createMapContext创建了地图的mapContext。

在小程序基础库2.3.0~2.6.2版本下产生一个问题:

B页面返回A页面,A页面地图的mapContext提供方法的回调都不会执行,在2.6.0版本下会每次调用mapContext的方法,都会在mapContext上生成一堆callback。

例如由B页面返回的A页面多次调用mapContext提供的方法,会在其上挂载callback,因为回调方法得不到执行,所以挂载其上的callback函数没法删除
技术图片

微信小程序面试题大全(持续更新)(代码片段)

1.请谈谈微信小程序主要目录和文件的作用?project.config.json:项目配置文件,用的最多的就是配置是否开启https校验App.js:设置一些全局的基础数据等App.json:底部tab,标题栏和路由等设置App.wxss:公共... 查看详情

微信小程序入门概述(代码片段)

...☃欢迎学习交流!!!持续更新中…文章目录微信小程序1.小程序简介2.小程序的项目结构JSON配置文件WXML模板WXSS样式JS逻辑交互3.小程序的宿主环境(依赖环境)通信模型运行机制 查看详情

微信小程序精选demo合集【持续更新中...】

...聊天#SNS)地址:https://github.com/xiehui999/SmallAppForQQ2.仿知乎微信小程序(#SNS#社区#论坛)地址:https://github.com/RebeccaHanjw/weapp-wechat-zhihu3.微信小程序实现移动端商城(#电商#商城)地址:https://github.com/liuxuanqiang/wechat-weapp-mall4.知乎日... 查看详情

回归|js实用代码片段的封装与总结(持续更新中...)

...新博客不是代表不学了,期间我已经用vue做了两个项目,微信小程序做了一个项目,只是毕竟找到工作了,想偷偷懒,你懂的。  过年期间一直在关注js片段代码,虽然这个时代前端框架横行,大量上层工具层出不穷,比如http... 查看详情

微信小程序开发技巧总结(持续更新...)(代码片段)

小程序开发技巧总结结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。数据的生命周期1.短生命周期数据存储以小程序启动到彻底关闭为周... 查看详情

你踩的坑这里都有微信小程序分包指南(代码片段)

...刚开始,恭喜你选择了一条最简单的路,如下为微信官方示例,将项目目录安排如下,并在app.jsonsubpackages字段中做对应声明即可。其中pages数组中的页面为主包中的页面,subpackages中的每一项对应一个分包。├... 查看详情

微信小程序模板与配置(wxmlwxss全局和页面配置网络数据请求)(代码片段)

欢迎学习交流!!!持续更新中…文章目录1.WXML模板语法数据绑定事件绑定条件渲染列表渲染2.WXSS模板样式rpx样式导入3.全局配置windowtarBar4.页面配置5.网络数据请求1.WXML模板语法数据绑定数据绑定基本原则:在data... 查看详情

微信小程序使用ucharts时遇到的一些坑及其解决方案(持续更新)(代码片段)

前言新项目是一个微信小程序,由于未来有跨端的可能,且为了降低开发成本,于是选择了uni-app框架进行小程序的开发。项目需求在小程序上显示各种图表,web端使用的是功能的强大的echarts,但由于官方并没... 查看详情

一招解决微信小程序中的h5缓存问题(代码片段)

一招解决微信小程序中的H5缓存问题1、问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面。但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题&#... 查看详情

神技!微信小程序(应用号)抢先入门体验(附最新案例-豆瓣电影)持续更新

微信小程序Demo(豆瓣电影)由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/Demo预览演示视频(流量预警2.64MB)GitHubRepo地址仓库地址:https://github.com... 查看详情

微信小程序启动更新机制(代码片段)

...这个过程就是热启动;冷启动:用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动,即冷启动。小程序没有重启的概念。小程序冷启动时,如果发现有新版本,将会异步下载新版本的代码包... 查看详情

微信小程序入门概述(代码片段)

...☃欢迎学习交流!!!持续更新中…文章目录微信小程序1.小程序简介2.小程序的项目结构JSON配置文件WXML模板WXSS样式JS逻辑交互3.小程序的宿主环境(依赖环境)通信模型运行机制组件API微信小程序1.小程序简... 查看详情

微信小程序发布新版本时自动提示用户更新(代码片段)

 如图,当小程序发布新的版本后,用户如果之前访问过该小程序,通过已打开的小程序进入(未手动删除),则会弹出这个提示,提醒用户更新新的版本。用户点击确定就可以自动重启更新,点击取消则关闭弹窗,不再更新... 查看详情

微信小程序request出现400的坑

最近在跟着demo学习微信小程序,当进行网络请求时出现400,折腾了很久,代码如下:wx.request(url:"https://api.douban.com/v2/movie/top250",data:,header:"Content-Type":"application/json",suc 查看详情

微信小程序this.data赋值时,页面视图层没有同步更新(代码片段)

问题:我在开发微信小程序中,this.data进行赋值时,页面视图层没有同步更新;原因:其中this.data是用来获取页面data对象的;setData()函数用于将逻辑层数据发送到视图层,同时对应的改变this.data... 查看详情

微信小程序this.data赋值时,页面视图层没有同步更新(代码片段)

问题:我在开发微信小程序中,this.data进行赋值时,页面视图层没有同步更新;原因:其中this.data是用来获取页面data对象的;setData()函数用于将逻辑层数据发送到视图层,同时对应的改变this.data... 查看详情

微信小程序|开发常用事例(代码片段)

文章目录前言小事例汇总1.点击van-cell进入客服2.去除vant-button默认样式(2020-03-12更新)3.文字显示图片上面(2020-03-19更新)4.去除van-divider默认边距(2020-03-19更新)5.改造vant-tab(2020-03-19更新)参 查看详情

微信小程序视图与逻辑(页面导航页面事件生命周期wxs脚本)(代码片段)

欢迎学习交流!!!持续更新中…文章目录1.页面导航声明式导航编程式导航导航传参2.页面事件下拉刷新上拉触底3.生命周期4.WXS脚本基础语法1.页面导航页面导航指页面之间的相互跳转,浏览器中实现页面导航的... 查看详情