微信小程序實現(xiàn)二維碼生成器
更新時間：2023年01月09日 16:49:27 作者：失散多年的哥哥
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的二維碼生成器，文中的示例代碼講解詳細，感興趣的小伙伴可以和小編一起學習一下
一、項目展示
項目是一個簡單實用的二維碼生成器。
使用者可以在生成器中輸入文字生成二維碼，也可以在識別器中識別二維碼的內容
二、項目核心代碼
二維碼生成
// pages/home/home.js
Page({
data:{
qrMsg: '',
recognizeMsg: '',
isShowMsg: false,
isShowResult: false,
showClear: true,
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的參數(shù)
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>到此這篇關于微信小程序實現(xiàn)二維碼生成器的文章就介紹到這了,更多相關小程序二維碼生成器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了JS實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JavaScript Html實現(xiàn)移動端紅包雨功能頁面
這篇文章主要為大家詳細介紹了JavaScript Html實現(xiàn)移動端紅包雨功能頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript利用fetch實現(xiàn)異步請求的方法實例
傳遞信息到服務器，從服務器獲取信息，是前端發(fā)展的重中之重，尤其是現(xiàn)在前后端分離的大前提下，前后端的數(shù)據(jù)交互是前端的必修科目了，下面這篇文章主要給大家介紹了關于JavaScript利用fetch實現(xiàn)異步請求的相關資料，需要的朋友可以參考借鑒。2017-07-07
本文是如何編寫高質量JS代碼系列文章的第二篇，前篇文章反響還不錯，應小伙伴們的要求，今天繼續(xù)此系列的文章，有需要的小伙伴參考下。2015-02-02
JavaScript面向對象繼承原理與實現(xiàn)方法分析
這篇文章主要介紹了JavaScript面向對象繼承原理與實現(xiàn)方法,結合實例形式分析就面向對象程序設計中原形、對象、繼承的相關概念、原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了基于javascript下使用canvas繪制時鐘的具體實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JS基于for語句編寫的九九乘法,涉及for語句循環(huán)輸出結合table表格布局實現(xiàn)九九乘法功能的相關操作技巧,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了驗證碼功能的三種實現(xiàn)方式,分為數(shù)字短信驗證碼，圖形驗證碼，滑動驗證碼，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
CascadeView級聯(lián)組件實現(xiàn)思路詳解(分離思想和單鏈表)
本文介紹自己最近做省市級聯(lián)的類似的級聯(lián)功能的實現(xiàn)思路，為了盡可能地做到職責分離跟表現(xiàn)與行為分離，這個功能拆分成了2個組件并用到了單鏈表來實現(xiàn)關鍵的級聯(lián)邏輯，下一段有演示效果的gif圖2016-04-04
Java中int與integer的區(qū)別（基本數(shù)據(jù)類型與引用數(shù)據(jù)類型）
這篇文章主要介紹了int與integer的區(qū)別（基本數(shù)據(jù)類型與引用數(shù)據(jù)類型）,簡單的說 int 是基本數(shù)據(jù)類型，integer 是引用數(shù)據(jù)類型，具體區(qū)別詳解大家參考下本文2017-02-02