How to implement the function of online customization of patterns in canvas in the mini program-H5 Tutorial-php.cn

The content of this article is about how to realize the online pattern customization function in canvas in the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Preface

Recently I received a request for a universal background frame page based on vue and element-ui. The specific requirements are as follows:

It requires high versatility and needs to be used in more than forty sub-projects later, so most places are made configurable.
It is required to be in the form of scaffolding. It can be installed with npm
It is required to implement multiple tabs, and multiple tabs can be echoed through the browser url. Moreover, a history record must be maintained in the tab, and you can go back
Components require asynchronous loading to reduce the first screen loading time.

Obviously, this is an ERP application. Students who have done JSP and other backends should be familiar with multi-page tabs.

Then let’s talk about implementation.

High versatility

In fact, there is nothing difficult about this. It is just a little troublesome. Extract all the data and put it in a config file. Then import it into the frame page and bind it to the corresponding location. . There is a difficult choice here, that is, if all the data is bound to vue's data, due to the large amount of data, it will cause performance problems. If it is separated, the configuration file will look relatively complicated. Increase the learning cost for later users. This depends on the specific project requirements. Since my front-end performance requirements are not that high for the time being, I will temporarily use the solution of binding everything to data.

made into scaffolding form

Initially, the product's demand for this was made in the form of components, and then the npm package was released. To facilitate later updates, just update npm. There is no need to copy and paste and replace each project, but since this is a framework page, Moreover, there are many configurable items, and there are many considerations such as implementing multiple tabs. In the end, I chose the scaffolding solution, even though it would be a little troublesome to upgrade later (the initial solution was to put the frame page in a folder. You can directly replace the folder when needed), but compared to components, it is still easier to maintain. Moreover, you can write an updated scaffolding later. After all, the cost of publishing an npm tool is too low now.

It is my first time to develop scaffolding. After reading many community posts, I found that most of the current scaffolding is generally based on two forms, one is based on file copying, and the other is based on git-clone. After comparison, I think the file The copying is a bit complicated. I actually just need a tool that can be installed with one click, so the git-clone method is more suitable for me.

The following is the code of the scaffolding. Although it is only a simple fifty or sixty lines of code, it took me a whole morning to check the information and go through the pits.

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

Copy after login

If you have questions or interest in this scaffolding, you can directly access the code tab-cli on github

Implement multiple tabs

If you want to implement multiple tabs, vue-router is basically useless. Why? vue-router switches a single component based on the URL, while the tab requires multiple sub-components to exist inside the component at the same time, so routing is not qualified (at least I think so. If you have a better solution, please feel free to enlighten me) ).

Displaying multiple tabs is actually not difficult. Element has a ready-made tab component, so I just use a shuttle to write code. I just roll up my sleeves and start writing. After writing a test, there are no problems. It really is not necessary. Too simple, leave it to product preview:

Copy the browser address and paste it somewhere else, but the tab cannot be echoed correctly.
Jumps need to be implemented within tabs, and they must be able to return.

The first question is relatively simple. I hand-write a hash-based pseudo-routing and put the id of the current tab into the url, and then when it is echoed, open the corresponding tab according to the url.

tip: Regarding how to implement routing, please read my other blog post on implementing a front-end routing by yourself.

The second question is probably the focus of this article. Here is a detailed description of the requirements. Each tab can jump inside the tab. The jump here is similar to that of vue-router. It's almost the same as above, but it needs to be able to push, replace, back, and can also take parameters.

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

Copy after login

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

Copy after login

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