如今围绕微信生态相关开发已经非常常见，本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别 以及 通过 html2canvas 生成图片并长按保存

说几个知识点

微信长按弹出识别选项的原理

• 微信客户端检测到用户长按img标签
• 微信主动进行截屏并识别图片，二维码识别采用的是截屏而不是通过img标签
• 微信识别成功后执行相关操作

Base64

• Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法

Blob

• HTML5中的Blob对象与MySQL中的BLOB对象有区别，HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型，这相当于对文件的存储，其它很多二进制对象也是从这个对象继承的

canvas.toDataURL([type, encoderOptions])

• type : 指定图片类型，默认值 image/png
• encoderOptions : 为 image/jpeg 或 image/webp 类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代
• 作用: 通过canvas进行转化图片

准备工作

结合微信规范明确需求

• 微信img标签通过src属性可实现长按弹出选项(保存至手机，图片为二维码的情况下会出现识别二维码)
• 二维码图片若为本地图片或服务器图片(即不需要进行动态生成)只需要正常编写代码即可实现
• 微信针对内置浏览器内的页面图片有着自己的一套适应逻辑与规范，canvas的图片和base64编码格式的图片在安卓与ios手机上会出现不同的问题

确定实现方案

• 本例采用第三方js库实现生成二维码
• 针对生成的base64编码的图片微信无法长按识别需要在前端进行格式和image对象重新转换
• 生成的图片弹窗展示，避免出现其他元素影响微信识别率

开发环境

开发平台

• MacOS

开发环境

• Vue + node

客户端环境

• Google Chrome
• Wechat Webview

技术实现

本例的技术实现方案均在Vue项目环境下实现的

引入第三方js库

提供两种引入方式，两种方式是不同的js库，方便大家选择和使用

// 第一种方式
// qrcode.js官方GitHub文档: https://github.com/davidshimjs/qrcodejs
<script src="static/js/qrcode.js"></script>

// 第二种方式
npm install qrcodejs2
import qrCode from 'qrcodejs2'

组件中调用

HTML

<div class="qrcode-panel" id="qrcode"></div>

JS

// 简单调用
new QRCode(document.getElementById('qrcode'), 'your content');
// new QRCode(element, option)
// element 显示二维码的元素或该元素的 ID
// option 参数配置

// 标准调用
var qrcode=new QRCode(document.getElementById("qrcode"), {
	text: "https://www.xxx.com?did=123456&id=123&userid=456",
	width: 160, //图像宽度
	height: 160, // 图像高度
	render: 'canvas', // 生成格式(table 和 canvas)
	colorDark : "#000000", //前景色
	colorLight : "#ffffff", //背景色
	correctLevel : QRCode.CorrectLevel.H // 容错级别
});
// 容错级别，可设置为：
QRCode.CorrectLevel.L（最大 7% 的错误能够被纠正）
QRCode.CorrectLevel.M（最大 15% 的错误能够被纠正）
QRCode.CorrectLevel.Q（最大 25% 的错误能够被纠正）
QRCode.CorrectLevel.H（最大 30% 的错误能够被纠正）

// 其他公共方法
QRCode.makeCode(text) // 设置二维码内容
QRCode.clear() // 清除二维码

重置 Image 对象

重置的原因是原JS生成的 image 和 canvas 对象无法在微信端长按识别

var canvas=document.getElementsByTagName('canvas')[0];
var img=this.convertCanvasToImage(canvas);
document.getElementById("qrcode").append(img);

convertCanvasToImage(canvas) {
	//新建Image对象
	var image=new Image();
	// canvas.toDataURL 返回的是一串Base64编码的URL
	image.src=canvas.toDataURL("image/png");
	image.id='qrcodeImg';
	return image;
}

后续细节处理

至此，一个能够满足长按识别的动态二维码已经生成，不继续处理的话会有两张二维码，长按对比就能看出，qrcode.js 生成的二维码长按无法识别，而经过重置之后的对象是可以实现此功能的。

