微信公众平台开发(121) 微信二维码海报

简介: 关键字:微信公众平台 二维码 海报作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/weixin-poster.html    本文介绍微信公众平台下二维码海报的开发过程。

关键字:微信公众平台 二维码 海报
作者:方倍工作室
原文: http://www.cnblogs.com/txw1958/p/weixin-poster.html 

 

本文介绍微信公众平台下二维码海报的开发过程。

一、微信二维码海报介绍

微信二维码海报是指在海报中嵌入和微信用户关联的参数二维码的海报,用户分享推广之后,新用户可以被统计为被推广人员数,从而达到增加粉丝的传播效果。其使用场景如下:

 

 

二、开发流程

在微信二维码海报生成中,需要用到以下信息

1. 自定义菜单中设置一个菜单项,点击后返回二维码海报给用户

2. 接口接收到菜单点击之后,获取用户的头像、ID(可以使用OpenID)

3. 生成和用户关联的参数二维码,

4. 将参数二维码进行缩放

5. 将头像和参数二维码合并成新的参数二维码图片

6. 将新参数二维码图片做为水印合成到背景海报中

7. 将用户昵称,以及二维码时间戳(类型为临时二维码时)等文字合成到背景海报中

8. 将海报上传成临时图片素材

9. 将图片素材使用客服接口发送给用户。

 

三、微信素材准备

海报底图如下

3.1 生成自定义菜单

菜单的生成方法,请参考《微信公众平台开发(58)自定义菜单》以及方倍工作室的书籍《微信公众平台开发最佳实践(第2版)

本项目中使用的菜单JSON为

{
    "button": [
        {
            "name": "",
            "sub_button": [
                {
                    "type": "click",
                    "name": "我的海报",
                    "key": "POSTER"
                },
                {
                    "type": "view",
                    "name": "推广二维码",
                    "url": "http://nine.doucube.com/home/scene/index"
                },
                {
                    "type": "click",
                    "name": "免费路由器",
                    "key": "ROUTER"
                }
            ]
        },
        {
            "name": "扫码发图",
            "sub_button": [
                {
                    "type": "scancode_waitmsg",
                    "name": "扫码带提示",
                    "key": "rselfmenu_0_0"
                },
                {
                    "type": "scancode_push",
                    "name": "扫码推事件",
                    "key": "rselfmenu_0_1"
                },
                {
                    "type": "pic_photo_or_album",
                    "name": "拍照或相册发图",
                    "key": "rselfmenu_1_1"
                }
            ]
        },
        {
            "name": "发送位置",
            "type": "location_select",
            "key": "rselfmenu_2_0"
        }
    ]
}

 

3.2 获取用户基本信息

使用方倍工作室SDK获取用户基本信息的方法如下

    //获取用户信息
    $userinfo = $weixin->get_user_info($openid);
    var_dump($userinfo);
    
    //获取用户头像 64像素
    $headimgurl = substr($userinfo['headimgurl'],0,strripos($userinfo['headimgurl'], "/"))."/64";
    var_dump($headimgurl);
    // $headimgurl = "http://wx.qlogo.cn/mmopen/R9V6295VOlibNsicszoREqUF2CiaY8hL5fFt0D8DykUCjJ8ia4rQicbYViax3A2V0am2oUEWvw5awGia0tmwQEbI0tAu4kkCL7Eiaeia7/64";
    

需要注意的是,用户默认头像是640像素的大图,将其切换成64位像素大小,以便放置在二维码中间。

同样的,用户基本信息的获取方法,请参考《微信公众平台开发(76) 获取用户基本信息 》以及方倍工作室的书籍《微信公众平台开发最佳实践(第2版)

用户头像信息如下所示

 

3.3 生成参数二维码

使用方倍工作室SDK获取用户基本信息的方法如下

  //创建永久二维码,参数为用户openid
    $qrcodeinfo = $weixin->create_qrcode("QR_LIMIT_STR_SCENE", $openid);
    var_dump($qrcodeinfo);
    $qrcodeurl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=".urlencode($qrcodeinfo["ticket"]);
    var_dump($qrcodeurl);
    // $qrcodeurl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQHf7zoAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL05rUGlyTXJsd2hxN3BCUnFNbTlNAAIEu1X8VwMEAAAAAA%3D%3D";

参数二维码可以考虑使用永久字符串的,也可以考虑使用临时数字,临时数字优点没有上限限制,缺点是有有效期。永久的则相反。

同样的,参数二维码的获取方法,请参考《微信公众平台开发(83) 生成带参数二维码》以及方倍工作室的书籍《微信公众平台开发最佳实践(第2版)

参数二维码如下所示

 

 

四、微信二维码海报生成

4.1 二维码缩放

 微信二维码默认是430像素,将其缩放成300像素,核心代码如下

imagecopyresampled($qrcode_thumb, $qrcode_source, 0, 0, 0, 0, 300, 300, 430, 430);

 

4.2 头像合成到二维码图片上

核心代码如下

imagecopy($qrcode_thumb, $head_source, 118, 118, 0, 0, 64, 64);

合成后,效果如下

4.3 二维码合成到海报中

核心代码如下

//加水印
    imagecopy($dst_qr, $qrcode_thumb, 212, 410, 0, 0, 300, 300);    //水印位置

 

4.4 文字合成到海报中

核心代码如下

imagettftext($dst_qr, 30, 0, 40, 85, $textcolor, $font, $text);

合成后效果如下

 

五、素材上传与发送

5.1 上传临时图片素材

使用方倍工作室SDK上传图片素材的方法如下

//将图片上传临时图文素材
    $material = $weixin->upload_temporary_material("image", $filename); //logo.jpg须放于类同目录,注意路径
    var_dump($material);
    $mediaid = $material["media_id"];

    // array(3) { ["type"]=> string(5) "image" ["media_id"]=> string(64) "21Lz-eMFoSsA_R5gLOUJOqxbGw6YEEPRQq-UjHVbU6q64VyUBUqt7B8252ySPKdt" ["created_at"]=> int(1487213817) }

上传后,获得图片的media_id

 

5.2 使用客服接口发送图片

使用方倍工作室SDK发送图片的方法如下

    //客服接口发送临时图片素材
    $send_result = $weixin->send_custom_message($openid, "image", array('media_id'=>$mediaid));
    var_dump($send_result);

 

六、演示

关注方倍工作室微信公众账号,点击菜单“我的海报”

 

 

六、源码

SDK付费提供, 100元、联系QQ 1354386063

 

七、其他

需要完整系统,1000元/年,请看  

微信场景二维码关注及统计管理系统

 

相关文章
|
11天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
11天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
11天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
11天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
1月前
|
开发者
微信公众平台开发基本配置
微信公众平台开发基本配置
86 0
|
11天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
1月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
25 2
|
1月前
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
35 0
|
1月前
|
移动开发 小程序 API
微信小程序的一些开发限制
微信小程序的一些开发限制
73 1