版本：2.4.4
jquery.qrcode库文件：下载地址
一 效果展示
根据地址http://www.xxx.com动态生成一个二维码，logo图片可自定义。
主要生成原理就是使用jQuery.qrcode的库生成二维码图片，将图片转成DataUrl格式，cocos用DataUrl数据创建cc.Sprite进行显示。
二 生成二维码需要的库，JQuery和JQuery.qrcode
动态生成二维码需要两个库，分别是jquery和jquery.qrcode。
常见二维码为QR Code，QR全称Quick Response，是一种编码方式。是特定几何图形按一定规律排列，黑白相间记录数据符号信息的图形。
把网址http://www.xxx.com通过jquery.qrcode.min.js工具库生成二维码图形，通过手机等设备扫码后将图形还原成网址进行访问。
三 在Cocos中使用JQuery两个库
1 创建发布模板
query两个库在index.html中使用，而每次构建发布index.html都会重置，所以先要建立发布模板，防止每次发布index.html都被覆盖。
新建cocos项目后，进行一次构建发布，发布后会生成build/web-mobile。
在cocos项目下新建build-templates/web-mobile，复制build/web-mobile下的main.js和index.html放到这个文件夹下。
将jquery.qrcode.min.js和jquery-1.5.2.min.js也复制到build-templates/web-mobile下。
这样每次cocos构建发布都会使用build-templates/web-mobile下的main.js和index.html，同时会将jquery两个库文件也一并发布。
2 修改index.html模板文件
修改build-templates/web-mobile/index.html，将二维码生成代码复制粘贴到index.html的<script src="src/settings.js" charset="utf-8"></script>之前。
这是将网址codeUrl生成二维码图形，再将图形转成dataUrl格式，cocos中可使用dataUrl生成图片组件cc.Sprite。
二维码生成代码：
<!-- 二维码 -->
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div id="code" style="display:none"></div>
<script>
function createQRCode(codeUrl, codeWidth, codeHeight) {
$("#code").qrcode({ width: codeWidth, height: codeHeight, text: codeUrl });
var i = $("#code > canvas");
var dataUrl = i[0].toDataURL();
//删除所有子节点
var codeDiv = document.getElementById("code");
codeDiv.innerHTML = "";
return dataUrl;
}
</script>
<!-- end 二维码 -->
DataUrl格式，就是二维码图片转成Base64编码的字符串，例如下面就是一个DataUrl数据：
前缀：data
MIME type 代表数据的类型：image/png
可选的base64标识：base64
数据本身：iVBORw0KGgoAAAANSUh.........
3 Cocos中将DataUrl转成cc.Sprite图片
下方是二维码自定义组件QRCode.ts，主要将DataUrl格式数据转成cc.Spirte。
logoUrl是显示在二维码中间的小图片，一般是游戏图标，如果不需要可以设置为null。
QRCode.ts：
const { ccclass, property } = cc._decorator;
/**
* 二维码加载
* @author chenkai 2022.8.29
*/
@ccclass
export default class QRCode extends cc.Node {
/**
* 创建二维码
* @param dataUrl dataUrl数据，包含base64编码
* @param codeWidth 二维码宽
* @param codeHeight 二维码高
* @param logoUrl logo地址
*/
public create(dataUrl: any, codeWidth: number, codeHeight: number, logoUrl: string = "") {
//dataUrl生成Image
let image = new Image();
image.src = dataUrl;
//Image生成Texture2d
let texture2D = new cc.Texture2D();
texture2D.width = codeWidth;
texture2D.height = codeHeight;
texture2D.initWithElement(image);
//Texture2d生成cc.Sprite
let sp: cc.Sprite = this.addComponent(cc.Sprite);
sp.spriteFrame = new cc.SpriteFrame(texture2D);
//加载logo
if (logoUrl != "" && logoUrl != null) {
cc.assetManager.loadRemote(logoUrl, (err: Error, asset: cc.Texture2D) => {
console.log("加载logoUrl完成:", asset);
if (err == null && cc.isValid(this)) {
asset.width = codeWidth / 3;
asset.height = codeHeight / 3;
let node: cc.Node = new cc.Node();
let sp: cc.Sprite = node.addComponent(cc.Sprite);
sp.spriteFrame = new cc.SpriteFrame(asset);
node.parent = this;
console.log("创建logo完成");
}
});
}
}
}
主场景中使用QRCode.ts来创建二维码图片，传入网址www.baidu.com，并携带参数data：123，二维码高宽200x200
MainScene.ts：
const { ccclass, property } = cc._decorator;
@ccclass
export default class MainScene extends cc.Component {
onLoad() {
//根据网址生成二维码dataUrl
let dataUrl = window["createQRCode"]("http://www.baidu.com" + "?data=123", 200, 200);
console.log("dataUrl:", dataUrl);
//根据dataUrl生成cc.Sprite进行显示
let qrCode: QRCode = new QRCode();
qrCode.create(dataUrl, 200, 200, "http://www.biliking.com/test/cocos_logo.png");
qrCode.parent = this.node;
}
}
构建发布游戏，运行游戏后生成二维码
浙公网安备 33010602011771号