Апплет mpvue WeChat, имитирующий NetEase Cloud Music

Апплет WeChat mpvue

После попытки разработать апплет WeChat я обнаружил, что для разработки апплета существует такая вещь, как mpvue, и я ничего не мог поделать, поэтому после объединения апплета с версией, которую я разработал с помощью vue, я попытался использовать mpvue+ iview -weapp разрабатывает версию.
Бэкенд-интерфейс используетNeteaseCloudMusicApi, Спасибо, что поделился

git-адрес, качество кода демо-проекта не очень, хахахаха, уж простите 😁

Обновление записей (забыл написать записи для первых немногих обновлений ...)

18/9/25 Изменить страницу учетной записи

предварительный просмотр

Строительство проекта

  • Сначала ещеИнструмент разработки мини-программ WeChatскачать
  • Создан проект mpvue, и быстрее всего следить за официальным сайтом.Начать быстро
  • Поддержите iview-weapp или следуйте официальному сайтуНачать быстро, вот на что обратить внимание, скачайте скачанныйпапка dist проекта iview-weapp(название можно изменить) находится вПосле компиляции вашего проектаВ каталоге dist официальный сайт iview-weapp не действует, поэтому рекомендуется отсканировать на нем QR-код для проверки эффекта и далее разрабатывать по его коду.
  • Наконец, используйте инструмент разработки апплета WeChat, чтобы открыть проект (не каталог dist) и напишите код с помощью вашего обычного компилятора (в каталоге src).

сторона запроса

Апплет WeChat имеет собственный 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.root.root.Для получения mp.query нужно отметить, что: прописать его в смонтированной функции, а в созданной прописать сообщить об ошибке.

Третий тип: во всех компонентах это можно пройти.root.root.mp.appOptions получить.
В нормальных условиях все три должны быть в порядке. Когда один бесполезен, попробуйте два других.

внешний вид

Это все равно, что использовать в 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.

Категории