微信小程序?qū)崿F(xiàn)二維碼生成器
一、項(xiàng)目展示
項(xiàng)目是一個簡單實(shí)用的二維碼生成器。
使用者可以在生成器中輸入文字生成二維碼,也可以在識別器中識別二維碼的內(nèi)容

二、項(xiàng)目核心代碼
二維碼生成
// pages/home/home.js
Page({
data:{
qrMsg: '',
recognizeMsg: '',
isShowMsg: false,
isShowResult: false,
showClear: true,
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
this.setData({
isShowMsg: false,
isShowResult: true,
})
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
},
// 生成二維碼
makeQrcode: function(e) {
this.setData({
isShowMsg: false,
isShowResult: true,
})
console.log(this.data.qrMsg + "家")
if (this.data.qrMsg == "") {
wx.showToast({
title: '二維碼內(nèi)容不能為空',
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="請輸入二維碼的文本內(nèi)容"/>
<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>到此這篇關(guān)于微信小程序?qū)崿F(xiàn)二維碼生成器的文章就介紹到這了,更多相關(guān)小程序二維碼生成器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 圖片庫
這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 圖片庫,需要的朋友可以參考下2015-01-01
JavaScript簡單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應(yīng)的頁面元素遍歷、分割、替換等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
從柯里化分析JavaScript重要的高階函數(shù)實(shí)例
這篇文章主要為大家介紹了從柯里化分析JavaScript重要的高階函數(shù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
javascript表單驗(yàn)證以及正則表達(dá)式舉例詳解
正則表達(dá)式描述了一種字符串匹配的模式,可以用來檢查一個串是否含有某種子串、將匹配的子串替換或者從某個串中取出符合某個條件的子串等,常用于表單驗(yàn)證等,下面這篇文章主要給大家介紹了關(guān)于javascript表單驗(yàn)證以及正則表達(dá)式的相關(guān)資料,需要的朋友可以參考下2023-05-05
js實(shí)現(xiàn)帶翻轉(zhuǎn)動畫圖片時鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶翻轉(zhuǎn)動畫的圖片時鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04
JavaScript實(shí)現(xiàn)自動切換圖片代碼
本文給大家分享一段js代碼實(shí)現(xiàn)自動切換圖片的代碼,代碼非常簡單,應(yīng)用領(lǐng)域非常廣泛,感興趣的朋友一起看看吧2016-10-10

