代码提交

components/My_TwoDimensionalCode/index.js

@@ -1,4 +1,4 @@
-// components/My_TwoDimensionalCode/index.js
+const QR = require('../../miniprogram_npm/qrcode-base64/index.js')
 Component({
     /**
      * 组件的属性列表
@@ -9,18 +9,30 @@ Component({
         },
         codeName: {
             type: String
-        },
-        imageUrl: {
-            type: String,
-            value: '/static/changeImg.png'
         }
     },
-
+    lifetimes: {
+        attached: function () {
+            // 在组件实例进入页面节点树时执行
+            var imgData = QR.drawImg(this.data.codeText, {
+                typeNumber: 4,
+                errorCorrectLevel: 'M',
+                size: 500
+            })
+            this.setData({
+                qrcodeURL: imgData
+            })
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+    },
     /**
      * 组件的初始数据
      */
     data: {
-
+        codeText: 'https://www.baidu.com',
+        qrcodeURL: "",
     },
 
     /**
@@ -29,47 +41,101 @@ Component({
     methods: {
         /* 预览大图 */
         preViewImage() {
-            const url = [this.data.imageUrl];
+            const url = [this.data.qrcodeURL];
             wx.previewImage({
                 urls: url,
             })
         },
         /* 下载二维码 */
         download() {
-            wx.downloadFile({
-                url: this.data.imageUrl,
-                success: function (res) {
-                    const tempFilePath = res.tempFilePath;
-                    // 保存文件
-                    wx.saveFile({
-                        tempFilePath,
-                        success: function (res) {
-                            const savedFilePath = res.savedFilePath;
-                            // 打开文件
-                            wx.openDocument({
-                                filePath: savedFilePath,
-                                success: function (res) {
-                                    console.log(res)
-                                },
-                            });
-                        },
-                        fail: function (err) {
-                            console.log('保存失败：', err)
-                            wx.showToast({
-                                title: '保存失败',
-                                icon: "none"
-                            })
+            const that = this;
+            wx.authorize({
+                /* 这个就是保存相册的 */
+                scope: 'scope.writePhotosAlbum',
+                success() {
+                    /* 保存图片方法 */
+                    that.img();
+                },
+                complete(res) {
+                    /* 这里判断一下如果没有授权重新打开设置选项 */
+                    wx.getSetting({
+                        success(res) {
+                            if (!res.authSetting['scope.writePhotosAlbum']) {
+                                /* 打开设置的方法 */
+                                that.opensit();
+                            }
                         }
                     });
+                }
+            });
+        },
+        /* 授权提示 ，这里就是重复提示用户去授权*/
+        opensit() {
+            wx.showModal({
+                content: '由于您还没有允许保存图片到您相册里,这无法进行分享操作点击确定去允许授权',
+                success: function (res) {
+                    if (res.confirm) {
+                        /* 这个就是打开设置的API*/
+                        wx.openSetting({
+                            success(res) {
+                                console.log(res.authSetting);
+                            }
+                        });
+                    } else if (res.cancel) {
+                        wx.showModal({
+                            cancelText: '依然取消',
+                            confirmText: '重新授权',
+                            content: '很遗憾你点击了取消，这将无法进行分享操作，请慎重考虑',
+                            success: function (res) {
+                                if (res.confirm) {
+                                    wx.openSetting({
+                                        success(res) {
+                                            console.log(res.authSetting);
+                                        }
+                                    });
+                                } else if (res.cancel) {
+                                    console.log('用户不授权');
+                                }
+                            }
+                        });
+                    }
+                }
+            });
+        },
+        /* 特别注意要先获取图片信息在进行保存，不让保存不了 */
+        img() {
+            const that = this;
+            /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
+            const base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(this.data.qrcodeURL));
+            /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
+            const base64ImgUrl = "data:image/png;base64," + base64Data;
+
+            /* 保存图片到相册 */
+            wx.saveImageToPhotosAlbum({
+                filePath: base64ImgUrl,
+                success: function () {
+                    console.log('save success');
+                    wx.showModal({
+                        title: '保存成功',
+                        content: '图片已成功保存到相册，快去分享到您的圈子吧',
+                        showCancel: false
+                    });
                 },
-                fail: function (err) {
-                    console.log('下载失败：', err);
-                    wx.showToast({
-                        title: '下载失败',
-                        icon: "none"
-                    })
-                },
+                complete(res) {
+                    console.log(res);
+                }
             });
+            /* 获取图片信息 */
+            /*  wx.getImageInfo({
+                 src: that.data.qrcodeURL,
+                 success: function (res) {
+                     console.log(res)
+                    
+                 },
+                 fail:(err => {
+                     console.log(err)
+                 })
+             }); */
         }
     }
 })

components/My_TwoDimensionalCode/index.wxml

@@ -1,7 +1,7 @@
 <My_DisplayBox title="{{title}}" isMore="{{false}}">
     <image slot="display-box-img" class="display-title_image" src="/static/icon-08.png" mode="aspectFit"></image>
     <view class="two-code" bindtap="preViewImage">
-        <image src="{{imageUrl}}" mode="aspectFit"></image>
+        <image src="{{qrcodeURL}}" mode="aspectFit"></image>
     </view>
     <view class="two-code-text">{{codeName}}<text catchtap="download">下载</text></view>
 </My_DisplayBox>

miniprogram_npm/qrcode-base64/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Pudon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

miniprogram_npm/qrcode-base64/README.md

@@ -0,0 +1,32 @@
+# qrcode-base64
+Generating the QR code in the form of Base64  
+微信小程序生成二维码的插件,基于base64编码输出二维码，不依赖canvas，理论支持全平台
+
+>PS: 主要在`node-yaqrcode`项目基础上进行改造适应微信小程序
+
+## 说明
+使用NPM
+```
+npm install qrcode-base64
+```
+
+JS调用例子：
+```
+    import QR from 'qrcode-base64'
+
+    var imgData = QR.drawImg(this.data.codeText, {
+      typeNumber: 4,
+      errorCorrectLevel: 'M',
+      size: 500
+    })
+    // 返回输出base64编码imgData
+
+```
+
+## DEMO示例图
+
+![demo-img](https://github.com/Pudon/weapp-qrcode-base64/blob/master/demo/demo.png?raw=true)
+
+## TODO
+1. 更多配置项，灵活多样
+2. 样式自定义化，增加更丰富的样式

miniprogram_npm/qrcode-base64/package.json

@@ -0,0 +1,53 @@
+{
+  "_from": "qrcode-base64",
+  "_id": "qrcode-base64@1.0.1",
+  "_inBundle": false,
+  "_integrity": "sha1-RWeubw9gmFYVbR6RZxrdMfrcE3A=",
+  "_location": "/qrcode-base64",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "tag",
+    "registry": true,
+    "raw": "qrcode-base64",
+    "name": "qrcode-base64",
+    "escapedName": "qrcode-base64",
+    "rawSpec": "",
+    "saveSpec": null,
+    "fetchSpec": "latest"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.nlark.com/qrcode-base64/download/qrcode-base64-1.0.1.tgz",
+  "_shasum": "4567ae6f0f609856156d1e91671add31fadc1370",
+  "_spec": "qrcode-base64",
+  "_where": "D:\\布万家小程序",
+  "author": {
+    "name": "Pudon"
+  },
+  "bugs": {
+    "url": "https://github.com/Pudon/qrcode-base64/issues"
+  },
+  "bundleDependencies": false,
+  "deprecated": false,
+  "description": "Generating the QR code in the form of Base64",
+  "homepage": "https://github.com/Pudon/qrcode-base64#readme",
+  "keywords": [
+    "qrcode-base64",
+    "qrcode",
+    "wx",
+    "mini-program"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "name": "qrcode-base64",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Pudon/qrcode-base64.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "version": "1.0.1"
+}

package-lock.json

@@ -8,6 +8,11 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmmirror.com/@vant/weapp/download/@vant/weapp-1.9.2.tgz",
       "integrity": "sha1-QGF0wR0/Qh277/mVpVbOHTBimQg="
+    },
+    "qrcode-base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.nlark.com/qrcode-base64/download/qrcode-base64-1.0.1.tgz",
+      "integrity": "sha1-RWeubw9gmFYVbR6RZxrdMfrcE3A="
     }
   }
 }

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": ".eslintrc.js",
   "dependencies": {
-    "@vant/weapp": "^1.9.2"
+    "@vant/weapp": "^1.9.2",
+    "qrcode-base64": "^1.0.1"
   },
   "devDependencies": {},
   "scripts": {

project.private.config.json

@@ -145,6 +145,13 @@
                     "launchMode": "default",
                     "scene": null
                 },
+                {
+                    "name": "",
+                    "pathName": "pages/businessPartner/applyFor",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
                 {
                     "name": "",
                     "pathName": "pages/businessPartner/applyFor",