微信小程序的坑

  1. 在IOS8上的系统,如果不使用 -webkit ,那么很多布局都不会生效;特别是 flex
    .price-horzonital-view {
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      -webkit-flex-direction: row;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      background-color: #fff;
      width: 100%;
      padding-top: 16px;
      vertical-align: middle;
    }
    
  2. 如果一个控件的width给的100%,在这个控件中设置属性paddingLeft或paddingRight;那这个控件的width = 屏幕的宽度 x 100% + paddingLeft / paddingRight。就会出现控件超出屏幕的情况。
  3. 微信小程序的最外层是 <page>; 出现
    <page>
       <scroll-view>
         其他控件/内容
       </scroll-view>
    </page>
    
    这种情况时,Android5.0系统和IOS10系统,都不能显示<scroll-view>内的数据;而IOS8系统则可以显示。(ps:当展示的内容超过屏幕的高时,使用<view>也是上下滑动的。)
  4. 跳转到拥有tab选项卡的页面时候,使用的是switchTab()。
    /*跳转到拥有tab选项卡的页面,只能使用这个方法跳转*/
        wx.switchTab({
          url: '../posts/post', //页面路径
          success: function (res) {
            // success
          },
          fail: function () {
            // fail
          },
          complete: function () {
            // complete
          }
        })
    
    如果使用的是navigateTo 或者 redirectTo ,它不但不会跳转,而且还不会有任错误何提示。这坑可烦了。不过下面的方法可以展示一个错误信息,在app.js文件中
    App({
        onError: function (msg) {
            console.log("onError:"+ msg);
        }
    })
    
    会打印一个日志信息:
    onError:navigateTo:fail can not navigate to tabBar page
    
    但发现其实没啥用 O(∩_∩)O哈!
  5. 层级关系:如果 <view>没有设置 z-index属性,<input>与<view>重合时,<view>是透明的,会把<input>显示出来。
    .chs_join_buybar {
      background-color: #10aeff;
      height: 60px;
      display: flex;
      display: -webkit-flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      align-content: flex-start;
      -webkit-align-content: flex-start;
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
    }
    
    结果:
    只要<view>设置了z-index 属性(属性值必须 > 0),就<view>就能覆盖住<input>。
    .chs_join_buybar {
      background-color: #10aeff;
      height: 60px;
      display: flex;
      display: -webkit-flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      align-content: flex-start;
      -webkit-align-content: flex-start;
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
      z-index: 1;
    }
    
    结果:
编辑于 2017-01-16