How canvas realizes the function of the pattern customization on line in small program

This article brings the content is about the small program canvas how to achieve the function of the pattern on-line customization, there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

Objective

Recently received a requirement to make a common background framework page based on Vue and Element-ui, with the following specific requirements:

1. Versatility is required and needs to be used in more than 40 sub-projects at a later stage, so most places are configurable.

2. The form of scaffolding is required. You can install NPM

3. Multiple-page signatures are required, and multiple pages can be echoed back through the browser URL. And to maintain a history in the page, you can go back

4. components require asynchronous loading, reducing the first screen load time.

Obviously, this is an 类 ERP application. have done the JSP and other backstage classmates, to multi-page should be familiar with it.

Then let's talk about implementation.

High versatility

In fact, there is no difficulty, it is just a bit of trouble, all the data, all extracted, put in a config file inside. Then it is introduced in the frames page and is bound to the corresponding position. Here's a more difficult question, that is, if you're all bound to the data on Vue, Due to the large amount of data, it can lead to performance problems, if separated, it will make the configuration file appear relatively complex, increase the learning cost of later users. This piece depends on the specific project needs, because my side of the front-end performance requirements are not so high, so temporarily with all the data-bound scenarios

Scaffold Form

At first, the need for this product to make the form of components, and then release the NPM package, convenient for later update, only need to update NPM, no need to copy and paste replace each project, but based on this is a framework page, and configurable items are very many, but also to implement tab multi-page and many other considerations, Finally chose the scaffolding scheme, even if this post-upgrade will be a little more trouble (the original scenario is that the framework page in a folder, then directly replace the folder), but relative to the component, or better maintenance, and later can write an updated scaffolding, after all, now released a NPM The cost of the tool is simply too low.

The first development of scaffolding, read a lot of community posts, found that most of the scaffolding, is generally based on 2 forms, a form based on file replication, another based on the form of Git-clone, after comparison, I think the file copy is a bit complicated, I actually just need a key to install the tool only, So the form of git-clone is still more suitable for me.

The following is the scaffolding code, although it is just a simple fifty or sixty lines of code, but check data + trip pit, also took me a morning time.

#!/usr/bin/env Nodeconst 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 GI Tclone = require (' git-clone ') const Chalk = require (' Chalk ') program. Version (' 1.0.0 ', '-V,--version '). Parse (process . argv); Const QUESTIONS = [{type: ' input ', name: ' Name ', message: ' Please enter project name ', default: ' My-project ', Validate: (name) =    >{if (/^[a-z]+/.test (name)) {return true;    }else{return ' project name must begin with a lowercase letter '; }}}]inquirer.prompt (Questions). Then ((dir) =>{downloadtemplate (dir.name);})  function Downloadtemplate (dir) {//Determine if the directory already exists let Ishasdir = Fs.existssync (Path.resolve (dir));    if (Ishasdir) {spinner.fail (' current directory already exists! ');  return false;  } spinner.start (' The directory you selected is: ${chalk.red (dir)}, data loading, please later ... '); Clone template file Gitclone (' Https://github.com/noahlam/vue-multi-tab.git ', dir, null, function (ERR) {//Remove useless files shell.rm('-rf ', ' ${dir}/.git ') spinner.succeed (' Project initialization succeeded! ')    Run common Commands shell.cd (dir) spinner.start (' is helping you install dependencies ... ');    Shell.exec (' npm i ') spinner.succeed (' dependent installation succeeded! ') Shell.exec (' npm run Dev ')}}

If you have questions or interests with this scaffold, you can access the code on GitHub directly TAB-CLI

Implement multi-page signing

If you want to achieve a multi-page sign, then Vue-router basically is useless, why? Vue-router is based on the URL to switch a single component, and the tab needs to have multiple subcomponents inside the component, so the route is not competent (at least I think so, if you have a better plan, please do not hesitate to enlighten).

Multiple page sign display, in fact, it is not difficult, element has ready-made tab components, so I write code is a shuttle, the sleeve is dry, crackling a write, write a test, there is no problem, it is not too simple, lost to product preview:

1. Copy the browser address to paste elsewhere, TAB does not echo correctly

2. tab needs to achieve jump, and to be able to return.

The first question is relatively simple, write your own handwritten a hash based on the 伪路由 ID of the current tab to the URL, and then echo back, according to the URL to open the corresponding tab.

tip: about how to implement routing, see my other blog to implement a front-end routing myself

The second question, is probably the focus of this article, here is a detailed description of the needs, each tab can be in the tab inside 跳转 , where the jump, to do with the vue-router is roughly the same, to be able to push, replace, back, can also take parameters.

So how does it come true? Is it possible to start by maintaining an open tab list and then maintaining a list of used components (including parameters) in each list? Of course not, the components of the jump, parameter transfer, it is impossible for the user to implement these methods, I chose to encapsulate a common object, and then mounted on the vue.prototype. Then like Vue. $router. xxxx (my name is Vue. $tab) can be used anywhere on the page, if you are interested in specific implementation methods, please click the link at the end of this article to go to my GitHub warehouse to view.

Component Asynchronous loading

Previously only used Vue-router-based asynchronous loading method, but this project does not use Vue-router, how asynchronous? Turning over the official document of Vue is written like this:

Vue.component (  ' async-webpack-example ',  //This ' import ' function returns a ' Promise ' object.  () = Import ('./my-async-component '))

However, I tried, found an error, import can not be used here, changed require also not, do not know where I did not fix, if you happen to know and just have a free, please tell me, thank you! See this on the back of the Segmentfault, using Webpack's require.ensure can achieve

The first string is the component name, the second is the component path, and the third is chunkname (named 1.js,2.js....n.js if not specified) vue.component (' Home ', (resolve) + = { Require.ensure ([], () =>resolve (Require (' @/views/index.vue ')), ' Home ')})

By the way also in the webpack inside the output below configuration chunkFilename: '[name].js', , of course, the file name format can be according to your project needs to come, my side on the simplest

Related recommendations:

How canvas and H5 implement video capabilities

HTML5 Canvas Custom Rounded rectangle with dashed code example introduction