我的处理方式是两个二维码都保留，将二维码图片进行重新定位，将重置的二维码图片置于不能识别二维码上层，不去频繁操作DOM节点的显示隐藏。

生成的二维码通过 append 的方式插入到dom节点中，在关闭操作时需要将之前生成的 canvas 和 image 去除

微信内置浏览器生成canvas图片保存

上述教程可以实现动态生成二维码进行保存和长按识别，但是如果需要将HTML内容生成canvas保存就存在问题了。

针对保存需要注意的几个问题：

• canvas禁止跨域
• 安卓微信长按不能保存base64图片
• 微信限制Blob类型图片的保存
• 使用 canvas.toDataURL 绘制时的类型使用 image/jpeg 进行保存

技术选型

使用第三方JS库 html2canvas 进行处理

识别和生成原理：

• 脚本直接在用户浏览器上截取网页或部分网页的"屏幕截图"
• "屏幕截图"基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图

存在的问题：

• 正是因为 html2canvas 不是基于真正的屏幕截图去识别处理，所以脱离了文档流，或者文档流异常的元素会无法被截取下来
• html2canvas 只会截取到目标元素宽高范围内的内容
• 对部分css样式支持不好，兼容性差的属性列表请 后台留言获取

一些可能需要的参数

• useCORS : 是否尝试使用CORS从服务器加载图像
• async : 是否异步解析和呈现元素
• scale : 用于渲染的比例。默认为浏览器设备像素比率window.devicePixelRatio
• allowTaint : 是否允许画布被污染，被污染的canvas是没法使用toDataURL()转base64流的，部分细节请 后台留言获取
• 更多 html2canvas 参数请 后台留言获取

引入第三方JS库

使用 html2canvas

import html2canvas from 'html2canvas'

组件中调用

HTML

<div class="html2canvas-conetent" ref="canvasContent">
	<img src="/static/images/canvas.jpg">
	<span>测试Title</span>
</div>
<button @click="showCanvas()">生成canvas图片</button>

JS

• 使用 html2canvas 推荐的promise方法

showCanvas() {
	let self=this;
	html2canvas(self.$refs.canvasContent).then(function(canvas) {
        self.imgUrl=canvas.toDataURL();
        self.showCanvasImg=true;
	});
}
// 异步解析调用和呈现元素
showCanvas() {
	let self=this;
	html2canvas(self.$refs.canvasContent  {
		async: true
	}).then(canvas=> {
		self.imgUrl=canvas.toDataURL();
		self.showCanvasImg=true;
	});
}

实现效果

源码地址

• Github地址(请点击原文链接查看)

ello各位朋友们大家新的一月好呀！我是咕噜铁蛋！我知道在小程序开发中，有时候需要将H5页面转换成微信小程序页面。这样可以将原本的网页内容适配到小程序中，让用户能够更方便地访问和使用。在本文中，我将分享如何快速将H5页面转换成微信小程序页面的方法。

1. 使用第三方工具

第三方工具是将H5页面转换成微信小程序页面的最简单、最快捷的方法之一。可以使用现有的工具，例如Mpvue、Taro等，它们提供了一些插件和模板，可以快速地将H5页面转换成微信小程序页面。这些工具使用MVVM框架，使得代码的复用性更强，同时也提高了开发效率。

2. 手动实现

如果想要更深入地理解H5页面和微信小程序页面的区别，并掌握更多定制化的操作，可以手动实现转换。虽然这种方法比较耗费时间和精力，但是对于一些定制化要求比较高的开发项目来说，是必要的。此时，我们可以按照以下步骤进行操作：

（1）将H5页面中的标签替换成小程序中的标签；

（2）将H5页面中的CSS样式修改成小程序中的样式；

（3）将H5页面中的JavaScript代码修改成小程序中的代码；

