So implementieren Sie die Online-Musteranpassungsfunktion in Canvas im Miniprogramm-H5-Tutorial-php.cn

Der Inhalt dieses Artikels befasst sich mit der Implementierung der Online-Musteranpassungsfunktion im Miniprogramm. Ich hoffe, dass er für Freunde hilfreich ist.

Vorwort

Kürzlich erhielt ich eine Anfrage für eine universelle Hintergrund-Frame-Seite basierend auf Vue und Element-UI. Die spezifischen Anforderungen sind wie folgt:

Es erfordert eine hohe Vielseitigkeit und muss später in mehr als vierzig Teilprojekten verwendet werden, sodass die meisten Orte konfigurierbar gemacht werden.
Es muss in Form eines Gerüsts vorliegen. Es kann mit npm installiert werden
Es ist erforderlich, mehrere Registerkarten zu implementieren, und mehrere Registerkarten können über die Browser-URL wiedergegeben werden. Darüber hinaus muss in der Registerkarte ein Verlaufsdatensatz verwaltet werden, und Sie können zurückgehen
Komponenten erfordern asynchrones Laden, um die Ladezeit des ersten Bildschirms zu verkürzen.

Offensichtlich handelt es sich hierbei um eine 类 ERP-Anwendung. Studierende, die JSP und andere Backends kennen, sollten mit mehrseitigen Registerkarten vertraut sein.

Dann lassen Sie uns über die Umsetzung sprechen.

Hohe Vielseitigkeit

Das ist eigentlich nichts Schwieriges. Es ist nur etwas aufwändiger, alle Daten zu extrahieren und sie dann in die Frame-Seite zu importieren und an den entsprechenden Speicherort zu binden Das Problem bei der Auswahl besteht darin, dass, wenn alle Daten an die Daten von vue gebunden sind, aufgrund der großen Datenmenge Leistungsprobleme auftreten. Wenn sie getrennt werden, sieht die Konfigurationsdatei dadurch relativ kompliziert aus und die Anzahl der Benutzer erhöht sich . Lernkosten. Dies hängt von den spezifischen Projektanforderungen ab. Da meine Anforderungen an die Frontend-Leistung vorerst nicht so hoch sind, werde ich vorübergehend die Lösung verwenden, alles an Daten zu binden. config

in Gerüstform gebracht

Ursprünglich wurde die Anforderung des Produkts in Form von Komponenten gestellt, und dann wurde das npm-Paket veröffentlicht. Um spätere Updates zu ermöglichen, müssen Sie nicht jedes Projekt kopieren, einfügen und ersetzen Framework-Seite, Darüber hinaus gibt es viele konfigurierbare Elemente und es gibt viele Überlegungen, wie z. B. die Implementierung mehrerer Registerkarten. Am Ende habe ich mich für die Gerüstlösung entschieden, auch wenn ein späteres Upgrade etwas mühsam wäre (die ursprüngliche Lösung bestand darin, Folgendes zu tun). Die Frame-Seite in einem Ordner kann bei Bedarf direkt ersetzt werden, aber im Vergleich zu Komponenten ist es immer noch einfacher, ein aktualisiertes Gerüst zu schreiben. Schließlich sind die Kosten für die Veröffentlichung höher jetzt zu niedrig.

Es ist das erste Mal, dass ich Gerüste entwickle. Nachdem ich viele Community-Beiträge gelesen habe, habe ich festgestellt, dass die meisten aktuellen Gerüste im Allgemeinen auf zwei Formen basieren, eine auf dem Kopieren von Dateien und die andere auf Git-Clone. Ich finde das Kopieren der Datei etwas kompliziert. Eigentlich brauche ich nur ein Tool, das mit einem Klick installiert werden kann, daher ist die Git-Clone-Methode für mich besser geeignet.

Das Folgende ist der Code des Gerüsts. Obwohl es sich nur um einfache fünfzig oder sechzig Zeilen Code handelt, habe ich einen ganzen Morgen gebraucht, um die Informationen zu überprüfen und durch die Grube zu gehen.

#!/usr/bin/env node
const shell = require('shelljs');
const program = require('commander');
const inquirer = require('inquirer');
const ora = require('ora');
const fs = require('fs');
const path = require('path');
const spinner = ora();
const gitClone = require('git-clone')
const chalk = require('chalk')


program
    .version('1.0.0', '-v, --version')
    .parse(process.argv);

