推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
细数小程序的坑
发布时间:2020-10-31最近做了一个应用，把玩了一下小程序。总体感觉还是可以，但是限制太多，最适合的场景可能就是手机小型应用。这节，我们来细数一下小程序开发过程的坑。
查看原文，获得更好的体验哦～
一、小程序注册前提小程序注册的前提是，没有注册过任何的微公众平，如未注册过订阅号、服务号之类的。邮箱要求也是是这样的：
未被公众平台注册，未被开放平台注册，未被个人微信号绑定的邮箱
恰巧之前开发过微信公众号，结果登陆后死活找不到小程序，后来才发现了这个前提。教训就是，一定要好好审题，提前看看小程序的介绍说明。
二、大小限制是的，你没有看错，小程序对项目大小做了限制，你的项目不能超过 2048kb 。这个大小的项目文件，能做的事情就不言自明了。
我们可以做工具类，服务类，投票类，在线答题类的小应用。
此外，还需要注意的是，如果你用了过多的图片资源，要么精简要么转在线地址，否则，你的小程序很可能大小失控。
这里有一些建议，优化后的效果还是很不错的。
图片资源过多的话，建议本地和远程协调，将项目大小控制在一定范围内。全用远程图片，可能会出现加载白屏问题；
如果你用了 wepy 构建工具，切记上线前一定要检查 dist 文件夹中的冗余文件，它只添加而不会删除；
图片可以优化一下，减少大小，推荐使用 TinyPng 无损压缩一下；
三、水平滚动与垂直滚动这个 bug 就比较气人了，当你使用了 swiper 的时候，左右滑动，屏幕上下也会跟着抖动。一般情况，我们禁掉浏览器的滚动行为：
//阻止浏览器默认事件 event.preventDefault();移动端处理水平滚动和垂直滚动的原理大致是这样的：
var xx,yy,XX,YY,swipeX,swipeY ; div.addEventListener('touchstart',function(event){ xx = event.targetTouches[0].screenX ; yy = event.targetTouches[0].screenY ; swipeX = true; swipeY = true ; }) div.addEventListener('touchmove',function(event){ XX = event.targetTouches[0].screenX ; YY = event.targetTouches[0].screenY ; if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0) //左右滑动 { event.stopPropagation();//组织冒泡 event.preventDefault();//阻止浏览器默认事件 swipeY = false ; //左右滑动 } else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){ //上下滑动 swipeX = false ; //上下滑动，使用浏览器默认的上下滑动 } })本身并不是什么很难的问题，然而，在微信中就没有任何办法了。很多人会说，你 overflow一下啊，我只能呵呵表示，并甩给你一篇文章 微信小程序 在 canvas 画布上划动，如何阻止页面上下动？
还可以看看这篇文章： 解决微信小程序自定义弹窗滚动与页面滚动冲突
这里摘自 官方文档 ：Bug & Tip
tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
四、图片组件既然叫组件了，那说明已经被动过手脚了，具体的表现是啥呢？小程序会给 image 组件默认宽高：
注：image 组件默认宽度 300px 、高度 225px
看起来是完美的，可是如果你要图片自适应外容器呢？OK，小程序提供了 mode 属性，但是并不完全，你还需要这么写：
<imagestyle="width: 100%;"mode="widthFix"src=""></image>是的，你还需要设置他的宽度，才能使用 mode="widthFix" ，否则又开始默认了，沮丧:joy:。至于 mode 提供的其他裁切属性 top , bottom , center 等等，不太清楚具体的应用场景是什么。
五、脚本不能使用 window 等对象页面的脚本逻辑是在 JsCore 中运行， JsCore 是一个没有窗口对象的环境，所以不能在脚本中使用 window ，也无法在脚本中操作组件。
当然，zepto/jquery 会使用到 window 对象和 document 对象，所以无法使用。
六、wx.navigateTo 无法打开页面一个应用同时只能打开 5 个页面，当已经打开了 5 个页面之后， wx.navigateTo 不能正常打开新页面。请避免多层级的交互方式，或者使用 wx.redirectTo 。
这个应该不算是 bug 吧，我们姑且认为它是一个 feature 。
七、样式表不支持级联选择器WXSS 支持以.开始的类选择器。如：
.normal_view { color: #000000; padding: 10px; }