小程序分享模塊超級詳解(推薦)

Page({
  onShareAppMessage: function(){
     return {
      title: 'xxxxx', //自定義轉(zhuǎn)發(fā)標題
      path: '/page/user?id=123', //分享頁面路徑
      imageUrl: '/common/images/xxx.png' //分享圖片 寬高比 5:4
    }
  }
})
//如果只寫成如下形式，title默認是小程序名，path為當前頁面路徑（不帶參數(shù)），imageUrl為當前頁面截圖
Page({
  onShareAppMessage: function(){}
})

//創(chuàng)建畫布（組件中一定要綁定this,切記?。。。?var ctx = wx.createCanvasContext('myCanvas', this);
//畫布上繪制圖片
ctx.drawImage(path, 0, 0, width, height);
//畫布上繪制文字
ctx.setFillStyle('#fff');
ctx.setFontSize(32);
ctx.fillText(startTime, 24, 54);
//其他信息繪制
//... 
ctx.draw();

//在上面代碼的draw()的回調(diào)中使用wx.canvasToTempFilePath
var that = this;
ctx.draw(true, () => {
  setTimeout(() => {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: (res) => { 
        that.setData({
          //res.tempFilePath 生成圖片的臨時路徑
          picUrl: res.tempFilePath
        });
        
        
      }
    }, that); //在組件中使用這里一定記得要綁定this，切記?。?！
  }, 300); //此處加入300毫秒延時是為了解決小程序繪制過程中的渲染問題
});

<image src="{{picUrl}}"/>

//將網(wǎng)絡圖片轉(zhuǎn)換為本地路徑
handleNetImg: function(imagePath) {
  var that = this;
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: imagePath,
      success: function(res) {
        resolve(res);
      }
    });
  });
}

handleNetImg('網(wǎng)絡圖片地址').then((res) => {
  console.log(res.path); //輸出轉(zhuǎn)換后的本地圖片路徑
  ctx.drawImage(res.path, 0, 0, width, height); //此時圖片即可在畫布上繪制出來
})

var handleBase64Img = function() {
  //wx.getFileSystemManager 小程序文件管理器
  var fsm = wx.getFileSystemManager();
  var FILE_NAME = 'base64src';
  var base64src = function(base64data) {
    return new Promise((resolve, reject) => {
      //解析base64，提取出圖片類型: imgtype,解析內(nèi)容bodyData（去掉data:image/png;base64,以后的內(nèi)容）
      var [, imgType, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
      if (!imgType) {
        reject(new Error('ERROR_BASE64SRC_PARSE'));
      }
      /**
       *wx.env.USER_DATA_PATH
       *本地用戶文件
       *本地用戶文件是從 1.7.0 版本開始新增的概念。提供了一個用戶文件目錄給開發(fā)者，開發(fā)者對這個目錄有完全自由的讀寫權限。通過 wx.env.USER_DATA_PATH 可以獲取到這個目錄的路徑。
       */
      var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`;
      //按指定寫入文件的字符編碼encoding，向地址filepath，寫入數(shù)據(jù)data。
      fsm.writeFile({
        filePath,
        data: bodyData,
        encoding: 'base64',
        success() {
          resolve(filePath);
        },
        fail() {
          reject(new Error('ERROR_BASE64SRC_WRITE'));
        },
      });
    });
  };
  return base64src;
}

var base64src = that.handleBase64Img();
var handleBase64src = base64src(base64data);
handleBase64src.then(res => {
  //res 即為base64 轉(zhuǎn)化為圖片后的本地路徑，即可在畫布上繪制成功
  that.ctx.drawImage(res, left, top, width, height);
});

//訪問相冊授權
wx.getSetting({
  success: (res) => {
    //檢查是否有訪問相冊的權限，如果沒有則通過wx.authorize方法授權(授權只需要一次就好，后面就可以直接訪問相冊)
    if (!res.authSetting['scope.writePhotosAlbum']) {
      console.log('沒有獲取授權');
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
        success: (res) => {
          //用戶點擊允許獲取相冊信息后邏輯進入這里,如上圖所示
        }
      })
    } 
  }
});

//獲取了相冊的訪問權限，使用 wx.saveImageToPhotosAlbum 將圖片保存到相冊中
wx.saveImageToPhotosAlbum({
  filePath: that.data.sharePicPath,
  success: (res) => {
    //保存成功彈出提示，告知一下用戶
    wx.showModal({
      title: '已保存到手機相冊',
      content: '將圖片發(fā)送到朋友圈，邀請好友加入',
      confirmColor: '#0bc183',
      confirmText: '知道了',
      showCancel: false
    })
  }
})

Page({
 onLoad(query) {
  // scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時傳入的 scene
  const scene = decodeURIComponent(query.scene)
 }
})

function setShareInfo(time, start, end, imageSrc) {
  return {
    width: 750,
    height: 1300,
    background: '#F2FCF8',
    views: [{
        type: 'rect',
        parent: true,
        radius: true,
        radiusVal: 16,
        left: 40,
        width: 670,
        height: 1140,
        shadow: true,
        background: '#cacacd',
        shadowColor: 'rgba(0,0,0,.6)',
        line: true
      },
      //....
      {
        type: 'text',
        content: '長按或掃描二維碼，查看這條線路',
        color: '#9B9BA1',
        top: 1052,
        left: 224,
        fontSize: 28,
        font: 'PingFangSC-Medium',
      },
      {
        type: 'image',
        path: '/common/images/station-flag.png',
        top: 746,
        left: 80,
        width: 32,
        height: 104
      }
    ]
  }
}

export {
  setShareInfo
}

import { setShareInfo } from '../../common/config/share-config';
page({
  onLoad: function() {
    this.setData({
      shareMessageInfoTimeline: setShareInfo('3月7號 下午16:30發(fā)車', '騰訊大廈', '平安國際中心', '')
    });
    //...
  },
});

<view class="container">
  <mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/>
</view>