const questions = [{
  type: 'input',
  name: 'name',
  message: '请输入项目名称',
  default: 'my-project',
  validate: (name)=>{
    if(/^[a-z]+/.test(name)){
      return true;
    }else{
      return '项目名称必须以小写字母开头';
    }
  }
}]

inquirer.prompt(questions).then((dir)=>{
  downloadTemplate(dir.name);
})

function downloadTemplate(dir){

  //  判断目录是否已存在
  let isHasDir = fs.existsSync(path.resolve(dir));
  if(isHasDir){
    spinner.fail('当前目录已存在!');
    return false;
  }
  spinner.start(`您选择的目录是: ${chalk.red(dir)}, 数据加载中,请稍后...`);

  // 克隆 模板文件
  gitClone(`https://github.com/noahlam/vue-multi-tab.git`, dir , null, function(err) {
    // 移除无用的文件
    shell.rm('-rf', `${dir}/.git`)
      spinner.succeed('项目初始化成功!')
    // 运行常用命令
    shell.cd(dir)
      spinner.start(`正在帮您安装依赖...`);
    shell.exec('npm i')
      spinner.succeed('依赖安装成功!')
    shell.exec('npm run dev')
  })
}

Nach dem Login kopieren

Wenn Sie Fragen oder Interesse an diesem Gerüst haben, können Sie direkt auf den Code tab-cli auf Github zugreifen

Implementieren Sie mehrere Registerkarten

Wenn Sie mehrere Registerkarten implementieren möchten, ist Vue-Router grundsätzlich nutzlos. vue-router wechselt eine einzelne Komponente basierend auf der URL, während die Registerkarte erfordert, dass mehrere Unterkomponenten gleichzeitig innerhalb der Komponente vorhanden sind, sodass Routing nicht qualifiziert ist (zumindest denke ich das. Wenn Sie eine bessere Lösung haben, bitte Fühlen Sie sich frei, mich aufzuklären) ).

Das Anzeigen mehrerer Registerkarten ist eigentlich nicht schwierig. Ich krempele also einfach die Ärmel hoch und beginne mit dem Schreiben nicht notwendig, überlassen Sie es der Produktvorschau:

Kopieren Sie die Browseradresse und fügen Sie sie an einer anderen Stelle ein, aber die Registerkarte wird nicht korrekt wiedergegeben.
Es ist notwendig, innerhalb der Registerkarte zu springen und zurückkehren zu können.

Die erste Frage ist relativ einfach. Ich schreibe ein Hash-basiertes

, um die ID des aktuellen Tabs in die URL einzufügen, und öffne dann, wenn es zurückgegeben wird, den entsprechenden Tab entsprechend der URL. 伪路由

Tipp: Zur Implementierung des Routings lesen Sie bitte meinen anderen Blog-Beitrag über die Implementierung eines Front-End-Routings selbst.

Die zweite Frage steht wahrscheinlich im Mittelpunkt dieses Artikels. Hier finden Sie eine detaillierte Beschreibung der Anforderungen Push, Replacement, Back, kann auch Parameter annehmen.

那么怎么实现呢？首先维护一个打开的 tab 列表，然后每个列表里面再维护一个用过的组件列表(包含参数),这样大概就能实现了吗？当然不是，组件的跳转，参数的传递，不可能让使用者自己去实现这些方法吧，我选择把封装一个公共对象，然后挂载在 vue.prototype上。然后类似 vue.$router.xxxx 一样(我的命名是 vue.$tab)可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的Github仓库上查看。

组件异步加载

之前只用过基于 vue-router 的异步加载方法，然而这个项目里面并没有使用 vue-router,怎么异步呢？翻了一下 vue 的官方文档是这么写的：

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

Nach dem Login kopieren

然而我试了一下，发现报错了，import 不能在这里使用，换了 require 也不行，不知道上我哪里没弄好，如果你刚好知道又刚好有空，请告诉我，谢谢！后面在 segmentfault 上看到这一篇, 使用 webpack 的 require.ensure 可以实现

// 第一个字符串是 组件名，第二个是 组件路径，第三个是 chunkName (如果不指定则以1.js,2.js....n.js命名)
vue.component('home', (resolve) => {require.ensure([], ()=>resolve(require('@/Views/index.vue')), 'home')})

Nach dem Login kopieren

顺便还要在 webpack 里面的 output 下面配置一下 chunkFilename: '[name].js',, 当然文件名格式可以按你项目的需求来，我这边就按最简单的