现在做前端,最流行的是啥?当然是层出不穷,功能繁多的框架了。目前主流的三大前端框架:Rreact、Angular、Vue。其中vue是尤雨溪大神开发的框架,近两年vue有多火,看看他Github上的starts就知道了。vue这么流行,作为多年krpano开发者也想尝尝鲜,所以最近撸一个案例出来。通过本篇文章,你可以了解到:
1.如何将krpano封装成组件;
2.简单的全景组件和其他组件的结合使用;
众所周知,组件是vue的核心内容,组件的有点就是高复用性。我们首先要做的就是把通过krpano生成的全景组件化,这样就可以随时复用了。
首先使用vue cli脚手架生成基本的vue项目,解构如下:
关于vue的相关知识,这里不讨论,有不明白的小伙伴可以去vue的官网查看或者自行百度教程,网上有很多关于vue的详细教程哦。
2.将全景作为静态文件资源加入vue项目中。krpano生成的全景默认文件夹是vtour,我们把整个vtour文件夹复制到vue项目中的static中。vue项目中的静态资源都是放在static文件夹中(当然也可以修改,这里不讨论)。
3.构建vtour组件。由于krpano没有提供npm包(当然也不会提供,你懂得),所以只能通过script引入相关文件。krpano最关键的是tour.js,所以需要修改index.html文件。在文件中引入tour.js。由于我们将vtour放在static中,所以路径改变了,添加如下(注意文件路径):
...
<script src="./static/vtour/tour.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
...
3.编写vtour组件。编写vtour组件的目的就是可以移植到其他项目中,也就是所谓的模板。在componennts目录下加入Vtour.vue文件,解构如下:
接下来就是vue组件的编写,具体的组件写法这里不讨论,有几个点需要注意:
1.在钩子函数mounted中添加嵌入函数:
embedpano({swf:"./static/vtour/tour.swf", xml:"./static/vtour/tour.xml",target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
embedpano是全景内容的嵌入函数,挂载在id=pano的元素上,之所以在mounted函数中嵌入,是因为需要等待元素加载完成才能渲染,否则会报错。
2.因为vue组件只能有一个根元素,所以我们需要在id=pano的元素外在包裹一层,这样就可以组件中添加其他元素;
到此,一个基本的Vtour组件就写完了。然后在路由中引入文件,在router目录中的index.js中import Vtour组件,并写进路由中,如下:
这是运行:npm run dev,你会发现,全景已经成功运行,就像之前打开过全景项目一样,这样说明Vtour组件编写成功了!
组件式开发的优点不言而喻,尤其是大型项目而言,更是用起来酸爽无比。
单单一个Vtour组件似乎撑不起场面,虽然现在已经很完美了。我给Vtour写了一个显示二维码的子组件Qrcode.vue,点击二维码按钮调用子组件。
自此这个上手案例就完成了,希望大家能从中收获到一些东西。
需要的源码的小伙伴可以到github上下载,github地址为:
https://github.com/CiroLee/pano_vue
(记得给颗星哦~~!)
或公众号回复 “框架”获取预览地址
扫描二维码或者点击阅读原文预览: