So implementieren Sie die Online-Musteranpassungsfunktion in Canvas im Miniprogramm

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:

1. Es erfordert eine hohe Vielseitigkeit und muss später in mehr als vierzig Teilprojekten verwendet werden, sodass die meisten Orte konfigurierbar gemacht werden.

2. Es muss in Form eines Gerüsts vorliegen. Es kann mit npm installiert werden

3. 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

4. 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

#!/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')
  })
}

1. Kopieren Sie die Browseradresse und fügen Sie sie an einer anderen Stelle ein, aber die Registerkarte wird nicht korrekt wiedergegeben.

2. Es ist notwendig, innerhalb der Registerkarte zu springen und zurückkehren zu können.

, 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. 伪路由

那么怎么实现呢？ 首先维护一个打开的 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')
)

然而我试了一下，发现报错了，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')})

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

相关推荐：

canvas与h5如何实现视频截图功能

HTML5 Canvas自定义圆角矩形与虚线的代码实例介绍

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Online-Musteranpassungsfunktion in Canvas im Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!