iview插件的引入

用微信小程序后，以前的第三方插件因?yàn)闃邮降膯?wèn)題而無(wú)法使用，而小程序有個(gè)weapp-iview，使用方法如下：

• 下載weapp-iview，放入自己的目錄中；
• 在需要用到weapp的頁(yè)面對(duì)應(yīng)的json，進(jìn)行如下配置："usingComponents": { "i-button": "../../dist/button/index" }
• 在對(duì)應(yīng)頁(yè)面中使用

上拉加載下拉刷新

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

• 需要加載功能的頁(yè)面對(duì)應(yīng)的json配置"enablePullDownRefresh": true
• 在.vue文件中的export default中(注意不是methods中)加入小程序?qū)?yīng)的生命周期函數(shù)onReachBottom和async onPullDownRefresh

全局變量的配置

可以把全局變量寫在單獨(dú)的js中export出來(lái)，然后在main.js中引用，并定義Vue.prototype.baseUrl(例如)。

輪播圖

可以用小程序的輪播，用小程序的參數(shù)，vue的語(yǔ)法，例如：

    <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里進(jìn)行配置就好，無(wú)需自己寫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"
  }