{"id":13600066,"url":"https://github.com/tomfriwel/weapp-qrcode","last_synced_at":"2025-04-10T21:31:07.815Z","repository":{"id":46147287,"uuid":"116004822","full_name":"tomfriwel/weapp-qrcode","owner":"tomfriwel","description":"Wechat miniapp generate qrcode image","archived":false,"fork":false,"pushed_at":"2022-11-09T02:57:43.000Z","size":2168,"stargazers_count":428,"open_issues_count":7,"forks_count":444,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-07T02:36:29.435Z","etag":null,"topics":["qrcode","weapp","wechat","wechat-app"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomfriwel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-02T10:43:38.000Z","updated_at":"2024-10-25T01:16:30.000Z","dependencies_parsed_at":"2023-01-21T14:31:03.349Z","dependency_job_id":null,"html_url":"https://github.com/tomfriwel/weapp-qrcode","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfriwel%2Fweapp-qrcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfriwel%2Fweapp-qrcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfriwel%2Fweapp-qrcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfriwel%2Fweapp-qrcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomfriwel","download_url":"https://codeload.github.com/tomfriwel/weapp-qrcode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248301345,"owners_count":21080875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["qrcode","weapp","wechat","wechat-app"],"created_at":"2024-08-01T18:00:21.012Z","updated_at":"2025-04-10T21:31:07.519Z","avatar_url":"https://github.com/tomfriwel.png","language":"JavaScript","funding_links":[],"categories":["组件","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\n\n\n\n# weapp-qrcode\n微信小程序生成二维码工具    \n\n\u003e 生成二维码数据的主要代码来自[davidshimjs/qrcodejs](https://github.com/davidshimjs/qrcodejs)，因为它这个里面生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。\n\n## 截图\n\n![截图3](./doc-images/s3.png)\n![截图1](./doc-images/screenshot0.png)\n![截图2](./doc-images/screenshot2.png)\n![gif](./doc-images/screenshot1.gif)\n\n## 背景图测试中...（页面`pages/test/test`）\n![gif](./doc-images/test.png)\n\n## 使用（自适应版本，使用`rpx`为单位）\n\n完整代码请参考`pages/responsive/responsive`，设置`width`和`height`的时候稍微所有不同。\n\n`canvas`的长宽通过计算获得\n```js\nconst QRCode = require('../../utils/weapp-qrcode.js')\nimport rpx2px from '../../utils/rpx2px.js'\nlet qrcode;\n\n// 300rpx 在6s上为 150px\nconst qrcodeWidth = rpx2px(300)\n\nPage({\n    data: {\n        ...\n        qrcodeWidth: qrcodeWidth,\n        ...\n    },\n    onLoad: function (options) {\n        qrcode = new QRCode('canvas', {\n            // usingIn: this,\n            text: \"https://github.com/tomfriwel/weapp-qrcode\",\n            image: '/images/bg.jpg',\n            width: qrcodeWidth,\n            height: qrcodeWidth,\n            colorDark: \"#1CA4FC\",\n            colorLight: \"white\",\n            correctLevel: QRCode.CorrectLevel.H,\n        });\n    },\n    ...\n})\n```\n\n`wxml`页面中：\n```html\n\u003ccanvas class='canvas' style=\"width:{{qrcodeWidth}}px; height:{{qrcodeWidth}}px;\" canvas-id='canvas' bindlongtap='save'\u003e\u003c/canvas\u003e\n```\n\n`wxss`中的`canvas`样式不再设置长宽。这样后就达到了自适应的效果，可以在不同设备上进行查看。\n\n## 使用（非自适应）\n\n完整代码请参考`pages/index/index`\n\n页面`wxml`中放置绘制二维码的`canvas`:\n```\n\u003ccanvas class='canvas' canvas-id='canvas' bindlongtap='save'\u003e\u003c/canvas\u003e\n```\n\n页面`js`中引入:\n```\nvar QRCode = require('../../utils/weapp-qrcode.js')\n```\n\n页面加载好后:\n```js\n//传入wxml中二维码canvas的canvas-id\n//单位为px\nvar qrcode = new QRCode('canvas', {\n    // usingIn: this,\n    text: \"https://github.com/tomfriwel/weapp-qrcode\",\n    width: 150,\n    height: 150,\n    colorDark: \"#000000\",\n    colorLight: \"#ffffff\",\n    correctLevel: QRCode.CorrectLevel.H,\n});\n```\n\n`usingIn`为可选参数，详情请查看[在自定义组件使用时失效及解决思路 #1](https://github.com/tomfriwel/weapp-qrcode/issues/1)\n\n`text`为需要转化为二维码的字符串；\n\n`width`和`height`为绘制出的二维码长宽，这里设置为跟`canvas`同样的长宽；\n\n`colorDark`和`colorLight`为二维码交替的两种颜色；\n\n`correctLevel`没有细看源码，命名上看应该是准确度；\n\n如果需要再次生成二维码，调用`qrcode.makeCode('text you want convert')`。\n\n`wxss`里需要设置同等的长宽，比如上面初始化时的长宽为`150`，那么：\n```\n.canvas {\n    //...\n    width: 150px;\n    height: 150px;\n}\n```\n\n## 主要流程\n\n![主流程](./doc-images/weapp-qrcode.001.png)\n\n## TODO\n\n* https://github.com/SumiMakito/Awesome-qr.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomfriwel%2Fweapp-qrcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomfriwel%2Fweapp-qrcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomfriwel%2Fweapp-qrcode/lists"}