码迷,mamicode.com
首页 > 微信 > 详细

微信小程序 生成二维码

时间:2020-04-14 17:16:06      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:anti   margin   程序   ems   nbsp   style   primary   版本支持   content   

 效果如下图

技术图片

 

 

 需要用到weapp-qrcode.js,下载https://blog-static.cnblogs.com/files/-tiantian/weapp-qrcode.js,点开链接按 ctrl + s 保存到相应的位置

技术图片

 

 index.wxml中的代码:

<view id="container">
  <view class="ewm">
    <canvas style="width: 600rpx; height: 600rpx;" canvas-id="myQrcode"></canvas>
  </view>
  <input class="inpt" bindinput="ewmText" value="{{ text }}"></input>
  <button bindtap="searchFn" class="btn" type="primary">生成二维码</button>
</view>

index.wxss中的代码:

.ewm{
  background-color: #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 680rpx;
  height: 680rpx;
  margin: 50rpx auto;
}

.inpt{
  border: 1rpx solid #e8e8e8;
  width: 620rpx;
  margin: 30rpx auto;
  padding: 30rpx;
}

.btn{
  width: 680rpx;
}

index.js中的代码:

//index.js
const app = getApp()
let drawQrcode = require("../../utils/weapp-qrcode.js")
Page({
  data: {
    text:"(?′?‵?)I L???????",
  },
  onLoad() {
    this.ewmChange()
  },

  ewmChange(){
    let size = {}
    size.w = wx.getSystemInfoSync().windowWidth / 750 * 600
    size.h = size.w
    var that = this

    drawQrcode({
      width: size.w,
      height: size.h,
      canvasId: myQrcode,
      // ctx: wx.createCanvasContext(‘myQrcode‘),
      text: that.data.text,
      // v1.0.0+版本支持在二维码上绘制图片
    })
  },

  ewmText(e){
    this.setData({
      text: e.detail.value
    })
  },

  searchFn(){
    this.ewmChange()
  }
  
})

 

微信小程序 生成二维码

标签:anti   margin   程序   ems   nbsp   style   primary   版本支持   content   

原文地址:https://www.cnblogs.com/-tiantian/p/12698629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!