微信小程序?qū)崿F(xiàn)二維碼生成器
更新時間:2023年01月09日 16:49:27 作者:失散多年的哥哥
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的二維碼生成器,文中的示例代碼講解詳細,感興趣的小伙伴可以和小編一起學(xué)習一下
一、項目展示
項目是一個簡單實用的二維碼生成器。
使用者可以在生成器中輸入文字生成二維碼,也可以在識別器中識別二維碼的內(nèi)容
二、項目核心代碼
二維碼生成
// 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-01JavaScript簡單實現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡單實現(xiàn)關(guān)鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應(yīng)的頁面元素遍歷、分割、替換等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07從柯里化分析JavaScript重要的高階函數(shù)實例
這篇文章主要為大家介紹了從柯里化分析JavaScript重要的高階函數(shù)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10