uni-app 关于微信小程序分享，app微信聊天界面和朋友圈分享

柔光的暖阳◎ 2022-01-23 23:29 798阅读 0赞

前端小白的uni-app艰难学习之路

## 微信小程序分享 ##

实现微信小程序分享和app内微信分享  
小程序分享很简单，我们通过button的open-type属性

<button class="share-btn" open-type="share">立即分享</button>

然后定义onShareAppMessage方法（与onload同级）

onShareAppMessage(res) {
          return {
            title: '微信小程序测试分享',
            path: '/pages/common/login'
          }
        }

其中path是你的分享被点击后跳转的页面，需要是完整的路径

## app微信分享 ##

在app内调用分享，不会自动生成图片，需要我们自己生成，我这里是分享本页，所以先使用了截图功能，把本页内容生成图片并保存在相册，然后分享时从相册中获取并分享  
首先是截图并保存

share: function () {
            this.showShare = true
            var pages = getCurrentPages()
            var page = pages[pages.length - 1]
            var bitmap = null
            var currentWebview = page.$getAppWebview()
            bitmap = new plus.nativeObj.Bitmap('amway_img')
            // 将web内容绘制到Bitmap对象中
            currentWebview.draw(bitmap, function () {
              bitmap.save("_doc/a.jpg", {}, function (i) {
                uni.saveImageToPhotosAlbum({
                  filePath: i.target,
                  success:function(){
                    bitmap.clear()
                    uni.showToast({
                      title: '保存图片成功',
                      mask: false,
                      duration: 1500
                    })
                  }
                })
              }
              ,function (e) {
                // console.log('保存失败', + JSON.stringify(e))
              })
            },
            function (e) {
              // console.log('截屏失败', JSON.stringify(e))
            })
          }

然后是选择分享到微信聊天界面还是朋友圈

shareToWeixin: function (scene) {
            uni.chooseImage({
              count: 1,
              sizeType: ['compressed'],
              sourceType: ['album'],
              success: (res) => {
                uni.share({
                  provider: 'weixin',
                  type: 2,
                  title: 'app微信分享测试',
                  scene: scene,
                  imageUrl: res.tempFilePaths[0],
                  success: (res) => {
                    // console.log(res)
                    uni.showToast({
                      title: '分享成功！'
                    })
                  },
                  fail: (err) => {
                    // console.log(err)
                  }
                })
              }
            })
            
          },