开发小程序时遇到的坑

一.关于页面tab
  方法1，使用小程序封装好的tab配置方法，配置在app.json文件中，适用于全局，该方法优化了页面切换时候，数据预加载的问题，不会出现切换速度迟缓的问题。缺陷，tab组建部分样式不可控制，只可以控制tab背景颜色，还限制了只能黑白两色，tab的配置中不可省略tab的文字（不想要文字的可以用‘’代替，但是会影响布局的美观性）tab icon只能使用图片，不支持图标字体。tab icon的图片只能存在本地，不支持云资源管理。
  方法2，首页tab，但是新页面加载数据的方法不能写在onload里面，写在onload里面会导致页面加载迟缓。官方推荐写在onshow方法里，做个页面加载的预处理。


二.关于引用图片，视频，音频等资源
  1.单页面的资源支持且仅支持线上链接，全局图片仅支持本地服务器资源。
  2.video组建在移动端属于系统原生组建，层级最高且无法改变，z-index失效，不建议视频组建上面直接覆盖蒙板。
  3.建议压缩图片资源，若图片体积过大，加载时候会出现闪屏现象。


三.关于外链和内链
  1.不支持引用外链，写了外链，小程序会在链接前面自动加上相对地址，导致外链失效。
  2.内部链接分为跳转后关闭上一级的页面和跳转后保留上一级的页面，保留上一级的那种链接，有页面层级限制，目前是不超过5层，超过五层链接会失效，需要保留上一级页面的时候用wx.navigateTo({url:'../index/index'}),不需要保留上一级页面的时候用wx.redirectTo({url:'../index/index'})。


四.关于canvas的应用
  1.canvas支持画文字，但是不支持改变文字颜色
  2.支持canvas内容转成图片，会返回一个临时图片地址
  3.canvas标签内部的view等标签不会被canvas识别，但是也能正常的在页面中显示效果。


五.关于页面传值
  1.http://www.jianshu.com/p/0135769db89c
  2.data-xxx的方法传值很简单也很方便
  3.如果一层for循环，不必指定index，默认用index就可以，若多层for循环嵌套，需要指定不同的for-index，否则，每个for循环的index都是默认的index，会产生js中的重名问题。


六.关于菜单栏的设置
  1.可以设置分享，在app.json文件中window选项中打开分享权限，在每个需要有分享功能的页面，单独调用分享的方法。
  2.若是触发分享事件的是页面中的按钮，注意在button组建上加上open-type="share"属性，否则不生效。


七.关于页面的滚动
  1.小程序提供了onscroll的方法实现页面的横向和竖向滚动，一般竖向的滚动比较常用，常见的回到顶部，点击页面内部tab跳到页面指定位置，需要注意的是，要用<scroll-view scroll-y bindscroll="mainScroll" class="vh-100">标签将页面的全部内容包裹，其中，scroll-view的高度不可省略，方向设置不可省略，若要指定滚动高度，加上scroll-into-view="{{runTo}}"属性，runTo是要滚到位置的id值。
  2.小程序提供了swiper组建实现横向竖向的轮播，滚动，不支持修改样式，不支持修改滚动方式，尽可以修改变换间隔，时常和是否循环播放，是否有指示点。
  3.<scroll-view scroll-x="true" style="white-space: nowrap;">横向滚动这样就好，按照官方文档上的写法，会在移动端上滚不动。且该组建内部的多个元素不能有overflow：hidden属性。


八.关于es6写法
  1.方法回调事件中，成功，失败，完成回调事件中代码格式success: (res) => {}按照官方文档的写法，会导致方法内部setData({})方法失效。


九.关于隐藏组建下拉显示的实现
  1.<scroll-view scroll-y bindscroll="mainScroll" class="vh-100" upper-threshold="200px" bindscrolltoupper="toupper">组建包起整个页面，upper-threshold是下拉显示的边界位置，bindscrolltoupper是下拉事件，同样，页面高度不可缺，滚动方向不可缺。


十.关于页面的即时刷新
  1.实现类似电视剧选集效果，不要想着每个剧集跳转到一个单独的页面，小程序只支持五层页面啊，用点击每个剧集刷新页面数据的思路才能实现。


十一.关于表单元素
  1.textarea的placeholder文字改不掉属性。