小程序+二维码（带logo图片,可直接运行）

前言：

因为业务需要，再小程序上也得实现带logo的二维码效果，这里整理带logo二维码和不带logo二维码两种效果

效果图：

不带logo二维码效果图：

带logo二维码效果图：

一. 不带logo二维码实现步骤：( 使用 weapp-qrcode.js ) 官网入口

1.index.wxml 这里的360rpx==180px 单位换算详情入口

<view class="qrcode"><canvas style="width: 360rpx; height: 360rpx;" canvas-id="myQrcode"></canvas></view>

2.index.js

weapp-qrcode.js

链接：https://pan.baidu.com/s/1-oEnuPPaz8RJ8UZxdfiBKA 提取码：tje0

import drawQrcode  from '../common/js/weapp-qrcode.js';onLoad: function(params){this.setQrcode();
},/*** 生成二维码* */setQrcode(){new drawQrcode('myQrcode',{width: 180,height: 180,text: '1111',colorDark: '#000000',colorLight: '#ffffff',padding: 2, // 生成二维码四周自动留边宽度，不传入默认为0})}

二. 带logo二维码实现步骤：( 使用 weapp.qrcode.js ) 官网入口

1.index.wxml 这里的360rpx==180px 单位换算详情入口

<view class="qrcode"><canvas style="width: 360rpx; height: 360rpx;" canvas-id="myQrcode"></canvas></view>

2.index.js

weapp.qrcode.js 这个文件，我是npm i weapp.qrcode -s 然后取dist的js文件

链接：https://pan.baidu.com/s/1U__OJ-f6uPNtKapFfH7mBg 提取码：se2r

import drawQrcode  from '../common/js/weapp.qrcode.js';onLoad: function(params){this.setQrcode();},/*** 生成二维码* */setQrcode(){drawQrcode({width: 180,height: 180,canvasId: 'myQrcode',text: '111',image: {imageResource: '../image/logo.svg',//注意，svg图再真机测试会出不来，换成png的可以dx: 70,dy: 70,dWidth: 40,dHeight: 40}})}

官网介绍文档：

小程序+二维码（带logo图片,可直接运行）相关推荐

PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
图片二维码生成 <?php //二进制转图片image/pngfunction burryToBase64($contents, $mime){$base64 = base64_encode($ ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
微信小程序canva生成图片，长按图片识别小程序二维码详解
下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片,在小程序内部长按可以识别出来: 基本思路是先将内容用canvas排好版,然后把该canvas转化成图片:图片利用wx.prev ...
微信小程序生成小程序二维码图片无法正常显示的问题
调用将微信小程序生成小程序二维码图片接口时,在前端无法显示的问题下面是接口的地址以及开发文档: https://developers.weixin.qq.com/miniprogram/dev/ap ...
获取小程序二维码并保存为图片
项目中遇到一个生成小程序二维码的需求,经过调研采用官方提供的wxacode.getUnlimited 方法来生成, 官方文档地址: https://developers.weixin.qq.com/m ...
java获取微信小程序二维码图片并保存到本地
java获取微信小程序二维码保存到本地并返回图片,下次如果检查到本地有图片,那么就返回本地的图片,不再发起请求,否则重新发起请求并保存到本地,直接看代码吧. 获取access_token的方法可以参考 ...
微信小程序二维码图片的宣传方法都有哪些
在小程序非常发达的今天,很多的商家都是会有自己的小程序,小程序二维码也是非常常见的,对于每一个朋友们而言,要想让自己的小程序得到更多的朋友们的关注,那么是需要做好对其的宣传工作的.通过小程序二维码图片 ...
微信小程序 - 二维码数据解析，如何扫码进入开发版测试二维码数据
1.生成二维码在小程序开发中,经常需要用到通过分享小程序二维码,进行扫码进入小程序. 官方文档生成小程序二维码接口,这个生成接口可以放置服务器使用. page:是扫码之后需要打开的小程序页面 sc ...
Java生成微信小程序二维码，5种实现方式，一个比一个简单
文章目录前言先看官网一.JDK自带的URLConnection方式二.Apache的HttpClient方式三.okhttp3方式四.Unirest方式五.RestTemplate方式 ...
【java】Java生成微信小程序二维码
文章目录前言应用场景微信小程序官网 1.RestTemplate方式核心代码 getAccessToken 2. Unirest方式 Maven依赖核心代码 3. okhttp3方式 Mav ...

小程序+二维码（带logo图片,可直接运行）

前言：

因为业务需要，再小程序上也得实现带logo的二维码效果，这里整理带logo二维码和不带logo二维码两种效果

效果图：

不带logo二维码效果图：

带logo二维码效果图：

一. 不带logo二维码实现步骤：( 使用 weapp-qrcode.js ) 官网入口

1.index.wxml 这里的360rpx==180px 单位换算详情入口

2.index.js

weapp-qrcode.js

链接：https://pan.baidu.com/s/1-oEnuPPaz8RJ8UZxdfiBKA 提取码：tje0

二. 带logo二维码实现步骤：( 使用 weapp.qrcode.js ) 官网入口

1.index.wxml 这里的360rpx==180px 单位换算详情入口

2.index.js

weapp.qrcode.js 这个文件，我是npm i weapp.qrcode -s 然后取dist的js文件

链接：https://pan.baidu.com/s/1U__OJ-f6uPNtKapFfH7mBg 提取码：se2r

官网介绍文档：

小程序+二维码（带logo图片,可直接运行）相关推荐

最新文章

热门文章