微信公众平台开发(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元/年,请看  

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

 

目录
相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
771 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
783 1
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
183 7
ly~
|
4月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
93 6
|
3月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
267 1
|
3月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
99 5
|
3月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
78 5
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1228 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
3月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
40 0
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
563 0

热门文章

最新文章