微信小程序实现二维码生成器
作者:失散多年的哥哥 时间:2024-04-16 10:29:06
一、项目展示
项目是一个简单实用的二维码生成器。
使用者可以在生成器中输入文字生成二维码,也可以在识别器中识别二维码的内容
二、项目核心代码
二维码生成
// pages/home/home.js
Page({
data:{
qrMsg: '',
recognizeMsg: '',
isShowMsg: false,
isShowResult: false,
showClear: true,
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({
isShowMsg: false,
isShowResult: true,
})
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
// 生成二维码
makeQrcode: function(e) {
this.setData({
isShowMsg: false,
isShowResult: true,
})
console.log(this.data.qrMsg + "家")
if (this.data.qrMsg == "") {
wx.showToast({
title: '二维码内容不能为空',
icon: 'loading',
duration: 500
})
return
}
var that = this
wx.navigateTo({
url: '../main/main?msg=' + that.data.qrMsg,
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
bindInput: function(e) {
console.log(e.detail.value)
this.setData({
qrMsg: e.detail.value
})
if (this.data['qrMsg'].length > 1) {
this.setData({
showClear: false
})
} else {
this.setData({
showClear: true
})
}
},
// 清空
bindClearAll: function(res) {
wx.redirectTo({
url: '../home/home',
})
},
// 识别二维码
recognizeCode: function() {
this.setData({
isShowMsg: true,
isShowResult: false,
recognizeMsg: "",
})
var that = this
wx.scanCode({
success: function(res){
// success
console.log(res)
that.setData({
recognizeMsg: res["result"]
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
})
<!--pages/home/home.wxml-->
<view class="container-box">
<!--生成器-->
<view class="home-section">
<view class="home-section-title" bindtap="makeQrcode">
<text class="home-section-title-make">生成器</text>
<image class="home-next-btn" src="../../images/next.png"></image>
</view>
<view hidden="{{isShowMsg}}">
<textarea maxlength="-1" bindinput="bindInput" class="recognize-content" placeholder="请输入二维码的文本内容"/>
<view class="home-clear"><text hidden="{{showClear}}" bindtap="bindClearAll">CLEAR</text></view>
</view>
</view>
<!--识别器-->
<view class="home-section">
<view class="home-section-title" bindtap="recognizeCode">
<text class="home-section-title-recognize">识别器</text>
<image class="home-next-btn" src="../../images/next.png"></image>
</view>
<view hidden="{{isShowResult}}" class="recog-text">
<textarea maxlength="-1" value="{{recognizeMsg}}" class="recognize-content"/>
</view>
</view>
</view>
来源:https://blog.csdn.net/ws15168689087/article/details/128564980
标签:小程序,二维码,生成
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
浅谈Laravel队列实现原理解决问题记录
2024-06-05 15:39:54
Python实现Event回调机制的方法
2021-04-10 12:33:29
![](https://img.aspxhome.com/file/2023/4/120414_0s.jpg)
用python的哈希函数对密码加密
2021-06-10 21:02:58
![](https://img.aspxhome.com/file/2023/8/99138_0s.png)
JS异步宏队列与微队列原理区别详解
2024-04-22 13:26:36
![](https://img.aspxhome.com/file/2023/7/135687_0s.png)
git push时卡住的解决方法(长时间不报错也不自动退出)
2022-05-08 04:40:00
![](https://img.aspxhome.com/file/2023/2/132342_0s.png)
在Python中通过threshold创建mask方式
2022-10-22 16:52:49
一文搞懂Python中subprocess模块的使用
2023-12-05 16:35:05
![](https://img.aspxhome.com/file/2023/8/117868_0s.jpg)
100 个 Python 小例子(练习题一)
2022-09-25 20:45:52
python实现扫描日志关键字的示例
2023-10-20 15:44:02
![](https://img.aspxhome.com/file/2023/3/84053_0s.jpg)
使用python处理一万份word表格简历操作
2021-09-15 17:36:36
![](https://img.aspxhome.com/file/2023/0/72210_0s.jpg)
python-docx文件定位读取过程(尝试替换)
2022-03-05 14:41:19
ASP.Net Core MVC基础系列之中间件
2024-05-09 09:04:47
![](https://img.aspxhome.com/file/2023/4/129804_0s.jpg)
ASP.NET(C#)读取Excel的文件内容
2023-07-10 22:38:35
一文带你了解MySQL四大类日志
2024-01-25 12:53:13
玩转表单之花样表单
2011-04-25 19:17:00
JavaScript编写推箱子游戏
2024-03-17 17:47:32
![](https://img.aspxhome.com/file/2023/3/56343_0s.jpg)
Python使用MD5加密算法对字符串进行加密操作示例
2021-06-23 16:30:25
在vue中使用G2图表的示例代码
2024-05-28 15:52:22
python使用reportlab画图示例(含中文汉字)
2022-10-22 17:14:18
基于go实例网络存储协议详解
2024-04-25 13:19:30