微信公众号最佳实践 （ 9.3）产品相册

最新推荐文章于 2024-04-02 10:30:03 发布
最新推荐文章于 2024-04-02 10:30:03 发布
阅读量712 收藏 3
点赞数
分类专栏： 微信公众号开发最佳实践 文章标签： 产品相册 微信公众号开发最佳实践
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37968920/article/details/82229265
版权

产品相册

对于地产、婚纱等行业来说，其产品经常是以大幅照片展示给用户，以视觉效果来吸引顾客来购买，对于这些行业的微信公众账号，我们可以开发一个相册功能。

这里写图片描述

这里写图片描述

这里写图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>户型鉴赏</title>
    <META charset=utf-8>
    <meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link href="css/styles.css" type="text/css" rel="stylesheet" />
    <link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/klass.min.js"></script>
    <script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>

    <script type="text/javascript">
      (function(window, PhotoSwipe){
        document.addEventListener('DOMContentLoaded', function(){
          var options = {
            preventHide: true,
            getImageSource: function(obj){
              return obj.url;
            },
            getImageCaption: function(obj){
              return obj.caption;
            }
          },

          instance = PhotoSwipe.attach(
                        [
                            { url: 'imghx/image0132.jpg', caption: 'A户型 二室二厅一卫 80.07平方米'},
                            { url: 'imghx/image0092.jpg', caption: 'B户型 二室二厅一卫 84.65平方米'},
                            { url: 'imghx/image0032.jpg', caption: 'C户型 二室二厅二卫 103.89平方米'},
                        ],
                        options
          );

          instance.show(0);
        }, false);
      }(window, window.Code.PhotoSwipe));
    </script>
  </head>
  <body>
    <script type="text/javascript">
      document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
      });
      document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideToolbar');
      });
    </script>
  </body>
</html>

jquery-mobile-2.html

<!DOCTYPE html>
<html>
    <head>
    <title>PhotoSwipe</title>
    <link rel="stylesheet" href="../lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <link href="../photoswipe.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        div.gallery-row:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
        div.gallery-item { float: left; width: 33.333333%; }
        div.gallery-item a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
        div.gallery-item img { display: block; width: 100%; height: auto; }
        #Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript" src="../lib/simple-inheritance.min.js"></script>
    <script type="text/javascript" src="../lib/jquery.animate-enhanced.min.js"></script>
    <script type="text/javascript" src="../code-photoswipe-jQuery-1.0.11.min.js"></script>
<!--     <link href="css/styles.css" type="text/css" rel="stylesheet" />
    <link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/klass.min.js"></script>
    <script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script> -->
    <script type="text/javascript">
        /*
            This example shows how to set up PhotoSwipe using jQuery Mobile.
        */
        $(document).ready(function(){
            $('div.gallery-page').live('pageshow', function(e){
                // Re-initialize with the photos for the current page
                $("div.gallery a", e.target).photoSwipe();
                return true;
            })
        });
    </script>
</head>
<body>

<div data-role="page" id="Gallery1" class="gallery-page">

    <div data-role="content">
        <div class="gallery">
            <div class="gallery-row">
                <div class="gallery-item"><a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" width="30%" /></a></div>
                <div class="gallery-item"><a href="images/full/002.jpg" rel="external"><img src="images/thumb/002.jpg" alt="Image 002" /></a></div>
                <div class="gallery-item"><a href="images/full/003.jpg" rel="external"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>
            </div>
            <div class="gallery-row">
                <div class="gallery-item"><a href="images/full/004.jpg" rel="external"><img src="images/thumb/004.jpg" alt="Image 004" /></a></div>
                <div class="gallery-item"><a href="images/full/005.jpg" rel="external"><img src="images/thumb/005.jpg" alt="Image 005" /></a></div>
                <div class="gallery-item"><a href="images/full/006.jpg" rel="external"><img src="images/thumb/006.jpg" alt="Image 006" /></a></div>
            </div>
            <div class="gallery-row">
                <div class="gallery-item"><a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a></div>
                <div class="gallery-item"><a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a></div>
                <div class="gallery-item"><a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a></div>
            </div>
            <div class="gallery-row">
                <div class="gallery-item"><a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a></div>
                <div class="gallery-item"><a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a></div>
                <div class="gallery-item"><a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a></div>
            </div>
        </div>
    </div>

