美文网首页
分享朋友圈

分享朋友圈

作者: 且听风吟_792d | 来源:发表于2020-04-15 11:37 被阅读0次
    <style scoped>
      .page {
        height: 100%;
        width: 750rpx;
        border: 1rpx red solid;
      }
      .share{
        width:540rpx;
        height: 754rpx;
        position: fixed;
        left: 105rpx;
        right: 0;
        top: 242rpx;
        bottom: 200rpx;
        border: 1rpx blue solid;
      }
      .btn-box{
        padding: 10rpx 60rpx 0 60rpx;
      }
      .button{
        background: darkturquoise;
      }
      .bottom{
        width: 300rpx;
        height: 400rpx;
        background-color: black;
      }
      .bottom image{
        width:140rpx;
        height:140rpx;
      } 
    </style>
    <template>
      <div class="page">
        <div class='share'>
          <canvas canvas-id="shareCanvas" style="width:386rpx;height:438px;margin:0 72rpx 0;"></canvas>
          <!-- <div class='bottom'>
            <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg" bindtap='closeShare'></image>
          </div> -->
        </div>
      </div>
    </template>
    <script>
    var app = getApp();
    let timer = null;
    export default {
      name: "home",
      components: {},
      data() {
        return {
          userInfo:{
            nickName:'王二',
            headImg:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1252441405,2189346925&fm=26&gp=0.jpg"
          },
          sharebg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg', // 分享底部背景图
          shareTitle: '用户输入的内容', // 分享标题
          shareCoverImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1273423055,2066875544&fm=26&gp=0.jpg', 
          shareQrImg: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2482456912,1666703692&fm=26&gp=0.jpg', 
          seeDate: '2018-12-04', 
          current: 0,
          shareContent:'',
          swiperList: [
            {
              imageUrl:
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg"
            },
            {
              imageUrl:
                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1273423055,2066875544&fm=26&gp=0.jpg"
            },
            {
              imageUrl:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586858273614&di=597a0c96dd5f7ab1ff5f97847c30ae3d&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F17%2F01300543322754145561176407987_s.jpg"
            }
          ],
          startPageImageUrl: "http://placekitten.com/750/1206"
        };
      },
      computed: {},
      onShareAppMessage() {
          return {
            title: '弹出分享时显示的分享标题',
            desc: this.shareContent,
            path: '/page/user?id=123' 
            }
        },
      onPageScroll(e) {},
      /**
    
       * 生命周期函数--监听页面加载
    
       */
      onLoad: function (options) {
        let that = this;
        var UserName = '张三'
        wx.setNavigationBarTitle({
          title: '分享到朋友圈',
        })
        var time = "2020-4-15";
        var UserImage = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg";
        // 创建画布
        const ctx = wx.createCanvasContext('shareCanvas')
        // 白色背景
        ctx.setFillStyle('#fff')
        ctx.fillRect(0, 0, 198, 128)
        ctx.draw()
        // 下载底部背景图
    //     wx.getImageInfo({
    //       src: that.sharebg,
    //       success: (res1) => {
    //         ctx.drawImage(res1.path, 0, 250, 300, 130)
            // 下载视频封面图
            wx.getImageInfo({
              src: that.shareCoverImg,
              success: (res2) => {
                ctx.drawImage(res2.path, 0, 0, 198, 128)
                // 分享标题
                // ctx.setTextAlign('center')    // 文字居中
                ctx.setFillStyle('#000')  // 文字颜色:黑色
                ctx.setFontSize(20)         // 文字字号:20px
                if (that.shareTitle.length <= 14) {
                  // 不用换行
                  ctx.fillText(that.shareTitle, 10, 200, 280)
                } else if (that.shareTitle.length <= 28) {
                  // 两行
                  let firstLine = that.shareTitle.substring(0, 14);
                  let secondLine = that.shareTitle.substring(14, 27);
                  ctx.fillText(firstLine, 10, 200, 280)
                  ctx.fillText(secondLine, 10, 224, 280)
                } else {
                  // 超过两行
                  let firstLine = that.shareTitle.substring(0, 14);
                  let secondLine = that.shareTitle.substring(14, 27) + '...';
                  ctx.fillText(firstLine, 10, 200, 280)
                  ctx.fillText(secondLine, 10, 224, 280)
                }
                  // 下载二维码
                wx.getImageInfo({
                  src: that.shareQrImg,
                  success: (res3) => {
                    let qrImgSize = 70
                    ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize)
                    ctx.stroke()
                    ctx.draw(true)
                    // 用户昵称
                    ctx.setFillStyle('#000')  // 文字颜色:黑色
                    ctx.setFontSize(14) // 文字字号:16px
                    ctx.fillText(that.userInfo.nickName, 38, 284)
                    // 观看日期
                    ctx.setFillStyle('#999')  // 文字颜色:黑色
                    ctx.setFontSize(10)       // 文字字号:16px
                    ctx.fillText('在' + that.seeDate + '分享到朋友圈', 38, 298)
                    // 下载用户头像
                    wx.getImageInfo({
                      src: that.userInfo.headImg,
                      success: (res4) => {
                        // 先画圆形,制作圆形头像(圆心x,圆心y,半径r)
                        ctx.arc(22, 284, 12, 0, Math.PI * 2, false)
                        ctx.clip()
                        // 绘制头像图片
                        let headImgSize = 24
                        ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize)
                        // ctx.stroke() // 圆形边框
                        ctx.draw(true)
                        // 保存到相册
                        wx.canvasToTempFilePath({
                          canvasId: 'shareCanvas',
                          success: function (res) {
                            wx.saveImageToPhotosAlbum({
                              filePath: res.tempFilePath,
                              success: function (res) {
                                wx.showToast({
                                  title: '分享图片已保存到相册,请到朋友圈选择图片发布'
                                })
                              }
                            })
                          }
                        }, this)
                      }
                    })
                  }
                })
              }
            })
    //       }
    //     })
    },
      methods: {
        change(e) {
          this.current = e.detail.current;
        },
       
      }
    };
    </script>
    
    
    

    相关文章

      网友评论

          本文标题:分享朋友圈

          本文链接:https://www.haomeiwen.com/subject/xcaqvhtx.html