JS-Nachahmung der Homepage-Schnittstelle des Mobilterminals Jinri Toutiao

Dieses Mal bringe ich Ihnen JS, um die Homepage-Schnittstelle des Toutiao-Mobilterminals zu imitieren. Was sind die Vorsichtsmaßnahmen, um die Homepage-Schnittstelle des Toutiao-Mobilterminals mit JS zu imitieren? Schauen Sie es sich gemeinsam an.

Vorwort

Ich arbeite schon seit einiger Zeit an Vue, um ein mobiles Terminal zu schreiben. Außerdem bin ich am Ende nicht sehr beschäftigt des Jahres, also habe ich vor ein paar Tagen damit begonnen, es zu lesen.

Weil ich nur Frontend-Seiten schreibe, verwende ich für Daten In Um echte Anfragen zu simulieren, können Sie die API direkt selbst in Easy Mock generieren
Sie können sich auch direkt beim Easy Mock-Konto meines Projekts anmelden. Passwort:

Konto: vue-toutiao
Passwort: 123456

Wenn Sie die Schnittstelle ändern möchten, kopieren Sie bitte Eine Kopie wird geändert

Wenn Sie die Backend-Schnittstelle selbst entwickeln möchten. Sie können meinen Blog lesen: Vue + Node + Mongodb Entwicklung eines vollständigen Blog-Prozesses

Technologie-Stack:

vue + webpack + vuex + axios

Struktur :

• build: Webpack-Konfiguration

• config: Projektkonfigurationsparameter

• src

• Assets: statische Ressourcendateien, Speichern von Bildernusw.

• Komponenten: häufig verwendete Komponenten. Zum Beispiel Popup-Fenster usw. . .

• Direktive: gemeinsame Befehlskapselung

• Router: Routing-Tabelle

• Speicher: Zustandsverwaltung vuex

• Stile: Stildatei

• Dienstprogramme: allgemeines Werkzeugklassenpaket

• Ansichten: Seite anzeigen

• Statisch: Statische Dateien: Speichern von favicon.ico usw.

• Dieses Projekt verwendet DllPlugin zum Packen. Denken Sie also daran, wenn Sie dieses Projekt starten. Führen Sie zunächst einmal den Skriptbefehl aus, um die Konfiguration zu generieren

Wirkungsdemonstration:

Ein paar allgemeine Wissenspunkte

Lazy Loading von Routen

{
  path: '/development',
  name: 'development',
  component: (resolve) => {
    require(['../views/development.vue'], resolve)
  }
}

oder

const _import_ = file => () => import('views/' + file + '.vue')
{
  path: '/development',
  name: 'development',
  component: _import_('development')
}

2. Login-Abfangen

bestimmt, ob eine Anmeldung über die beforeEach-Hook-Funktion der Route erforderlich ist

// 如：系统设置需要登陆
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    login: true
  },
  component: _import_('System/index')
}
router.beforeEach((to, from, next) => {
  if (to.meta.login) { //判断前往的界面是否需要登陆
    if (store.state.user.user.name) { // 是否已经登陆
      next()
    }else{
      Vue.prototype.$alert('请先登录!')
        .then( () => {
          store.state.user.isLogin = true
        })
    }
  }else{
    if (to.meta.page) store.state.app.pageLoading = true
    next() 
  }
  
})

3. Animationsumschaltung

Bestimmen Sie, welche Art von Umschaltanimation ausgeführt wird, indem Sie das auf dem Router festgelegte Animationsattribut erkennen

Router.prototype.animate = 0
// 获取每个路由meta上面的slide 来判断它做什么动画
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    slide: 1 
  },
  component: _import_('System/index')
}
watch: {
  $route (to, from) {
    /*
    0: 不做动画
    1: 左切换
    2: 右切换
    3: 上切换
    4: 下切换
    ...
     */
    let animate = this.$router.animate || to.meta.slide
    if (!animate) {
      this.animate = '' 
    }else{
      this.animate = animate === 1 ? 'slide-left' :
        animate === 2 ? 'slide-right' :
        animate === 3 ? 'slide-top' :
        animate === 4 ? 'slide-bottom' : ''
    }
    this.$router.animate = 0
  }
}

4. Videowiedergabe

Da die Videosteuerelemente unter iOS nicht ausgeblendet werden können, können wir das Video ausblenden und den Effekt der Videowiedergabe durch Zeichnen der Leinwand erzielen

Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Post-Click-Laden in fünfstufigen Bereichen erreichen

vue erstellt ein automatisches Website-Erstellungsprojekt

So verwenden Sie Echarts in Vue.JS

Das obige ist der detaillierte Inhalt vonJS-Nachahmung der Homepage-Schnittstelle des Mobilterminals Jinri Toutiao. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!