</div>
</body>
</html>

整体index.php代码如下：

<?php
/*
    CopyRight 2018 All Rights Reserved
*/

define("TOKEN", "weixin");

$wechatObj = new wechatCallbackapiTest();
if (!isset($_GET['echostr'])) {
    $wechatObj->responseMsg();
}else{
    $wechatObj->valid();
}

class wechatCallbackapiTest
{
    public function valid()
    {
        $echoStr = $_GET["echostr"];
        if($this->checkSignature()){
            echo $echoStr;
            exit;
        }
    }

    private function checkSignature()
    {
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];
        $token = TOKEN;
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr);
        $tmpStr = implode($tmpArr);
        $tmpStr = sha1($tmpStr);

        if($tmpStr == $signature){
            return true;
        }else{
            return false;
        }
    }

    public function responseMsg()
    {
        $postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
        if (!empty($postStr)){
            $this->logger("R ".$postStr);
            $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
            $RX_TYPE = trim($postObj->MsgType);

            switch ($RX_TYPE)
            {
                case "event":
                    $result = $this->receiveEvent($postObj);
                    break;
                case "text":
                    $result = $this->receiveText($postObj);
                    break;
            }
            $this->logger("T ".$result);
            echo $result;
        }else {
            echo "";
            exit;
        }
    }

    private function receiveEvent($object)
    {
        $content = "";
        switch ($object->Event)
        {
            case "subscribe":
                $content = "欢迎关注 德强1012 ";
                break;
            case "unsubscribe":
                $content = "取消关注";
                break;
        }
        $result = $this->transmitText($object, $content);
        return $result;
    }

    private function receiveText($object)
    {
        $keyword = trim($object->Content);
        $category = substr($keyword,0,6);
        $code = trim(substr($keyword,6,strlen($keyword)));
        switch ($category)
        {
            case "会员":
                $content[] = array("Title" =>"会员卡", 
                "Description" =>"点击图片领取会员卡", 
                "PicUrl" =>"http://pic2.ooopic.com/01/38/77/75bOOOPICea.jpg", 
                "Url" =>"http://1.dq095.applinzi.com/91_membercard/member.php?openid=".$object->FromUserName);
                break;http:
            case "预约":
                $content[] = array("Title" =>"预约口腔医生", 
                "Description" =>"点击图片开始预约", 
                "PicUrl" =>"http://pic4.nipic.com/20091021/3320206_171831027464_2.jpg", 
                "Url" =>"http://1.dq095.applinzi.com/92_order/order.php?openid=".$object->FromUserName);
                break;
            case "相册":
                $content[] = array("Title" =>"产品相册", 
                "Description" =>"点击图片开始预约", 
                "PicUrl" =>"http://img2.imgtn.bdimg.com/it/u=3675030458,1339124782&fm=26&gp=0.jpg", 
                "Url" =>"//1.dq095.applinzi.com/93_album/1/huxing.php");
                break;
            case "照片":
                $content[] = array("Title" =>"产品相册", 
                "Description" =>"点击图片开始预约", 
                "PicUrl" =>"http://pic.90sjimg.com/back_pic/u/00/02/82/06/561c95213aaa4.jpg", 
                "Url" =>"http://1.dq095.applinzi.com/93_album/2/examples/jquery-mobile-2.html");
                break;
            default:
                $content = "";
                break;
        }
        if(is_array($content)){
            $result = $this->transmitNews($object, $content);
        }else{
            $result = $this->transmitText($object, $content);
        }
        return $result;
    }

    private function transmitText($object, $content)
    {
        $textTpl = "<xml>
                        <ToUserName><![CDATA[%s]]></ToUserName>
                        <FromUserName><![CDATA[%s]]></FromUserName>
                        <CreateTime>%s</CreateTime>
                        <MsgType><![CDATA[text]]></MsgType>
                        <Content><![CDATA[%s]]></Content>
                    </xml>";
        $result = sprintf($textTpl, $object->FromUserName, $object->ToUserName, time(), $content);
        return $result;
    }

    private function transmitNews($object, $arr_item)
    {
        if(!is_array($arr_item))
            return;

        $itemTpl = "    <item>
                            <Title><![CDATA[%s]]></Title>
                            <Description><![CDATA[%s]]></Description>
                            <PicUrl><![CDATA[%s]]></PicUrl>
                            <Url><![CDATA[%s]]></Url>
                        </item>
                    ";
        $item_str = "";
        foreach ($arr_item as $item)
            $item_str .= sprintf($itemTpl, $item['Title'], $item['Description'], $item['PicUrl'], $item['Url']);

        $newsTpl = "<xml>
                        <ToUserName><![CDATA[%s]]></ToUserName>
                        <FromUserName><![CDATA[%s]]></FromUserName>
                        <CreateTime>%s</CreateTime>
                        <MsgType><![CDATA[news]]></MsgType>
                        <Content><![CDATA[]]></Content>
                        <ArticleCount>%s</ArticleCount>
                        <Articles>
                        $item_str</Articles>
                    </xml>";

        $result = sprintf($newsTpl, $object->FromUserName, $object->ToUserName, time(), count($arr_item));
        return $result;
    }

    private function logger($log_content)
    {
    }
}


