微信小程序项目实例——二维码生成器

文章目录

微信小程序项目实例——二维码生成器
一、项目展示
二、项目核心代码
三、效果展示
文末

项目代码见文字底部，点赞关注有惊喜

一、项目展示

项目是一个简单实用的二维码生成器。
使用者可以在生成器中输入文字生成二维码，也可以在识别器中识别二维码的内容

二、项目核心代码

二维码生成

// 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 = thiswx.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 = thiswx.scanCode({success: function(res){// successconsole.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>

三、效果展示

文末

具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载小程序

微信小程序项目实例——二维码生成器相关推荐

【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
微信小程序转二维码方法分享
微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭有些小伙伴不知道怎么生成为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首 ...
微信小程序分享二维码生成
生成微信小程序分享二维码微信小程序官方开放的二维码的接口,其中有一个是生成小程序二维码的,还有一个是圆形的小程序码,我这里就用php生成二维码. 完整代码: public function shar ...
微信小程序获取二维码接口整理，.Net Core后台获取小程序二维码
2019独角兽企业重金招聘Python工程师标准>>> 一.关于二维码接口说明参考:https://my.oschina.net/tianma3798/blog/1811307 获 ...
微信小程序更新二维数组中的对象或数组的属性值
微信小程序更新二维数组中的对象或数组的属性值,这里可能有两种情况 1.微信小程序更新二维数组中的对象的属性值更新二维数组中的某个对象的属性值,代码如下 js 代码 data: {familys:[{ ...
C#生成微信小程序文章二维码
/// <summary>/// 获取access_token/// </summary>/// <returns></returns>[HttpGet ...

微信小程序项目实例——二维码生成器

微信小程序项目实例——二维码生成器

文章目录

一、项目展示

二、项目核心代码

三、效果展示

文末

微信小程序项目实例——二维码生成器相关推荐

最新文章

热门文章