对于非公众平台网页,想调起图片预览组件,就跟公众号文章一样的图片阅读方式,实现起来是比较简单的,官方也提供了jssdk来做这个.详见 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3

但是本文并未采用jssdk实现,为什么呢?

jssdk需要先行注入配置,而配置需要到微信服务器进行验证,这样一来,会导致页面加载慢,用户体验差.

再说就一个图片预览功能,不可能设计到安全问题,因此,绕过了jssdk来实现图片预览.

代码如下:

  1. <script>
  2. var imgsObj = $('img');
  3. var imgs = new Array();
  4. for(var i = 0; i < imgsObj.size(); i++){
  5. imgs.push(imgsObj.eq(i).attr('src'));
  6. }
  7. $('img').on('click',function(){
  8. WeixinJSBridge.invoke('imagePreview', {
  9. 'current': $(this).attr('src'),
  10. 'urls': imgs
  11. });
  12. });
  13. </script>

最终效果和微信公众号文章的图片查看方式一样了

微信内置浏览器图片查看方式的原生实现(非jssdk)的更多相关文章

  1. PHP限制网页只能在微信内置浏览器中查看并显示

    微信现在算是火了,围绕微信开发的应用也越来越多了,前段时间,自己公司需要,用PHP写了一个微信应用,为了防止自己辛苦写成的PHP应用被盗用,于是 通过PHP做了限制,只能在微信自带的浏览器中才能打开本 ...

  2. 微信内置浏览器的JS API

    /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...

  3. 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub

    最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...

  4. 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]

    原文地址:  http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...

  5. 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

    微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...

  6. 2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题

    前言 今天投产了一个小项目,一个很简单的H5,有播放视频功能,使用了videojs插件. 之前也做过数个视频播放,视频的转压都按照既定流程进行,文件放到FTP后,iphone和安卓机测试下来都没有问题 ...

  7. ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别

    最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...

  8. 微信内置浏览器对于html5的支持

    微信内置浏览器对于html5的支持 来源: 作者: 热度:102 日期:14-06-10, 09:10 AM 我在做针对微信的HTML5应用, 目前遇到的几个问题是 一. 安卓版微信直接调用系统浏览器 ...

  9. 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏

    微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface) ...

随机推荐

  1. toB的产品经理和toc产品经理区别

    腾讯产品经理现身说法 曾经在UC做过2年to c的app,现在在腾讯做to b的产品. 做to c产品的时候,我很瞧不起做to b产品的同学,认为他们不过是做支撑的. 后来,我参与了一个to b平台级 ...

  2. LeetCode Binary Tree Maximum Path Sum 二叉树最大路径和(DFS)

    题意:给一棵二叉树,要求找出任意两个节点(也可以只是一个点)的最大路径和,至少1个节点,返回路径和.(点权有负的.) 思路:DFS解决,返回值是,经过从某后代节点上来到当前节点且路径和最大的值.要注意 ...

  3. Windows Azure移动终端云服务管理(公测版)

    概览 云在远方,管理在您手中.在这个移动为先 云为先的世界,服务不再是基于请求才提供,而是主动来到身边方便您的模式了.我们最近将会陆续推出几大移动端利器帮助您随时随地管理您的云服务. 首批利器之中排名 ...

  4. UVa10603 Fill

    解题思路:这是神奇的一题,一定要好好体会.见代码: #include<cstdio> #include<cstring> #include<algorithm> # ...

  5. 【英语】Bingo口语笔记(77) - 临时改变计划的表达

  6. for...else循环

    如果for循环完整结束,无break打断循环,那么执行else里面的内容,否则不执行. while True: n = raw_input('>') for x in n: if x == 'f ...

  7. 关于微信扫描二维码下载apk文件的细节设计

    微信使用的人数越来越多,渐渐的用户形成了一种习惯,扫描二维码的时候,也会打开微信去扫描,但是微信不支持第三方的链接下载,有些厂商已经发现了这一特点,所以在使用二维码下载自家的app时,会做一个提示,引 ...

  8. ios iPhone的一些基础知识,扫盲

    iPhone 4(2010 年):初始系统: iOS 4.0(GSM 版) (苹果第一次采用 iOS 为移动系统命名),iOS 4.2.2(CDMA 版)可以升级至:iOS 7.1.2 iPhone ...

  9. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:2.搭建环境-2.7. 配置资源与参数

    2.7.配置资源与参数 2.7.1. 修改主机名称 [root@linuxrac1 ~]# cd /etc/sysconfig [root@linuxrac1 sysconfig]# vi netwo ...

  10. source 命令

    作用: 当我修改了/etc/profile文件,我想让它立刻生效,而不用重新登录:这时就想到用source命令,如:source /etc/profile 介绍:source命令也称为“点命令”,也就 ...