ionic 简单的照片查看页面

Posted 2022-01-01 liuyouying

近期项目有个需求，要扫码查看图片和地图，既然是手机端，又没什么交互，那就还是用ionic/Angular来开发吧

从其它项目里把文件夹拷过来，node_module文件夹保留，把其它项目的业务逻辑和界面删除，保存公共的部份，tab分成图片查看和地图浏览，空框架跑起来正常

 

1、node_module，用npm install跑一下有些警告，但还是能用

 

2、图片直接用<img>或<ion-img>只能普通展示，不支持双击放大或手指缩放，还有这种事？

 

3、网上找了半天，有个叫【ionic-img-viewer】的插件可以用于查看图片。使用倒是方便，直接<img>标签增加 imageViewer 属性即可，安装后，报各种JS错

 

4、看提示像是版本不对，各种降版本后正常了，就一个普通的点击查看，带遮罩，总算能支持手指缩放了。但--prod的发布版本又不行了，也是报各种版本错。。。

 

5、一个个尝试版本，折腾了半天（忘了具体是哪些版本对应），最后终于可以了，也是一步步看着版本报错的提示

 

6、地图浏览页面，网上有个贴子（忘了地址），里面有现成的百度、高德、谷歌地图demo，就是ionic的，直接复制粘贴过来就可以了，去选一下百度上的地址，复制下经纬度，在JS里赋值就行了，以后也是把后台的经纬度取出来就行。

 

本想总结下的，一时也没什么特别好写的，大概就是ionic快速开发一个手机端小的交互应用，还是很方便的，做出来有模有样，够用了，部署也方面（就是静态的html和JS等），就是版本有些折腾人。