（4）将H5页面中的数据请求替换成小程序中的数据请求方式。

手动实现虽然比较繁琐，但是可以更好地掌握H5页面和微信小程序页面的区别，从而能够更好地适应不同的开发需求。

3. 使用wepy框架

wepy是一个基于Vue.js的小程序开发框架。它提供了一些组件、插件和API，可以快速地将H5页面转换成微信小程序页面。使用wepy框架后，我们可以直接在Vue.js中编写代码，使用类似于Vue.js的语法来编写小程序页面。这样，不仅能够提高开发效率，还能够提高代码的复用性和可维护性。

总结起来，快速将H5页面转换成微信小程序页面有多种方法。可以使用第三方工具、手动实现、或者使用wepy框架来进行操作。每种方法都有其优劣之处，需要根据不同的项目需求和自己的技术水平来选择。作为博主，我们应该不断学习和探索，及时解决遇到的问题，并与读者分享经验和解决方案。希望这篇文章对你有所帮助！

为热衷于分享与交流的我，关注着如何将微信公众号文章采集至论坛这个议题。此非单纯技术问题，而是关乎信息传播及共享之道。本文将对此议题进行深入探讨，期待能为各位提供启示与助益。

微信公众号文章的价值

微信公众号汇集诸多领域优秀创作者，其发布的作品囊括广泛维度的内容，包括知识与技能、情感表达及行业洞见等，均为作者对社会、生活和职业的深入思索与经验总结。因此，将此类优质文章采集至论坛，不仅能为论坛注入新的活力，更可使广大受众从中获益，共享并传递有益信息。

技术挑战与解决方案

将微信公众号文章引入论坛并非易事，面临诸多技术难题。其一，由于微信公众号文章以HTML形式编排，与论坛所用的格式有所出入，需作相应转换。次之，微信公众号文中常含各类多媒体，如图文并茂或是视音频交融，如何精确同步至论坛亦成为待解课题。此外，版权与法律方面考量不容忽视，以确保证采摘行动的合法性及规范性。

面对这些科技难题，有以下对策可供采纳。首先，可以研发一套全自动采集程序，运用爬虫技术搜集微信公众号的相关文章，并进行格式调整及排版美化后，再将其发表至相应论坛。其次，借助第三方应用或API，完成对多媒体素材的同步与转化。最后，务必在采集环节添加著作权识别与风险管控功能，保证所有操作的合法性与合规性。

社区运营与管理

除技术难题之外，在将微信公号文章引入论坛时，需关注社区运营与管理方面。首先，专设板块或频道以展示所采文章；其次，制定严谨审核体系，包括内容及版权审查，保证文章质量与合法性；最后，组建专职运营团队，负责社区日常管理和维护工作，高效回应并妥善解决用户反馈。

用户体验与反馈

最终，微信公众号文章能否成功采摘至论坛，其关键在于用户的整体感受与反响。为此，我们需持续精炼并改良我们的采摘体系以提高其用户适应性。可通过用户研究与反馈获取用户建议，基于这些需求进行调整和改善。同时，运用数据分析工具解析用户行为，挖掘潜在问题及改进可能，从而进一步提高用户满意度以及留存率。

潜在问题与风险

在微信公号文章转帖至论坛的过程中，我们需留意潜在的问题与风险。首要考虑的是如何应对微信公号平台的反爬虫机制。同时，需警惕可能引发的版权争议及法律风险，提升版权保护与风险预防意识至关重要。另外，还需关注用户反感情绪和抵触行为，适时调整策略和应对措施，防止负面效应产生。

未来展望与发展方向

虽然在论坛中引入微信公众号文章存在诸多难点及风险，然深信随着科技与社会的持续进步，此类问题皆可迎刃而解。展望未来，期待更多优质微信公众号文章得以引入论坛，实现信息共享与传播。坚信只要持之以恒，必能达成此愿景，使广大民众从中获益。