微信小程序生成二维码(weapp-qrcode)可添加logo

这篇具有很好参考价值的文章主要介绍了微信小程序生成二维码(weapp-qrcode)可添加logo。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

插件 npm 地址:https://www.npmjs.com/package/weapp-qrcode
插件 GitHub 地址:https://github.com/yingye/weapp-qrcode/tree/master

一、引入

1、根据 GitHub 指引将 weapp-qrcode 放到本地 uitl 文件夹下;
2、创建 canvas

<canvas canvas-id="code" style="width:200px;height:200px;"></canvas>

3、在 js 文件中引入 weapp-qrcode 以及使用;

import drawQrcode from "../../utils/weapp-qrcode"
Page({
  onLoad() {
    this.handleCode();
  },
  handleCode(){
    drawQrcode({
      width:200,
      height:200,
      foreground:"red",
      canvasId:"code",
      text:"xxs",
      image:{
        imageResource:"../../assets/logo.png",
        dx:80,
        dy:80,
        dWidth:40,
        dHeight:40
      },
      callback(e){
        console.log(e)
      }
    })
  }
})

这里是添加了 logo 的二维码;相关参数请参考 GitHub 里面的表格;

二、注意

1、image 的路径如果是网络图片的话会显示不出来,需要使用 wx.getImageInfo(需要在小程序后台配置 download 域名)去获取图片信息;
2、image 图片格式是 svg 的时候不显示,需要替换成 png 的;
3、在回调函数 callback 中处理 canvas 的时候需要设置定时器以兼容安卓部分机型出现的问题;

最后

方法有很多,工具也有很多;找到适合自己项目的就行;下面分享几个我在见到还不错的文章以及插件,感兴趣的可以自己去试一下:
1、文章:小程序 做二维码带logo绘制二维码
2、插件GitHub:weapp-qrcode-canvas-2d文章来源地址https://www.toymoban.com/news/detail-609702.html

到了这里,关于微信小程序生成二维码(weapp-qrcode)可添加logo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 生成微信小程序发布上线后的二维码 、获取微信小程序二维码、微信小程序二维码如何生成?

    情景: 1、在微信小程序审核完成,发布到线上后,想通过扫描小程序二维码进入小程序 2、可分享二维码出去,通过二维码扫码进入小程序 方法: 1、进入微信小程序的后台配置。链接:微信公众平台。(如图一) 2、进入 “设置” -- “ 基本设置” -- “小程序码及线下物

    2024年02月12日
    浏览(57)
  • 微信小程序怎样生成体验版二维码?微信小程序怎么转化为二维码?

    方法:在微信开发者工具界面,右上角,点击上传,如果提示成功,说明已经上传成功。     网址: 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 在微信公众号平台登录,选择需要生成二维码的小程序

    2024年02月10日
    浏览(82)
  • 如何生成微信小程序二维码,小程序内页二维码

    你自己得有个微信公众号,只需要知道小程序的名字就可以了 生成小程序二维码 第一步编辑素材 第二步搜索小程序名字,然后回车,下一步 第三步选小程序码 小程序内页二维码 第一步编辑素材 第二步搜索小程序名字,然后回车,下一步 第三步点击‘获取更多路径’ 第四

    2024年02月15日
    浏览(50)
  • 微信小程序 — 生成二维码功能

    微信小程序实现生成二维码功能。需要用到canvas组件,设置 type为2d.  需要使用js包 weapp-qrcode-canvas-2d https://github.com/DoctorWei/weapp-qrcode-canvas-2d weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包。canvas 2d 接口支持同层渲染且性能更佳,可大

    2024年02月09日
    浏览(60)
  • 微信小程序之生成二维码

     var context = wx.createCanvasContext(\\\'mycanvas\\\'); // 获取画布 CanvasContext.fillText string text 在画布上输出的文本 number x 绘制文本的左上角 x 坐标位置 number y 绘制文本的左上角 y 坐标位置 number maxWidth 需要绘制的最大宽度,可选 CanvasContext.drawImage string imageResource 所要绘制的图片资源(网络

    2024年02月10日
    浏览(50)
  • 微信小程序实现预约生成二维码

    业务需求 :点击预约按钮即可生成二维码凭码入校参观~ 如下是博主自己写的wxml: 以及wxss: 去Gitee下载工具包: 二维码工具包 http://​ https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d ​ 下载zip:     将dist文件夹中的js文件全部复制到utils目录下: 如下代码必须完整的导入再页面

    2024年04月15日
    浏览(55)
  • 微信小程序生成二维码的 方式

    一:生成普通的二维码 https://open.weixin.qq.com/sns/getexpappinfo?appid=xxxpath=xxx?a=123 appid:小程序的appid path: 小程序的路径 a:小程序需要携带的参数,不传可以不写 二:在微信开发文档内生成 步骤1.登录微信公众平台 2.找到工具菜单 3.选择生成小程序码 具体里面的有生成规则,不懂得

    2024年02月12日
    浏览(54)
  • 微信小程序使用--如何生成二维码

    一、生成二维码 1.获取token 参照官方文档说明: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html 其中grant_type是写死的,appid和secret是注册小程序的时候获取的,然后会得到一个默认两小时失效的token 2.获取二维码 参照官方文档说明: https://developers.

    2024年02月04日
    浏览(61)
  • 【小程序】动态生成微信小程序二维码

    官方文档中给我们提供了三个接口,分别应用于不同的场景 wxacode.createQRCode - - 接口文档地址-点击跳转 该接口需慎用,因为文档描述,该接口可生成的二维码是有限制的。 总共生成的码数量限制为 100,000 wxacode.get - - 接口文档地址-点击跳转 该接口需慎用,因为文档描述,该

    2024年02月09日
    浏览(64)
  • 微信小程序任意指定页面生成二维码

    在日常微信小程序运营中,文章,和朋友圈海报内总会用到微信小程序特定页面二维码 ps:一定要输入当前小程序小程序项目成员的微信号

    2024年02月11日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包