vue结合手绘图开发（含微信小程序使用）

由于小程序现不支持手绘图开发，并且关于这方面资料又少，看到关于这种功能实现的小程序也有，便当下力断下手琢磨。

需求

• 移动端web开发
• 手绘图
• 微信小程序

技术选型

• vue-cli2
• vant
• vue baidu map
• web-view

手绘图制作

由于最终要在小程序展现，小程序也不支持，但小程序支持web-view嵌入，所以这一切有了起点。

• 首先便是拿到手绘图，进行瓦片图切片，手切自然是不会的，所以只能寻找工具。
• 工具下载地址：链接提取码：mc27
• 拿到切好的手绘图，进行下一步

搭建web页面，放入手绘图

• 瓦片图制作完成，需要放入阿里云服务器，或者本地服务器上。
• 百度地图api似乎不支持本地加载瓦片图。
• 成功效果：
  .
• 具体代码

<template>
  <baidu-map class="map" :center="center" :zoom="zoom">
  	<bm-tile
       tileUrlTemplate="域名/tiles/{Z}/tile-{X}_{Y}.png"
     >
     </bm-tile>
  </baidu-map>
</template>

层级，坐标z,x,y,上面生成工具汇自动生成，所以也不需要太多操作，正常使用即可。

小程序如何引入并进行使用

• 小程序web-view可以完全将页面显示出来，所以将页面链接放入web-view就可以查看了
• 具体代码：

	<web-view wx:if="{{!hideWebview}}" src="{{url}}"></web-view>

• 具体业务开发就直接在web页面执行了，对于小程序信息交互等微信官方文档都有
  https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html