小程序开发如何实现座位图选座--h5与小程序交互

背景

最近项目提出新需求，在小程序上根据不同客户提供的门店座位图，实现点击座位图上的座位就能预定选座，并且要像猫眼电影一样可缩放、拖拉、单击放大、双击缩小。刚接到需求有点蒙，每一个客户的图片都不一样，没有规律可循，怎么搞？

于是开始技术研究，首先座位图以及每个座位的信息肯定是由API返回，加之需要缩放、拖拉，单纯由小程序端布局难度很大（目前还没有发现很好的手势库），因此果断选择webview与小程序进行交互；webview我将采用vue编写，拖拉、缩放我选用了hammerjs这个手势库；最重点的是如何生产每个座位的信息，我采用svg热区的形式，通过ps的矩形工具将图片的每个座位框选出来，导出svg，使用浏览器打开，按下F12拿到每个座位的x/y/width/height。

好了，技术分析完毕。此篇文章不讲简单的移动端适配和webview交互，我重点记录座位图的实现原理以及缩放、拖放的计算逻辑。

技术选型

1. 移动端适配选用lib-flexible+px2rem-loader；

2. 小程序与webview交互使用weixin-js-sdk；

3. vue手势库使用hammerjs

制作座位图热区信息
前面讲过，通过ps的矩形工具将图片的每个座位框选出来，导出svg，使用浏览器打开，按下F12拿到每个座位的x/y/width/heigth。至于如何生产svg需要大家自行去百度，或者问问美工。浏览器打开后，看到的界面是这样的，记录好x,y,width,heigth。

vue布局