小程序中canvas如何实现图案在线定制的功能

2023-05-19 知识 372阅读 投稿:又晴氏

小程序中canvas如何实现图案在线定制的功能

第二个问题,大概就是本文的重点了,这里详细说明一下需求,每个 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与h5如何实现视频截图功能

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

标签:
声明:问客百答所有(内容)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系我们将尽快删除