?>
dq_095
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue开发微信公众号调用相机和相册(上传到自己的服务器)
qq_47381208的博客
08-01 1916
vue开发微信公众号调用相机和相册(上传到自己的服务器)
微信公众号无限回调系统开源源码
03-14
微信公众号无限回调系统是一种能够帮助企业实现自动化客服的工具。它可以通过设置关键词和回复内容，让用户在发送消息后得到相应的自动回复。 此外，该系统还支持多级菜单、图文混排等功能，使得用户与企业之间的...
【微信技术-微信公众号】-------- 实现拍照或选择相册接口:wx.chooseImage的使用实例[JS-SDK]
皮皮冰要做大神
03-05 2977
一，【JS-SDK】拍照或从手机相册中选图接口:wx.chooseImage的使用实例. 1.使用wx.chooseImage接口需要如下几步缺一不可： 这里我是使用（测试公众号）测试出来的效果。 （1）请到微信官方文档的公众号下看说明文档：（必须先了解 才好看继续下面的示例） （2）请按步骤进行配置：上图的【1.1.1-1.1.5】的步骤来进行，才能调用【wx.chooseImage】否则是没有权限的，会提示【errMsg: "chooseImage:fail, the perm...
微信公众号-图片裁剪并实现上传
最新发布
rolinabc的博客
04-02 682
看到这个诉求，我就去扒微信的api，发现有个属性叫wx.cropImage是做图片裁剪的，且可以传入对应的裁剪比例。在介入开发后才发现，这个是小程序的api，而非微信公众号的。阅读文档发现，小程序和微信公众号中都有一个叫chooseImage的api，但是返回的数据却不一样，小程序大家开发的都比较多了。选择成功后，返回localIds，是选定照片的本地ID列表，注意这个和小程序是不同的。组件具体的使用，我这里就不赘述了，上述github上有详细的使用文档。2、js代码，实现图片选择&裁剪&上传。
公众号 h5 页面 图片上传 wx.chooseImage使用
攻城喵小猫的博客
07-01 1万+
刚开始直接在H5里使用了wx.chooseImage,发现在开发者工具中不断的报错the permission value is offline verifying,慢慢开始搜索才发现在小程序的web-view里也必须使用jweixin,其实就是个公众号网页， 1.引入JS文件 // 推荐使用1.3.2以上的版本，之前的版本很多坑
uni-app微信公众号（2）——商铺展示、商品详情、购物车
徐小硕—心之所向，素履以往
10-29 2927
唔...因为这个公众号做的是关于一个墓园的公众号（~_~）,所以有很多东西，都涉及到一些“不太好”的东西，所以大家看的时候，还挺谅解~ 接下来做了一个商品展示，购物车展示，加入购物车等功能，如图所示 （1）商铺展示页面 商铺展示页，借鉴了uView组件中的垂直分类 垂直分类uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://www.uviewui.com/layout/menu.html代码里面也都有，大家可以下载下来看一下.
微信公众号多域名回调系统 微信公众号多域名回调功能：微信公众号后台默认只能授权2个网页域名，用本系统突破这个限制，用同一个公众号
09-13
这是一款基于ThinkPHP6.0开发的微信公众号多域名回调系统。本系统有如下功能： 微信公众号多域名回调功能：微信公众号后台默认只能授权2个网页域名，用本系统突破这个限制，用同一个公众号对接无限多个网站。网站...
PHP微信公众号管理系统.zip
05-02
PHP微信公众号管理系统 PHP微信公众号管理系统 PHP微信公众号管理系统 PHP微信公众号管理系统 PHP微信公众号管理系统 PHP微信公众号管理系统 PHP微信公众号管理系统 PHP微信公众号管理系统 PHP微信公众号...
通过搜狗搜索引擎爬取微信公众号文章
02-22
通过搜狗搜索引擎爬取微信公众号文章 主要功能如下： 按照搜索公众号id和关键字两种方法爬取文章的标题、内容、发布时间、 公众号名称 以正确编码格式存储到数据库中 实现将新增数据添加入数据库 在关键字检索方式...
微信公众号真机调试（详细说明文档有截图）
03-23
1.使用TBS Studio进行微信公众号真机调试扫描二维码报错无法安装线上TBS内核，原因是微信内置浏览器 x5内核以弃用升级到最新的xweb内核； 2.本方法是在最新版微信基础上真机公众号调试，手机电脑同屏利用浏览器的...
基于服务调度的微信公众平台开发架构设计与实现
05-04
基于服务调度的微信公众平台开发架构设计与实现
微信公众号调用手机摄像头拍照和本地相册不错的例子
06-05
微信公众号调用手机摄像头拍照和本地相册，上传服务器，不错的例子
微信公众号后台逻辑图.vsdx
03-19
微信公众号后台逻辑图，手机 服务器 自己服务器交互流程图
java微信公众号调用手机摄像头拍照和本地相册
05-03
java微信公众号调用手机摄像头拍照和本地相册，上传服务器，java微信公众号内部调用本地摄像头，web项目
利用微信公众号实现商品的展示和支付（1）
04-03 1065
在较早随笔《微信小程序结合后台数据管理实现商品数据的动态展示、维护》中介绍过使用小程序实现商品的展示，其实基于对应的接口，我们使用H5页面来开发基于公众号的商品展示和支付，也是产不多的原理，不过H5页面和小程序的界面处理代码有一些差异吧了，整体的实现思路倒是差不多的。本篇随笔介绍基于H5页面的开发，参照一些微店的展示页面，实现商品的展示和支付等操作。 1、商品的列表展示 和小程序一样的处理，我们首先需要利用微信开发框架的后台，对商品数据进行统一的录入和管理。并提供对应的接口让我们获取数据，就可以在前端获取.
关于“微信订阅号/制作相册”
cteng的专栏
06-17 8703
微信订阅号/制作相册：用户上传几张图片，然后选择参数，发布为一个带有动画特效的“相册”。纯粹就是一个功能单一的web服务吧，这里主要的问题在于图片数据托管存在哪里？  其实搞个“绿茶订阅号”也没什么打不了的，不过问题是，图片存储这个网络传输过程很不可靠。可以做成本地模式。但是复杂的“个性化编辑”功能就需要较大的开发量。  这里的一个问题是：用户不满意页面上的版权性文字（XXX制
微信公众号开发之调起拍照或从手机相册中选图接口
moon
05-25 1万+
本文中的config接口注入权限验证配置在微信公众号开发之调起微信扫一扫接口已讲解过了，在这里就不赘述了。拍照或从手机相册中选图接口wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'came...
微信公众号js接口，实现图片的上传（拍照+本地相册）
热门推荐
hpugym的专栏
06-23 3万+
今天测试了一把在微信公众号里边的调用JSSDK接口，从而实现在微信公众号里边进行图片的上传（可以选择拍照，也可以选择本地的相册），但是在做的过程中发现给的技术接口文档是真坑，一点都不详细，网上的资源也不多，所以做起来感觉十分的费劲。不过经过一个下午的琢磨，中终于实现的该项功能。       大致流程就是，点击上传的图片，开始调用chooseImage()接口，选择拍照或者相册，选定图片，之后调用
Java版微信公众号开发教程和实践经验分享
微信公众账号开发实践 xiaoqrobot是一个基于微信公众账号开发的项目，提供了生活、娱乐的功能。该项目使用了微信公众账号的API，实现了周边搜索功能定位比较准确，提供了路线导航和聊天唠嗑功能。该项目的开发经验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值