Comment implémenter la fonction de personnalisation en ligne des motifs dans Canvas dans le mini programme-Tutoriel H5-php.cn

Le contenu de cet article explique comment réaliser la fonction de personnalisation de motifs en ligne dans Canvas dans le mini-programme. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Préface

Récemment, j'ai reçu une demande pour une page de cadre d'arrière-plan universelle basée sur vue et element-ui. Les exigences spécifiques sont les suivantes :

Il nécessite une grande polyvalence et doit être utilisé plus tard dans plus de quarante sous-projets, de sorte que la plupart des emplacements sont rendus configurables.
Il doit être sous forme d'échafaudage. Il peut être installé avec npm.
Il est nécessaire d'implémenter plusieurs onglets, et plusieurs onglets peuvent être repris via l'URL du navigateur. De plus, un enregistrement d'historique doit être conservé dans l'onglet et vous pouvez revenir en arrière.
Les composants nécessitent un chargement asynchrone pour réduire le temps de chargement du premier écran.

Évidemment, il s'agit d'une application 类 ERP Les étudiants qui ont utilisé JSP et d'autres backends doivent être familiarisés avec les onglets multipages.

Parlons ensuite de la mise en œuvre.

Grande polyvalence

Il n'y a en fait rien de difficile à cela. C'est juste un peu plus gênant. Extrayez toutes les données et mettez-les dans un fichier config Puis importez-les dans la page du cadre et liez-les à l'emplacement correspondant. Le problème à choisir est que si toutes les données sont liées aux données de vue, en raison de la grande quantité de données, cela entraînera des problèmes de performances si elles sont séparées, cela rendra le fichier de configuration relativement compliqué et augmentera le nombre d'utilisateurs plus tard. .les frais d'apprentissage. Cela dépend des exigences spécifiques du projet. Étant donné que mes exigences de performances frontales ne sont pas si élevées pour le moment, j'utiliserai temporairement la solution consistant à tout lier aux données.

transformé en forme d'échafaudage

Initialement, la demande du produit était faite sous forme de composants, puis le package npm a été publié. Pour faciliter les mises à jour ultérieures, il suffit de mettre à jour npm. Il n'est pas nécessaire de copier, coller et remplacer chaque projet, mais puisqu'il s'agit d'un projet. page framework, De plus, il existe de nombreux éléments configurables, et il y a de nombreuses considérations telles que la mise en œuvre de plusieurs onglets. Au final, j'ai choisi la solution d'échafaudage, même si ce serait un peu gênant de mettre à niveau plus tard (la solution initiale était de mettre. la page de cadre dans un dossier. Vous pouvez remplacer directement le dossier en cas de besoin), mais par rapport aux composants, il est toujours plus facile à maintenir. De plus, vous pouvez écrire un échafaudage mis à jour plus tard. Après tout, le coût de publication d'un outil npm est élevé. trop bas maintenant.

C'est la première fois que je développe un échafaudage.Après avoir lu de nombreux articles de la communauté, j'ai découvert que la plupart des échafaudages actuels sont généralement basés sur deux formulaires, l'un est basé sur la copie de fichiers et l'autre est basé sur git-clone. Je pense que la copie du fichier est un peu compliquée. En fait, j'ai juste besoin d'un outil qui peut être installé en un clic, donc la méthode git-clone me convient mieux.

Voici le code de l'échafaudage. Bien qu'il ne s'agisse que de cinquante ou soixante lignes de code, il m'a fallu une matinée entière pour vérifier les informations et parcourir les stands.

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

Copier après la connexion

Si vous avez des questions ou un intérêt pour cet échafaudage, vous pouvez accéder directement au code tab-cli sur github

Implémenter plusieurs onglets

Si vous souhaitez implémenter plusieurs onglets, vue-router est fondamentalement inutile. Pourquoi ? vue-router commute un seul composant en fonction de l'URL, tandis que l'onglet nécessite que plusieurs sous-composants existent à l'intérieur du composant en même temps, donc le routage n'est pas qualifié (du moins je pense que oui. Si vous avez une meilleure solution, veuillez n'hésitez pas à m'éclairer) ).

Afficher plusieurs onglets n'est en fait pas difficile. Element a un composant d'onglets prêt à l'emploi, donc j'utilise simplement une navette pour écrire du code, je retrousse mes manches et je commence à écrire. Après avoir écrit un test, il n'y a vraiment aucun problème. pas nécessaire. Trop simple, laissez-le à l'aperçu du produit :

Copiez l'adresse du navigateur et collez-la ailleurs, mais l'onglet ne peut pas être reproduit correctement.
Les sauts doivent être implémentés dans les onglets et ils doivent pouvoir revenir.

La première question est relativement simple. J'écris à la main un 伪路由 basé sur le hachage pour mettre l'identifiant de l'onglet actuel dans l'URL, puis lorsqu'il est repris, j'ouvre l'onglet correspondant en fonction de l'URL.

Astuce : Concernant la façon d'implémenter le routage, veuillez lire mon autre article de blog sur l'implémentation d'un routage frontal par vous-même.

La deuxième question est probablement au centre de cet article. Voici une description détaillée des exigences. Chaque onglet peut être 跳转 à l'intérieur de l'onglet. Le saut ici est fondamentalement le même que celui de vue-router. pousser, remplacer, revenir en arrière, peut également prendre des paramètres.

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

Copier après la connexion

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

Copier après la connexion

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