mpvue 從入門到上手

官網：http://mpvue.com/mpvue/quicks...
1、新建一個mpvue項目

$ vue init mpvue/mpvue-quickstart my-project //新建項目
$ cd my-project //切換到項目
$ npm install //安裝依賴
$ npm run dev //運行

2、預覽

一、首先，打包

$ npm run build

二、打開「微信開發者工具」，在‘項目目錄’中選擇項目的dist文件，APPID能夠暫時不寫，‘項目名稱’自定義。
三、點擊‘編譯’看效果，點擊‘預覽’在手機上用微信掃碼看效果。

3、頁面跳轉

<navigator url="../agreement/main">當即報名</navigator>

在最外層app.json中加入路徑且從新運行該項目，以下圖：

4、分享

<button open-type='share'>分享</button>

若是須要自定義分享，則重寫如下方法（注意，此方法不該放在methods中，應該與methods同級）

onShareAppMessage: function (res) {
    // 分享程序
    var title = ''
    var path = 'pages/index/main'
    var imageUrl = ''
    return {
      title,
      path,
      imageUrl,
      success: (res) => {
        console.log('res', res)
      },
      fail: (res) => {
        console.log('res', res)
      }
    }
  }

5、圖片預覽

<img src="/static/images/second_11.jpg" style="width:60rpx;height:60rpx" @click='previewImg'>
    previewImg () {
      // 預覽圖片
      wx.previewImage({
        // current: '/static/images/second_3.jpg', // 當前顯示圖片的http連接，只有一張時，能夠不寫
        urls: ['http://bak-img.oss-cn-shenzhen.aliyuncs.com/20181204111744.jpg'], // 須要預覽的圖片http連接列表
        success (res) {
          console.log(res)
        },
        fail () {
          wx.showToast({
            title: '預覽失敗！',
            icon: 'none',
            duration: 1000
          })
        }
      })
    }

6、請求接口

wx.request({
    url: myUrl,
    data: {
      type: 'k'
    },
    success: function (res) {
      console.log(res.data)
    }
  })

7、圖片上傳到阿里雲（OSS）
請參考這位大佬的博客：https://blog.csdn.net/qq_2337...
點擊調皮效果（加入addscale便可）：

.addscale {
    -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    -webkit-animation: addscale;
      animation: addscale 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
      transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  }
@-webkit-keyframes addscale {
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  }
  @keyframes addscale {
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
}

8、普通選擇器
效果圖：

<picker mode = selector @change="bindPickerChange($event)" :value="sexVal" :range="sexArray">
  <div class="picker">
    當前選擇：{{sexVal}} 
   </div>
</picker>
  data () {
    return {
      sexArray: ['女', '男'],
      sexVal: '選擇'
    }
  },
  methods: {
    bindPickerChange(e) {
      let index = Number(e.mp.detail.value)
      this.sexVal = this.sexArray[index] 
    }
  }

9、單頁面的配置
請參考此大佬：https://blog.csdn.net/qq_3543...

10、頁面跳轉

一、行內跳轉
    a、navigator、vue-router均可以
二、js跳轉（標籤爲<a>）
    *普通跳轉 navigateTo
        const url = '../result/main'
        wx.navigateTo({url})
    *底部導航跳轉 switchTab
        const url = '../result/main'
        wx.switchTab({url})