ionic 简单的照片查看页面

近期项目有个需求,要扫码查看图片和地图,既然是手机端,又没什么交互,那就还是用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等),就是版本有些折腾人。

原文地址:https://www.cnblogs.com/liuyouying/p/10994149.html

时间: 2024-10-22 20:29:51

ionic 简单的照片查看页面的相关文章

【J2SE】java实现简单照片查看器

程序运行结果: 工程结构图: 程序代码: import java.awt.BorderLayout; import java.awt.FileDialog; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.Ke

Qt项目实战2:简单的图片查看器(1)

在博文http://www.cnblogs.com/hancq/p/5817108.html中介绍了使用空的Qt项目创建带有菜单栏.工具栏的界面. 这里,使用一个简单的图片查看器项目,来熟悉一下Qt的图片显示和基本操作. 该项目分为两部分: (1)实现图片的打开.关闭.居中显示.上一张/下一张切换 (2)实现图片的放大.缩小.左旋.右旋.另存为等操作 需要用的Qt类: QFileDialog QImage QPixmap QFileInfo 使用空的Qt项目创建带有菜单栏和工具栏的界面的操作参考

文顶顶 iOS开发UI篇—简单的浏览器查看程序

文顶顶 iOS开发UI篇—简单的浏览器查看程序 iOS开发UI篇—简单的浏览器查看程序 一.程序实现要求 1.要求 2. 界面分析 (1) 需要读取或修改属性的控件需要设置属性 序号标签 图片 图片描述 左边按钮 右边按钮 (2) 需要监听响应事件的对象,需要添加监听方法 左边按钮 右边按钮 二.实现基本功能的程序 1 // 2 // YYViewController.m 3 // 03-图片浏览器初步 4 // 5 // Created by apple on 14-5-21. 6 // Co

iOS开发UI基础—简单的浏览器查看程序

iOS开发UI基础-简单的浏览器查看程序 一.程序实现要求 1.要求 2. 界面分析 (1) 需要读取或修改属性的控件需要设置属性 序号标签 图片 图片描述 左边按钮 右边按钮 (2) 需要监听响应事件的对象,需要添加监听方法 左边按钮 右边按钮 二.实现基本功能的程序 1 // 2 // YYViewController.m 3 // 03-图片浏览器初步 4 // 5 // Created by apple on 14-5-21. 6 // Copyright (c) 2014年 itcas

win10图片打开方式里没有默认照片查看器的解决方法

今天安装好win10后发现打开图片的默认程序是win10自带的画图工具,非常不方便,并且右键选择打开方式里边也找不到默认的“照片查看器”.百度搜索了一下关于win10打开方式恢复默认照片查看器的方法,虽然有用但非常繁琐.下面电脑配置网为大家总结了3种解决win10图片打开方式恢复为默认照片查看器的方法.(推荐使用第一种,简单易用) Win10怎么把图片打开方式恢复默认照片查看器方法一: 新建一个TXT文本文档,把以下代码复制粘贴到其中: Windows Registry Editor Versi

首次使用photoshop制作简单的静态网页页面

刚刚进入IT领域,我首先接触到的是PhotoShop软件.经过一周的学习,我对PS软件已经有了初步的认识.PS首先是一款修图软件,对于图片中不太美观的地方可以按照自己的想法做任意的修改,利用"蒙版"工具可以做图片间的融合,这给我们提供了巨大的创作空间:其次,它可以进行图片和动画的制作,静态网页页面和多张图片的联动动画都可以在这里完成. 周五我做了两个简单的静态网页页面:网上购物的注册界面和登录页面,也借此检测一下自己对PS软件的掌握程度.在制作过程中,我发现许多问题并从中总结到了一些经

sharepoint 2013 自定义列表查看页面附件打开新页面方法 dispform attachments open new page

我们在sharepoint的列表中,打开某一条数据,如果那条数据有附件,打开附件的时候,总是会把当前的页面给替换掉.如何在点击附件的时候,打开新页面,可以用一下一段脚本来处理. <script> $(document).ready(function () { if ($("#idAttachmentsTable") != null) { $('#idAttachmentsTabletbody tr td').each(function () { var href = $(t

最简单的图片查看器

最简单的图片查看器,支持放大.缩小.鼠标拖动. 下面是代码,非常简单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pic view</title> </head> <body> <div id="pic" class="pic"

Win10图片打开方式没有“Windows照片查看器”,如何找回?

如果你是全新安装的Win10正式版,那么就会发现当在图片上点击右键时,“打开方式”菜单里熟悉的“Windows照片查看器”不见了,换成了Win10全新的“照片”应用.而如果你是从Win7/Win8.1升级到的Win10系统,“Windows照片查看器”则会被保留.下面就来分享一下如何找回Win10图片打开方式中的“Windows照片查看器”选项: 首先,打开注册表编辑器(1.Win10打开注册表编辑器的方法), Win10打开注册表编辑器的方法 方法一:运行“regedit”命令打开注册表编辑器