uniapp根据输入的文本或者地址生成二维码

uniapp根据输入的文本生成二维码，效果如下所示：

此功能的实现也是通过网上寻找代码进行实现的，主要是通过一个uqrcode.js文件进行实现的，这里我做个总结，方便自己以后使用，也为需要的小伙伴提供一个便捷使用的途径。

html代码：

<template><view><view class='pages'>            <view class='father_view'> <view class='son_view'> <view class="title-bg">需要转换的文本：</view><textarea class="textarea-bg" v-model="text1" @blur="inputText"  placeholder="请在这里输入" /> </view></view><!-- 二维码 --><view class="qr-box"><canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;"/></view>       <button @click='btn'>生成二维码</button>             </view>   </view>
</template><script>import uQRCode from '@/config/uqrcode.js' //引入uqrcode.jsexport default {data() {return {qrShow: false,                // 默认二维码链接text1:'http://www.baidu.com'}},onLoad() {this.btn()},   methods: {  //*获取文本框内容*//inputText:function (e) {this.text1 = e.detail.value   },//*按钮*//btn: function () {                                        if (this.text1 == '' ) {uni.showToast({  //显示对话框title: "请输入文本",icon: 'none',duration: 1000,})} else {this.qrFun(this.text1) //调用二维码方法}},//**生成二维码**//qrFun: function(text) {this.qrShow = trueuQRCode.make({canvasId: 'qrcode',componentInstance: this,text: text,size: 150,margin: 0,backgroundColor: '#ffffff',foregroundColor: '#000000',fileType: 'jpg',errorCorrectLevel: uQRCode.errorCorrectLevel.H,success: res => {}})}}}</script><style lang="scss">
.pages {width: 98%;margin: auto;overflow: hidden;}  /* 多行文本 */textarea {width: 98%;height: 250rpx;margin-left: 10rpx;margin-right: 10rpx;margin-top: 10rpx;}.textarea-bg {width: 94%;border-style: solid;border-color: #ff007f;font-size: 32rpx;}button {width: 80%;margin-top: 180rpx;background-color: #ffaa00;}.qr-box {width: 400rpx;height: 460rpx;margin: 0 auto;margin-top: 20rpx;}</style>

接下来是封装好的uqrcode代码，这个代码文件过于长了，所以我直接放在网盘了，需要的小伙伴自己下载引入就好了。

地址：链接：https://pan.baidu.com/s/1aqmIcr8oR9RLKEWGBOaf1A
提取码：tw7m

uniapp根据输入的文本或者地址生成二维码相关推荐

vue项目中图片地址生成二维码
前言一.图片地址生成二维码二.使用步骤 1.安装插件 2.执行方法(点击图片之后,弹框显示并且显示二维码) 总结前言 vue中点击图片生成二维码,利用的是qrcode插件,在需要使用的页面中引入 ...
根据url地址生成二维码，微信扫描二维码可直接打开网址
需求:根据url地址生成二维码,微信扫描二维码可直接打开网址 html代码: <input id="text" type="text" value=&qu ...
url地址生成二维码及转换成图片
写出来的小demo,大概就是这样子. 输入任意网址,生成出二维码.移动端不能直接将canvas生成出来的二维码保存为图片(pc端可以),所以将其直接转换成了图片. demo的代码: <!DOCT ...
【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开扫一扫手机端打开实战案例 vue生成二维码
代码 npm install qrcodejs2 --save 代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入. 在页面中使用 <template>< ...
微信小程序地址生成二维码显示
使用的是 weapp-qrcode,源代码地址 https://github.com/tomfriwel/weapp-qrcode 效果图项目中的代码 1.js页面引入js(js在github上自己 ...
HTML利用当前网页地址生成二维码
二维码分享扫描后进入对应网址可以说非常的方便今天就带大家看一种实现思路首先,这个功能需要一个引入js依赖文件大家可以直接下载我上传的资源下载资源下载后在html中引入这个 qrcode.j ...
【Jquery】jquery-qrcode把域名地址生成二维码图片，扫码即可访问
页面: <div id="code"></div> js: <script type="text/javascript" src= ...
图片、文本、文件如何在线生成二维码？
二维码是现在生活中随处可见的一种展现方式,不管是支付,交友,获取信息,传递文件等等,都会采用这种方式.那么针对于不同的用途,如何制作相关类型的图片二维码呢?那么一款简单的二维码生成器https://w ...
一连串数字怎么转换成二维码？数字生成二维码如何制作？
当我们使用二维码内容做成数字时该如何制作呢,比如做成标签码,序号码,号码牌等等,都可以使用数字二维码来展示,那么如何操作才能将一连串数字做成二维码呢?下面给大家分享一下数字静态二维码和数字微信活码的制 ...

uniapp根据输入的文本或者地址生成二维码

uniapp根据输入的文本或者地址生成二维码相关推荐

最新文章

热门文章