微信小程序将字符串生成二维码图片的操作方法

2024-11-28 13:57:39

最近接到这样一个需求，需要在小程序里将十几位随机字符串转换为二维码的形式展示。公众号中（另一终端）调用JSSDK扫一扫功能，去扫描小程序生成的二维码。得到字符串，然后进行接下来的逻辑处理。

下面记录的是小程序中生成二维码图片这一操作，用的是原文作者改版后的生成二维码工具weapp-qrcode.js（demo的众多文件中只需将util下的这个文件拷贝到自己项目中），可在原文地址里clone demo。

截图（copy原文）

使用

1、页面wxml中放置绘制二维码的canvas

加入点击改变二维码图片的按钮

<canvas class='canvas' canvas-id='canvas'></canvas>
<button bindtap='tapHandler' data-code='123abc456efg000'>转为二维码</button>  <!-- data-code为生成二维码所依据的字符串，这里将其写死了，实际应改为{{变量名}} -->
<button bindtap='tapHandler' data-code='555444333222111'>转为二维码</button>

2、页面js中引入

onload中初始化二维码

定义按钮的事件处理函数

var QRCode = require('../../utils/weapp-qrcode.js');
var qrcode;
Page({
  onload: function(options){
    qrcode = new QRCode('canvas', {
      text: "code=0000000000000",
      width: 150,
      height: 150,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  },
  tapHandler: function(e){
    qrcode.makeCode(e.target.dataset.code); //用元素对应的code更新二维码
  }
});

参数说明

usingIn 为可选参数，详情清查卡在自定义组件使用时失效及解决思路 #1

text 为需要转化为二维码的字符串；

width 和 height为绘制出的二维码长宽，这里设置为跟canvas同样的长宽；

colorDark 和 colorLight 为二维码交替的两种颜色；

correctLevel 没有细看源码，命名上看应该是准确度；

如果需要再次生成二维码，调用 qrcode.makeCode('text you want convert')

总结

以上所述是小编给大家介绍的微信小程序将字符串生成二维码图片的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序获取二维码实例详解

微信小程序获取二维码实例详解理论: 接口A: 适用于需要的码数量较少的业务场景接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永
微信小程序实现获取小程序码和二维码java接口开发

前言:目前小程序推出了自己的识别码,小程序码,这个圆形的码看起来比二维码好看.本文总结微信小程序的获取小程序码和二维码并生成二维码图片的接口开发.主要内容摘抄自微信小程序的API文档,java接口开发是自己总结开发. 微信小程序API文档:获取二维码一.简介通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面.目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示: 二.获取小程序码目前有两个接口可以生成小程序码,开发者可以根据自己的需要选择合
微信小程序 PHP生成带参数二维码

微信小程序 PHP生成带参数二维码官方获取小程序页面API 由于小程序参数二维码API提供的帮助有限,以下是我对该功能的一些理解我主要是通过thinkphp后台接口实现,代码如下: 1.先获取ACCESS_TOKEN: $tokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".
微信小程序云开发使用方法新手初体验

今天看到微信推送了一条小程序云上线通知,作为一个前端er,满怀期待的去看了看,很不错先看看文档上怎么说的: 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力,6的一匹. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥.(就是说以后老板让你做小程序,连个后台的人都不用给你配了,自己搞定就行了). 目前提供三大基础能力支持: 云
微信小程序云开发搭建一个管理小程序

概述 : 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库存储:在小程序前端直接上传/下载
微信小程序动态生成二维码的实现代码

效果图如下: 实现 wxml  <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view>  <view class=&qu
微信小程序云开发详细教程

微信小程序云开发之初体验,供大家参考,具体内容如下小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量上手体验打开微信开发者工具,新建
微信小程序云开发如何使用云函数生成二维码

本文实例为大家分享了微信小程序云开发使用云函数生成二维码的具体代码,供大家参考,具体内容如下首先,需要给对应的云函数安装 request-promise 依赖.(不会给云函数安装依赖的盆友请移步微信小程序中的云开发如何使用npm安装依赖) 生成二维码的云函数如下: // 云函数入口文件 const cloud = require('wx-server-sdk') const rp = require('request-promise') cloud.init() // 云函数入口函数 exp
nodejs获取微信小程序带参数二维码实现代码

nodejs获取微信小程序带参数二维码实现代码由于项目需求,需要获取小程序页面的带有参数的二维码.好,那就看文档搞吧. 之前都是写前端,没有写过后台的东西,这次难得有机会组长让我试一试试用node来写,那就写吧. 1.首页获取token,发送request请求,用get的方式,在url后面加上小程序的grant_type,appid,secret,就顺利拿到token了,注意,这个token是有有效时间的,小程序的是7200秒,也就是2个小时,每天获取的次数有限,需要有个中控服务器定时获取to
微信小程序云开发之新手环境配置

本文实例为大家分享了微信小程序云开发环境配置的具体方法,供大家参考,具体内容如下注意:小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能. 首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例. 首次进入控制台会报cloud init error (云初始化错误). 如果我们填写了在微信的左上角调试器旁边有一个云开发,在这里我们点击云开发点击开通云开发官网建议我们建两

微信小程序将字符串生成二维码图片的操作方法

相关推荐

随机推荐