mpvue做微信小程序的一些坑坑~

iview插件的引入

用微信小程序后，以前的第三方插件因为样式的问题而无法使用，而小程序有个weapp-iview，使用方法如下：

• 下载weapp-iview，放入自己的目录中；
• 在需要用到weapp的页面对应的json，进行如下配置："usingComponents": { "i-button": "../../dist/button/index" }
• 在对应页面中使用

上拉加载下拉刷新

可以利用小程序的上拉刷新，下拉加载功能，具体用法如下：

• 需要加载功能的页面对应的json配置"enablePullDownRefresh": true
• 在.vue文件中的export default中(注意不是methods中)加入小程序对应的生命周期函数onReachBottom和async onPullDownRefresh

全局变量的配置

可以把全局变量写在单独的js中export出来，然后在main.js中引用，并定义Vue.prototype.baseUrl(例如)。

轮播图

可以用小程序的轮播，用小程序的参数，vue的语法，例如：

    <swiper class="swiper swiper-container" 
            :indicator-dots="true" 
            interval="5000" 
            duration="1000" 
            autoplay>
      <block v-for="(item, index) in banners" :index="index" :key="index">
          <swiper-item>
              <img :src="item.src" class="swiper-slide" />
          </swiper-item>
      </block>
    </swiper>

footer vs tabbar

小程序有自己的tabbar，只需要在app.json里进行配置就好，无需自己写footer组件，配置如下：

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/main",
        "text": "tab1",
        "selectedIconPath": "./static/icon-1-current.png",
        "iconPath": "./static/icon-1.png"
      },
      {
        "pagePath": "pages/product/main",
        "text": "tab2",
        "selectedIconPath": "./static/icon-2-current.png",
        "iconPath": "./static/icon-2.png"
      },
      {
        "pagePath": "pages/index/main",
        "text": "tab3",
        "selectedIconPath": "./static/icon-3-current.png",
        "iconPath": "./static/icon-3.png"
      },
      {
        "pagePath": "pages/index/main",
        "text": "tab4",
        "selectedIconPath": "./static/icon-4-current.png",
        "iconPath": "./static/icon-4.png"
      },
      {
        "pagePath": "pages/pcenter/main",
        "text": "tab5",
        "selectedIconPath": "./static/icon-5-current.png",
        "iconPath": "./static/icon-5.png"
      }
    ],
    "color": "#666666",
    "selectedColor": "#e02e24",
    "backgroundColor": "#ffffff"
  }