大发彩票网首页
        当前位置:大发彩票网-建站教程-网站开发-微信小程序开发-微信小程序踩坑之常遇到的问题和解决办法

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

        时间:2018-05-07来源:大发彩票网 www.lhltmj.com 作者:源码库 文章热度:

        大发彩票网 www.lhltmj.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,微信会自动解码


        注:相关教程知识阅读请移步到微信小程序开发频道。
        相关微信小程序开发
        热门标签

        微信小程序开发Rss订阅微信小程序开发搜索

        大发彩票网网址 | 大发彩票网平台 |
      • 《关于推进防灾减灾救灾体制机制改革的实施意见》解读 2018-07-15
      • 今年“两会”筹备启动早亮点频出 2018-07-15
      • 省住建厅厅长吴浩到鹤调研百城建设提质工程郭浩参加 2018-07-15
      • 山东脱贫攻坚简报第17期 2018-07-15
      • 市住建局:召开上半年党建述职评议大会 2018-07-15
      • 李兆前任全国工商联党组成员(图/简历) 2018-07-15
      • 新知新觉:认识把握意识形态工作发展态势 2018-07-15
      • 湖北学霸获六校研究生推免 最终选择去北邮 2018-07-15
      • 民航局回应“国航航班紧急下降”:初步调查为副驾驶吸电子烟所致 2018-07-15
      • 图集|盛况!广昌千人舞太极 共创莲乡宜居梦(1) 2018-07-15
      • 上诉人南宁市朝众商贸有限公司与被上诉人李耀祺、原审第三人桂林市南城百货有限公司侵权责任纠纷一案 2018-07-14
      • 潮州果苗批发基地在哪里(广西区 柳州市 城中区) 2018-07-14
      • 想入“世界华人联合会”?中国15000人都被骗了 2018-07-14
      • 国家电网有限公司STATE GRID Corporation of China 2018-07-14
      • ?????????ι?????????????????桱 2018-07-14