【小程序码 - 设计篇】菊花绽放

最新推荐文章于 2024-05-28 16:06:34 发布
原创 最新推荐文章于 2024-05-28 16:06:34 发布 · 9.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#设计 #微信 #小程序 #二维码

本文详细介绍了微信小程序码的设计理念和技术细节，包括其选择放射状设计的原因、码的构成、生成过程，以及可扩展性。小程序码不仅具有高识别度和容错性，而且在安全性上优于传统二维码，因为其协议完全私有，仅微信支持生成和解码。

作者：lincolnlin,endyxu,changoran

2017 年四月，微信正式推出了小程序码。小程序码的使命及诞生的过程， 扫码背后藏了什么秘密？小程序码又为何长得像菊花？ | 你问鹅答 一文已经作过一番介绍。本文将为你剖析更多关于小程序码的技术细节。

小程序码的前世

初见小程序码，犹如一朵盛开的菊花。

其实这种脑洞大开的异形码并非微信首创，Facebook、kik、snapchat 等公司都研发了自己体系的码。

从设计的图形上，我们把上述方案简单分成：

• 平面类 如 qrcode ,snapchart code

最低0.47元/天 解锁文章
微信小程序菊花码 java生成微信小程序菊花码【黑手】全网最细，微信菊花二维码具体代码实现 小程序码 /getUnlimited wxacode.getUnlimited 全网最粗
m0_58440053的博客
12-30 5857
小程序码 /getUnlimited wxacode.getUnlimited 微信菊花码 ，生成微信菊花二维码，最细代码，可直接copy使用，创作不易，给个赞再copy
小程序生成二维码，正方形二维码，跟小程序码
weixin_43764828的博客
09-14 2075
data:{ qrimg: " ", showCodeImg:true, } wx.request({ url: app.globalData.siteurlh5 +’/api/accesstoken.php’, //请求accesstoken method: ‘GET’, success: function (res) { console.log(res.data.access_token, ‘000’) const data = JSON.stringify({ path: “pages...
生成小程序菊花码（生成菊花码、更换中间logo、更改图片尺寸，加文字）
荒的博客
06-08 2770
生成小程序菊花码（生成菊花码、更换中间logo、更改图片尺寸，加文字）
小程序生成菊花二维码示例
qwe309816614的博客
08-31 4125
声明：这段代码是我在网上查找到后自己加工的。原来的链接找不到了，没法放在这里。 public function getXcxCode($scene) { //获取参数值 $url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" . $this->_getAcc...
TP5 调用微信小程序二维码
12-18
tp5 微信小程序调用小程序二维码接口，生成二维码，可以直接改改数据就可以生成二维码
生成二维码、菊花码
c_xiyi的博客
10-13 1566
let requestUrl = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + that.token uni.request({ url: requestUrl, data: { scene: that.scene, // 小程序码携带的参数 path: "pages/home/draw_details/draw_details" // 扫小程序码要进入的页面路径 }, method: "POST", r
调用微信wxacode.getUnlimited API获取小程序菊花码，有处理返回的错误信息
Lemcoo的博客
03-29 1万+
最近项目需要一个获取微信小程序菊花码的接口，查看了官方文档，发现有两个获取菊花码的api：wxacode.get与wxacode.getUnlimited。 这两个的区别的主要是wxacode.get用的path， path最大长度 128 字节，有数量限制。 wxacode.getUnlimited用scene且最大32个可见字符，只支持数字，大小写英文以及部分特殊字符，path不支持带参数，数...
2023微信小程序PHP三种获取二维码方式【包括带参数菊花码】
12-02
A接口，生成小程序码，可接受path参数较长，生成个数受限【菊花码】 #B接口，生成小程序码，可接受页面参数较短，生成个数不受限【菊花码】。 #C接口，生成二维码，可接受path参数较长，生成个数受限【方形码】。
行业文档-设计装置-用于实现菊花式CAN总线的在线故障注入的分接电路.zip
08-24
总的来说，这篇文档详细介绍了如何设计一个用于菊花式CAN总线在线故障注入的分接电路，为CAN总线系统的故障诊断和性能优化提供了有力工具。通过理解和应用这些知识，工程师们能够更好地应对现实世界中的复杂情况，...
微信是如何识别小程序码的？
03-29
【小程序码-设计篇】菊花绽放 一文中介绍了小程序码的设计过程，本文继续分享我们在小程序码识别上面的一些心得，权当抛砖引玉，欢迎有共同兴趣的同事一起讨论。 识别之前，我们需要对照片做什么处理 打开扫一扫，...
uni-app跨端开发之生成小程序码和调试scene参数爬坑指南
weixin_65344200的博客
07-27 4906
摘要：生成微信小程序码的前提条件是小程序必须要上线，相信很多开发者光是看到这一条就已经震惊到了。而且小程序码中的scene最多可以携带32个字符，关键是难调试。另外，虽然前端也可以自己生成微信小程序码，但有坑.........
Java生成微信小程序二维码，5种实现方式，一个比一个简单
天罡gg的专栏
01-26 3万+
先介绍一下项目场景，主要是通过微信小程序二维码裂变分享，每个账号有专属邀请二维码，分享出去，有新人扫码入驻，就可以得到现金奖励或红包奖励。当然，产品设计会更丰富，不止有裂变模式，还有渠道推广模式，还有各种奖励规则，但核心实现都是生成二维码。对于如何生成微信小程序二维码，本文一共列举了5种实现方式，其中第1、2种是网上常见的方式，第3、4、5种封装的更为优雅，文末可打包下载开箱即用的全套源码，我更期待老铁的文末 投票：哪种方式你更喜欢？
小程序码的生成
m0_61841139的博客
01-30 5217
微信小程序提供了三个接口来wxacode.createQRCode、wxacode.get、wxacode.getUnlimited生成小程序码，生成的小程序码永久有效，其中仅getUnlimited接口生成的小程序码数量暂无限制。
第3章“程序的机器级表示”：程序编码 和 数据格式
明朗晨光的专栏
05-23 871
反编译器、汇编代码中的格式
uni-app(微信小程序) 特定页面生成小程序码或小程序二维码（带参数）
weixin_43801036的博客
05-28 9878
需求：在每一个企业信息详情页中自动生成该页面的小程序分享码，用户扫码时自动跳到指定的企业信息详情页；因为有很多企业，所以这里我们需要使用:来实现。
【微信小程序】实现授权登入---超详细讲解
热门推荐
m0_73192864的博客
10-23 6万+
微信小程序实现授权登入
飞鹅小票打印机嵌入生成指定小程序页面二维码的解决方案 | 扫普通链接二维码打开小程序示例 | 生成正方形小程序码
sgambler的博客
06-10 1万+
场景 前段时间公司引入了飞鹅打印机，官方文档：飞鹅传送门 公司指定要在打印的小票中嵌套公司小程序的指定页面，比如打印一个订单，要嵌入一个二维码，扫码即可进入下单的店铺页面（非首页）。 问题 官方文档给出的嵌入二维码的方式是标签+链接，如下图 （这里指出一个订单只能打印一个二维码，所以再开发的时候千万不要像我一样傻得为了节约纸，写了好几种方案只请求一次打印，这样的话人家只识别第一个码！） 然后我加群请教他们的开发人员，沟通之后他们表示并不能做到嵌入指定页面，只能做到嵌入首页二维码的程度。 方法是拿到自
小程序菊花码
最新发布
06-18
### 小程序菊花码实现方式及使用教程 小程序菊花码是一种带有用户自定义图片（如头像）的二维码，主要用于增强用户体验。其实现方式包括前端和后端两部分：前端负责上传用户头像并生成二维码展示，后端负责调用微信接口生成二维码并将用户上传的图片嵌入二维码中心。 #### 1. 后端实现 后端主要通过微信提供的 `wxacode.getUnlimited` 接口生成小程序码，并结合 Java 实现将用户上传的图片嵌入二维码中心的功能。 - **获取 Access Token** 微信小程序需要通过 `auth.getAccessToken` 接口获取 Access Token，这是调用其他接口的前提条件。以下是获取 Access Token 的代码示例： ```java import cn.hutool.http.HttpRequest; public static String getAccessToken(String appid, String secret) { String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret=" + secret; String response = HttpRequest.get(url).execute().body(); return response; } ``` 该方法返回 JSON 格式的 Access Token 数据[^2]。 - **生成小程序码** 使用 `wxacode.getUnlimited` 接口生成小程序码，支持传入场景参数和文件路径等配置项。以下是一个生成小程序码的代码示例： ```java import cn.hutool.core.io.FileUtil; import cn.hutool.http.HttpRequest; public static void createQrCode(String accessToken, String scene, String filePath) { String url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + accessToken; String json = "{\"scene\":\"" + scene + "\",\"page\":\"pages/index/index\",\"width\":430}"; byte[] bytes = HttpRequest.post(url) .body(json) .execute() .bodyBytes(); FileUtil.writeBytes(bytes, filePath); } ``` 生成的小程序码会保存到指定路径中[^2]。 - **嵌入用户头像** 将用户上传的头像嵌入到生成的小程序码中心位置，需要使用图像处理库（如 Java 的 BufferedImage）。以下是一个简单的实现示例： ```java import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; public static void embedImage(String qrCodePath, String avatarPath, String outputPath) throws Exception { BufferedImage qrCode = ImageIO.read(new File(qrCodePath)); BufferedImage avatar = ImageIO.read(new File(avatarPath)); int avatarSize = 100; // 设置头像大小 BufferedImage outputImage = new BufferedImage(qrCode.getWidth(), qrCode.getHeight(), BufferedImage.TYPE_INT_ARGB); Graphics2D g2d = outputImage.createGraphics(); g2d.drawImage(qrCode, 0, 0, null); g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1f)); g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR); g2d.drawImage(avatar, (qrCode.getWidth() - avatarSize) / 2, (qrCode.getHeight() - avatarSize) / 2, avatarSize, avatarSize, null); g2d.dispose(); ImageIO.write(outputImage, "png", new File(outputPath)); } ``` 该方法会将用户头像嵌入到二维码中心位置[^1]。 #### 2. 前端实现 前端主要负责用户头像上传和展示生成的二维码。 - **用户头像上传** 使用微信小程序的 `wx.chooseImage` 和 `wx.uploadFile` API 完成用户头像的上传。 ```javascript wx.chooseImage({ count: 1, success(res) { const tempFilePaths = res.tempFilePaths; wx.uploadFile({ url: 'https://example.com/upload', // 替换为后端上传接口地址 filePath: tempFilePaths[0], name: 'file', success(uploadRes) { console.log('上传成功', uploadRes); } }); } }); ``` - **展示生成的二维码** 用户上传头像后，前端向后端请求生成的二维码图片，并将其展示在页面上。 ```javascript wx.request({ url: 'https://example.com/generate-qrcode', // 替换为后端生成二维码接口地址 method: 'POST', data: { scene: 'user_id_123' }, success(res) { const qrcodeUrl = res.data.qrcodeUrl; this.setData({ qrcodeImageUrl: qrcodeUrl }); } }); ``` #### 3. 错误处理 在调用微信接口时，可能会遇到错误信息（如小程序未发布或页面路径不存在）。需要对返回数据进行校验，确保返回的是图片二进制数据而非 JSON 错误信息[^3]。 ```java if (!response.startsWith("{")) { // 正常返回图片二进制数据 } else { // 返回 JSON 错误信息，需要解析并提示用户 } ``` --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值