首頁 >web前端 >H5教程 >小程式中canvas如何實現圖案線上客製化的功能

小程式中canvas如何實現圖案線上客製化的功能

不言原創: 2018-08-16 15:00:102126瀏覽

這篇文章帶給大家的內容是關於小程式中canvas如何實現圖案線上客製化的功能，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前言

最近收到一個這樣的需求,要求做一個基於 vue 和 element-ui 的通用後台框架頁,具體要求如下:

要求通用性高,需要在後期四十多個子專案中使用，所以大部分地方都做成可配置的.
要求做成腳手架的形式.可以 npm 安裝
要求實現多頁籤,並且可以透過瀏覽器 url 回顯多頁籤.而且頁籤內要維護一個歷史記錄，可以後退
元件要求非同步載入,減少首屏載入時間.

很明顯,這就是一個 類別 ERP 的應用. 做過 JSP 等後台的同學,對多頁簽應該都很熟悉吧.

那接下來我們就來談談實現.

通用性高

這點其實沒啥難點,無非就是麻煩了點,把所有的數據,都提取出來,放在一個config 文件裡面.然後在框架頁裡面引入,並且綁定到相應的位置上去. 這邊有個比較難以取捨的問題，就是如果把一溜的資料全部綁定到vue 的data 上面，由於資料量比較多，會導致效能問題，如果分開，又會使設定檔看起來相對複雜，增加後期使用人員的學習成本。這塊要看具體的專案需求，由於我這邊暫時對前端的效能要求沒那麼高，所以暫時用全部綁定到 data 的方案

做成腳手架形式

起初產品對這個的需求使做成組件的形式，然後發布npm 包，方便後期更新的時候，只需更新一下npm 就可以了，無需每個項目去複製粘貼替換，但是基於這是一個框架頁，而且可配置項非常多，還要實現tab 多頁簽等多方面的考慮，最終選擇了腳手架的方案，即便這樣後期升級會稍微麻煩一點(起初的方案是框架頁放在一個文件夾裡，到時候直接替換該資料夾)，但相對於元件來說，還是更好維護的，況且後期可以再寫一個更新的腳手架，畢竟現在發布一個npm 工具的成本實在是太低了。

第一次開發鷹架，看了很多社區的帖子，發現目前大部分腳手架，一般都基於2種形式，一種基於文件複製的形式，另一種基於git-clone 的形式，經過對比，我覺得文件複製的有點複雜了，我其實只是需要一個能一鍵安裝的工具而已，所以git-clone 的形式還是比較適合我。

以下就是鷹架的程式碼，雖然只是簡單的五六十行程式碼，不過查資料＋趟坑，也花了我一個上午的時間。

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

如果你這個鷹架有疑問或興趣，可以直接存取 github 上的程式碼 tab-cli

實現多頁簽

要實現多頁簽，那麼 vue-router 基本上算是廢了，為什麼？ vue-router 是根據url 來切換單一元件的，而頁籤則需要再元件內部同時存在多個子元件的，所以路由無法勝任（至少我是這麼認為的，如果你有更好的方案，懇請不賜教）。

多個頁籤的顯示，其實不難， element 有現成的tab 組件，於是老夫寫代碼就是一把梭，擼起袖子就是乾，噼裡啪啦一頓寫，寫完一測，沒有任何問題，實在是不要太簡單，丟給產品預覽：

複製瀏覽器位址到別的地方貼上，tab 無法正確回顯
tab 內需要實現跳轉，而且要能返回。

第一個問題比較簡單，自己手寫一個基於 hash 的 偽路由 把目前 tab 的 id 放到 url 上去，然後回顯的時候，根據 url 打開對應的 tab.

tip: 關於如何實現路由，請看我另外一篇部落格自己動手實現一個前端路由

第二個問題，大概就是本文的重點了，這裡詳細說明一下需求，每個tab 都可以在tab 內部跳轉 ,這裡的跳轉，要做的跟vue-router 的有大體上差不多，要能push, replace, back,還能帶參數。

那么怎么实现呢？首先维护一个打开的 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如何實現圖案線上客製化的功能

前言

通用性高

做成腳手架形式

實現多頁簽

组件异步加载

相關文章