mpvue微信小程序-仿網易雲音樂

在嘗試開發了一個微信小程序之，後發現有mpvue這麼個東西能夠來開發小程序之後就忍不住了，因此把小程序和我用vue開發過的版本結合修改之後，再嘗試用mpvue+iview-weapp開發一個版本。
後臺接口用的是NeteaseCloudMusicApi,感謝大佬的分享

git地址，demo項目代碼質量不是很好，哈哈哈哈多多見諒😁

更新記錄(前幾回更新忘記寫記錄...)

18/9/25 修改帳號頁

預覽

項目搭建

• 最開始仍是要把微信小程序開發工具下載一下
• mpvue項目創建，跟着官網走一遍是最快的 快速上手
• 支持iview-weapp，仍是跟着官網快速上手，這裏就一個地方要注意，把下載下來的iview-weapp項目的dist文件夾（能夠更名字）是放到你項目編譯後的dist目錄下，iview-weapp官網沒有效果的展現，因此建議掃它上面的二維碼查看效果之後對照它的代碼進行開發
• 最後就是用微信小程序開發工具打開項目(不是dist目錄)，用你經常使用的編譯器編寫代碼（src目錄下）

請求方面

微信小程序有自帶的wx.request()可使用，還能夠用Flyio，我是用的Flyio
具體使用的話能夠再每一個模塊中

var Fly=require("flyio/dist/npm/wx")
var fly=new Fly
fly.get(url).then(res=>{})
複製代碼

還有就是在main.js中

const Fly = require('flyio/dist/npm/wx');
let fly = new Fly();
Vue.prototype.$fly = fly;
//模塊中使用 
this.$fiy.get(url).then(res=>{}) 
複製代碼

路由跳轉傳參

wx.navigateTo({url:'../test/main?id='+id})
第一種：

onShow (options) {

let id = options.id

}
複製代碼

第二種：在全部頁面組件內能夠經過 this.mp.query 獲取,要注意就是：寫在mounted函數裏，寫到created報錯。

第三種：在全部的組件內能夠經過 this.mp.appOptions獲取。
正常狀況下三種應該都是能夠的，某一種沒用的時候就嘗試另外兩種

vuex方面

仍是和vue裏面的使用同樣，簡單的
/src/store/store.js

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
   oneState:'one'
    }
  },
  mutations: {
    setItem: (state,data) => {
      state.oneState = data
    },
  },
  getters : {
    getItem (state) {
        return state.oneState
    },
});

複製代碼

/src/main.js

import store from './store/store'
Vue.prototype.$store = store;
複製代碼

/src/page/text.vue

import {mapGetters} from 'vuex'
  export default {
     computed:{
       ...mapGetters([
         'oneState'
        ])
     },
     },
     methods:{
         test(){
             this.$store.commit('setItem', 'two')
         }
     }
複製代碼

總結

好了，基本的開發流程就是這樣，具體的開發大部分仍是像vue開發那樣，本身在開發的時候，遇到的坑仍是有的，但網上基本都能找到解決方案，具體遇到的時候就查一查都能查到，收穫不少，須要改進、優化、學習的也不少。 最後這裏還有一個用vue開發的版本可在線預覽,建議用chrome的手機模式預覽