源码库

微信小程序开发

源码库-建站教程-网站开发-微信小程序开发- 正文

微信小程序踩坑之常遇到的问题和解决办法

2018-05-07 源码库 www.aspku.com 大字

一:踩坑之路

前段时间公司要求做了一个微信小程序,现在趁着还算空闲,总结一下小程序中所遇到的问题。

有微信提供的文档接口和开发者工具,完成起来总是感觉那么畅快,但是在手机上预览后,总是会有这样那样的问题:

1、背景图片的问题

微信要求打包的小程序不超过1M,也许是出于这个原因,微信不允许用本地图片,但可以使用image标签来展示图片,或者将背景图转为base64,也或者用图片网络地址也可以,将图片存到服务器上,但是每次图片有修改都要重新上传,如此也是很麻烦;base64图片编码如果图片大的话编码会很长,但是这种也算方面些;

2、图片问题:一般页面背景图选择用png格式的图片,但是在小程序中,一般格式的图片作为背景图会很模糊,所以选择了矢量图svg来作为背景图base64转码;

3、数据接口:小程序规定接口必须是https的请求,必须在小程序的管理后台配置好请求域名,上传域名,开发工具可以是http;

4、页面之间的跳转:小程序的页面跳转有wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack四种跳转方式,同时规定跳转不能超过5层;跳转的实现通过bindtap点击事件或组件navigator

在当前页打开

但是连续点击的话页面会进行多次跳转,这时候我的解决办法是判断仅让点击一次执行操作;

5、文本框的默认提示文字:当光标到文本框内,获取焦点时,默认提示文字会闪动,这个没有去解决;

6、文本框设置为密码框时:当文本框为密码框时,type="text",手机键盘第一次输入数字后闪动到字母键盘,这个没有去解决;

7、按钮的点击效果:文档中提示当hover-class="none"时,没有点击效果,但是并不是如此;当button按钮设置为镂空时,仍然有效果的出现,因此不设置镂空就可以了;

8、消息提示框类型:小程序只提供了两种消息提示框类型:success、loading;对于有些需要提示的地方总是不合时宜,因此就自己写了一个;

9、小程序的布局:布局用了rpx布局,基本适应了大部分手机的大小,但是小屏手机就需要特别适应;

10、录音功能:小程序的录音格式是silk的,在其他播放控件上是不能播放的,wx.playVoice是可以播放本地缓存录音文件的;所以上传录音文件必须要进行转码,这个我们是有后台进行转码处理的。

二:坑点合集

分享者:o2team,原文地址

假如你有其中的解决方法或思路,欢迎回复在这里!

input 组件

placeholder 文字与 input 的值重叠

暂无解决方案

获取焦点 和 失去焦点 时,光标和文字跳动

暂无解决方案

当 input 设置为居中对齐时,光标会出现在奇怪的位置

暂无解决方案

bindconfirm 事件在失去焦点时也会触发,类似于 blur(微信版本 6.5.3)

暂无解决方案

对 input 做动画时,如果是获取焦点状态,会失效

暂无解决方案,因为 input 在获取焦点时是 native 组件,失去焦点后改回

web 组件

type 为 idcard, digit 时并不是调用数字键盘

暂无解决方案,目前起作用的只有 number

scroll-view 组件

安卓下列表较长时滚动白屏

目测是渲染性能的问题

动态渲染列表内容的时候,滚动条回到顶部

手动设置 scrollTop 值,组件自己并不会自动更新这个值

image 组件

image 标签的 url 需要添加协议

添加协议头

调试

控制台输出错误信息不正确,如 语法错误 等会输出错误指向文件顶部,而不是出错的位置

暂无解决方案

系统错误 {“baseresponse":{"errcode":-80002,"errmsg”:””}}`

无权限?

某些情况下 wxml 面板空白

暂无解决方案

某些奇怪的原因导致真机出现 $gwx 错误

检查 wx:key 是否配置正确

样式

nth-child、nth-of-type 不支持

单独使用 class 控制

元素设置为 inline-block时,调试工具 与 真机表现不一致,调试工具有间隔,真机无间隔

设置 font-size:0

navigator 标签 display: flex; 失效

暂无解决方案

hidden 指令值为 true 时无效

手动设置样式控制,因为某些情况下,微信的 display: none 的权重比较低,会被覆盖

background-iamge在真机环境下,无法使用相对路径的图片

可以使用 base64 或者外链,也可以使用 image 组件替代

clip-path 在安卓机上性能消耗严重,与 scroll-view 一起使用时,会导致 scroll-view 滚动严重卡顿

使用别的样式替换 clip-path

API

已拉起的键盘无法收起,wx.hideKeyboard() 方法无效

暂无解决方案

快速点击导致页面重复打开

暂无解决方案

onReachBottom 被重复触发

改用 scroll-view 或者 手动节流

Modal 弹窗中的内容无法换行

自定义弹窗组件

wx.request 只支持 UTF8 编码

转换编码

wx.previewImage 不会使用Image 组件已经加载过的图片缓存

暂无解决方案

兼容性

安卓下目前没有分享功能

暂无解决方案

scroll-view 使用 flex 布局,使用 flex: 1 撑起高度时,安卓下 scroll-view 会对下方元素造成不可见的遮挡

可再设置 height: calc(100% - xxx px); 进行兼容

安卓下使用的是 X5 内核,所以很多特性无法使用,比如 Promise、Object.assign、Array.prototype.includes 等等

单独引入 polyfill

其他

require 只能引入 .js 文件,没有文件后缀或者后缀不是.js 会在最后补上 ‘.js’

暂无解决方案

wxml 和 wxss 文件引入文件可以使用绝对路径,以当前应用程序的目录为根目录,js 文件不行

暂无解决方案

模板中出现的某些特殊符号(如 word 中插入的符号)导致模板渲染失败

替换符号 或者 使用变量

通过 querystring 方式进行页面传值的时候,内容包含 % 会解码错误

将 % 进行 URL 编码为 %25,微信会自动解码

分享到:

相关阅读

阅读排行