增加绘制完成回调

WYuanyang · May 20, 2020 · 8c2dd40 · 8c2dd40
1 parent 5a840fd
commit 8c2dd40
Show file tree

Hide file tree

Showing 9 changed files with 230 additions and 152 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 > 本项目用于在微信小程序中生成二维码，也可用于第三方框架Mpvue,Taro等。
 
 ## 生成预览
+
 ![jsh5css.cn](http://jsh5css.cn/blog/wp-content/uploads/2016/12/20161207143611_73427.png)
 
 * 可支持输入中文文本
@@ -13,27 +14,29 @@
 git clone https://github.com/demi520/wxapp-qrcode.git
 ```
 
-
 ## 使用
 
 1.创建canvas节点,以及设置canvas-id。(可以控制该区域不显示，但是必须要存在)
+
 ```html
 <canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
 ```
 
-2.引入qrcode.js,将` utils/qrcode.js` 文件复制到自己工程里，并引入。
+2.引入qrcode.js,将`utils/qrcode.js` 文件复制到自己工程里，并引入。
+
 ```javascript
 // 注意： 这里xxx是你自己的路径
 let QR = require("xxxx/qrcode.js")  // require方式
 import QR from 'xxxx/qrcode.js'    // es6的方式
 ```
 
 3.在js文件中，定义相关的方法，**要注意在data中创建imagePath（最终生成的图片路径）,可以将img的src属性绑定imagePath**
+
 ```javascript
 createQrCode: function (content, canvasId, cavW, cavH) {
   //调用插件中的draw方法，绘制二维码图片
-  QR.api.draw(content, canvasId, cavW, cavH);
-  this.canvasToTempImage(canvasId);
+  //this.canvasToTempImage 为绘制完成的回调函数，可根据自己的业务添加
+  QR.api.draw(content, canvasId, cavW, cavH, this, this.canvasToTempImage);
 },
 
 //获取临时缓存图片路径，存入data中
@@ -45,7 +48,7 @@ canvasToTempImage: function (canvasId) {
       let tempFilePath = res.tempFilePath;
       console.log(tempFilePath);
       that.setData({       // 如果采用mpvue,即 this.imagePath = tempFilePath
-        imagePath:tempFilePath,     
+        imagePath:tempFilePath,
       });
     },
     fail: function (res) {
@@ -56,21 +59,23 @@ canvasToTempImage: function (canvasId) {
 ```
 
 4.绑定事件，调用createQrCode，生成二维码
+
 ```javascript
 createQrCode ('wxapp-qrcode', 'mycanvas', 300, 300)
 ```
 
 ## FAQ
 
-
-### 自定义组件中不能生成qrcode？
+### 自定义组件中不能生成qrcode?
 
 封装方法时: 添加上this, `QR.api.draw(url, canvasId, cavW, cavH, this);` 可参考qrcode.js 768行，*[wx.createCanvasContext](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html)*
 
 ### 如何适配不同屏幕大小的canvas？
 
 可参考 `pages/main/index.js` 中的 `setCanvasSize` 方法。
 
+## Ps
+
+感谢[微信小程序|联盟](http://www.wxapp-union.com/) [@amis](http://www.wxapp-union.com/home.php?mod=space&uid=310)提供的素材和创意；
 
-* 感谢[微信小程序|联盟](http://www.wxapp-union.com/) [@amis](http://www.wxapp-union.com/home.php?mod=space&uid=310)提供的素材和创意；  
-* 测试有其他问题请回帖哦，感激！！
+测试有其他问题请回帖哦，感激！！
diff --git a/app.json b/app.json
@@ -1,14 +1,13 @@
 {
-  "pages":[
-	"pages/main/index",
+  "pages": [
+    "pages/main/index",
     "pages/logs/logs"
-
-
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle":"black"
-  }
-}
+    "navigationBarTextStyle": "black"
+  },
+  "sitemapLocation": "sitemap.json"
+}
diff --git a/pages/main/index.js b/pages/main/index.js
@@ -1,106 +1,111 @@
 // pages/main/index.js
 var QR = require("../../utils/qrcode.js");
 Page({
-  data:{
-    canvasHidden:false,
-    maskHidden:true,
-    imagePath:'',
-    placeholder:'http://wxapp-union.com'//默认二维码生成文本
+  data: {
+    maskHidden: true,
+    imagePath: '',
+    placeholder: 'http://wxapp-union.com' //默认二维码生成文本
   },
-  onLoad:function(options){
+  onLoad: function (options) {
     // 页面初始化 options为页面跳转所带来的参数
-    var size = this.setCanvasSize();//动态设置画布大小
+    var size = this.setCanvasSize(); //动态设置画布大小
     var initUrl = this.data.placeholder;
     this.createQrCode(initUrl, "mycanvas", size.w, size.h);
-    
+
 
   },
-  onReady:function(){
-  
+  onReady: function () {
+
   },
-  onShow:function(){
-    
+  onShow: function () {
+
     // 页面显示
   },
-  onHide:function(){
+  onHide: function () {
     // 页面隐藏
   },
 
-  onUnload:function(){
+  onUnload: function () {
     // 页面关闭
 
   },
   //适配不同屏幕大小的canvas
-  setCanvasSize:function(){
-    var size={};
+  setCanvasSize: function () {
+    var size = {};
     try {
-        var res = wx.getSystemInfoSync();
-        var scale = 750/686;//不同屏幕下canvas的适配比例；设计稿是750宽
-        var width = res.windowWidth/scale;
-        var height = width;//canvas画布为正方形
-        size.w = width;
-        size.h = height;
-      } catch (e) {
-        // Do something when catch error
-        console.log("获取设备信息失败"+e);
-      } 
+      var res = wx.getSystemInfoSync();
+      var scale = 750 / 686; //不同屏幕下canvas的适配比例；设计稿是750宽
+      var width = res.windowWidth / scale;
+      var height = width; //canvas画布为正方形
+      size.w = width;
+      size.h = height;
+    } catch (e) {
+      // Do something when catch error
+      console.log("获取设备信息失败" + e);
+    }
     return size;
-  } ,
-  createQrCode:function(url,canvasId,cavW,cavH){
+  },
+  createQrCode: function (url, canvasId, cavW, cavH) {
     //调用插件中的draw方法，绘制二维码图片
-    QR.api.draw(url,canvasId,cavW,cavH);
-    setTimeout(() => { this.canvasToTempImage();},1000);
-    
+    QR.api.draw(url, canvasId, cavW, cavH, this, this.canvasToTempImage);
+    // setTimeout(() => { this.canvasToTempImage();},100);
+
   },
   //获取临时缓存照片路径，存入data中
-  canvasToTempImage:function(){
+  canvasToTempImage: function () {
     var that = this;
     wx.canvasToTempFilePath({
       canvasId: 'mycanvas',
       success: function (res) {
-          var tempFilePath = res.tempFilePath;
-          console.log(tempFilePath);
-          that.setData({
-              imagePath:tempFilePath,
-             // canvasHidden:true
-          });
+        var tempFilePath = res.tempFilePath;
+        console.log(tempFilePath);
+        that.setData({
+          imagePath: tempFilePath,
+        });
       },
       fail: function (res) {
-          console.log(res);
+        console.log(res);
       }
-    });
+    }, that);
   },
   //点击图片进行预览，长按保存分享图片
-  previewImg:function(e){
+  previewImg: function (e) {
     var img = this.data.imagePath;
-    console.log(img);
     wx.previewImage({
       current: img, // 当前显示图片的http链接
       urls: [img] // 需要预览的图片http链接列表
     })
   },
-  formSubmit: function(e) {
+  formSubmit: function (e) {
     var that = this;
     var url = e.detail.value.url;
+    if (url === "") {
+      wx.showToast({
+        icon: 'none',
+        title: '请输入网址',
+        duration: 2000
+      });
+      return;
+    }
     that.setData({
-      maskHidden:false,
+      maskHidden: false,
     });
     wx.showToast({
       title: '生成中...',
       icon: 'loading',
-      duration:2000
+      duration: 2000
     });
-    var st = setTimeout(function(){
+    var st = setTimeout(function () {
       wx.hideToast()
       var size = that.setCanvasSize();
       //绘制二维码
-      that.createQrCode(url,"mycanvas",size.w,size.h);
+      that.createQrCode(url, "mycanvas", size.w, size.h);
       that.setData({
-        maskHidden:true
+        maskHidden: true
       });
       clearTimeout(st);
-    },2000)
-    
+    }, 2000)
+
   }
 
 })
diff --git a/pages/main/index.json b/pages/main/index.json
@@ -1,6 +1,6 @@
 {
   "navigationBarBackgroundColor": "#37373b",
-  "navigationBarTextStyle": "#fff",
+  "navigationBarTextStyle": "white",
   "navigationBarTitleText": "二维码生成器",
   "backgroundColor": "#efeff4",
   "backgroundTextStyle": "light"

diff --git a/pages/main/index.wxml b/pages/main/index.wxml
@@ -1,21 +1,17 @@
-<!--pages/main/index.wxml-->
+<!-- pages/main/index.wxml -->
 <view class="container-box">
     <view class="img-box">
         <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
     </view>
     <form bindsubmit="formSubmit">
         <view class="input-row">
             <label>网址</label>
-            <input name='url' value='' type="text" maxlength="255" placeholder="{{placeholder}}"/>
+            <input name='url' value='' type="text" maxlength="255" placeholder="{{placeholder}}" />
         </view>
-        <!--<view class="input-row">
-            <label>金额</label>
-            <input name="money" type="number" maxlength="7"  placeholder="1000000"/>
-        </view>-->
         <button formType="submit" class="mybtn" type="primary">生成二维码</button>
     </form>
 </view>
 <view hidden="{{maskHidden}}" class="mask"></view>
 <view class="canvas-box">
-  <canvas  hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
-</view>
+    <canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas" />
+</view>
diff --git a/pages/main/index.wxss b/pages/main/index.wxss
@@ -1,21 +1,57 @@
 /* pages/main/index.wxss */
-.container-box{background-color: #efeff4;height: 100vh}
-.img-box{padding: 32rpx;background-color: #fff;border-bottom: 1rpx solid #e5e5e5;position: relative}
-.img-box image{width: 686rpx;height: 686rpx;background-color: #f9f9f9}
-.input-row{
+.container-box {
+    background-color: #efeff4;
+    height: 100vh
+}
+
+.img-box {
+    padding: 32rpx;
+    background-color: #fff;
+    border-bottom: 1rpx solid #e5e5e5;
+    position: relative
+}
+
+.img-box image {
+    width: 686rpx;
+    height: 686rpx;
+    background-color: #f9f9f9
+}
+
+.input-row {
     margin: 30rpx auto;
     border-bottom: 1rpx solid #e5e5e5;
     border-top: 1rpx solid #e5e5e5;
     display: flex;
     align-items: center;
     height: 88rpx;
-    padding: 0 32rpx; 
+    padding: 0 32rpx;
     background-color: #fff;
     font-size: 34rpx;
     color: #000
 }
 
-.input-row input{margin-left: 100rpx;flex: 1}
-.mybtn{width:686rpx;margin: 60rpx auto }
-.mask{position: fixed;top: 0;left: 0;z-index: 3; width: 100%;height: 100%;opacity: 0;}
-.canvas-box{position: fixed;top:999999rpx;left: 0}
+.input-row input {
+    margin-left: 100rpx;
+    flex: 1
+}
+
+.mybtn {
+    width: 686rpx;
+    margin: 60rpx auto
+}
+
+.mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+.canvas-box {
+    position: fixed;
+    top: 999999rpx;
+    left: 0
+}