Wechat applet to share pictures with wechat friends (such as QR code)


Table of contents

foreword

1. Which API to use?

2. The processing of pictures needs to be converted into a temporary path

3. Compatibility issues on the Windows side

foreword

Recently, I developed a WeChat applet project in the company. The uniapp technology was used. When sharing pictures, I checked the technical documentation of uniapp. The writing was still very rough, and the explanation was not very clear. After I read it all afternoon, I got it One conclusion, uniapp does not encapsulate an api that can forward pictures to WeChat friends.


Tip: The following is the text of this article, and the following cases are for reference

1. Which API to use?

1. For the picture sharing function, use wx.showShareImageMenu() instead of uni.share() of uniapp.

wx.showShareImageMenu({  //分享给朋友
                     path: qrimg.value,
                     success: (res) => {
                         console.log("分享成功:", res);
                     },
                     fail: (err) => {
                         console.log("分享取消:", err);
                     },
                 })

2. The processing of pictures needs to be converted into a temporary path

2. For the shared image, if the backend directly returns the path, the path needs to be converted into a temporary path and passed in; if the image is generated by the front end, draw one directly through wx.createCanvasContext(), and then convert it into a temporary path for the image through canvasToTempFilePath.

uni.canvasToTempFilePath({
                   destWidth: 100,
                   destHeight: 100,
                   canvasId: 'qrcode',
                   success: function(res) {
                         // 在H5平台下,tempFilePath 为 base64
                         // qrimg.value=res.tempFilePath
                         resolve(res.tempFilePath)
                   },
                   fail: function(error) {
                         wx.showToast({
                                 title: "保存图片失败",
                                 duration: 2000
                         })
                         if (error.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || 
                             error.errMsg === "saveImageToPhotosAlbum:fail auth deny" || 
                             error.errMsg === "saveImageToPhotosAlbum:fail authorize no response"
                         ) {
                             // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
                             wx.showModal({
                                 title: '提示',
                                 content: '需要您授权保存相册',
                                 showCancel: false,
                                 success: modalSuccess => {
                                     wx.openSetting({
                                         success(settingdata) {
                                             console.log("settingdata", settingdata)
                                             if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                 wx.showModal({
                                                     title: '提示',
                                                     content: '获取权限成功',
                                                     showCancel: false,
                                                 })
                                             } else {
                                                 wx.showModal({
                                                     title: '提示',
                                                     content: '获取权限失败,将无法保存到相册哦~',
                                                     showCancel: false,
                                                 })
                                             }
                                         },
                                     })
                                 }
                             })
                             reject(error)
                         }
                         reject(error)
                   }
                 })

3. Compatibility issues on the Windows side

3. Use WeChat on the Windows computer to open the current applet, and you will find that there is no response when calling wx.showShareImageMenu() (the success and fail methods are not executed). After consulting, the showShareImageMenu method does not support the use on Windows, so you need to judge in advance Whether it is a Windows system (by judging whether getSystemInfoSync().platform is equal to windows), if it is a Windows system, either hide the entrance or give a prompt toast to avoid this problem


Guess you like

Origin blog.csdn.net/weixin_54079103/article/details/129149328