小程序分享模块超级详解(推荐)

Page({
  onShareAppMessage: function(){
     return {
      title: 'xxxxx', //自定义转发标题
      path: '/page/user?id=123', //分享页面路径
      imageUrl: '/common/images/xxx.png' //分享图片 宽高比 5:4
    }
  }
})
//如果只写成如下形式，title默认是小程序名，path为当前页面路径（不带参数），imageUrl为当前页面截图
Page({
  onShareAppMessage: function(){}
})

//创建画布（组件中一定要绑定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()的回调中使用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}}"/>

//将网络图片转换为本地路径
handleNetImg: function(imagePath) {
  var that = this;
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: imagePath,
      success: function(res) {
        resolve(res);
      }
    });
  });
}

handleNetImg('网络图片地址').then((res) => {
  console.log(res.path); //输出转换后的本地图片路径
  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,解析内容bodyData（去掉data:image/png;base64,以后的内容）
      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 版本开始新增的概念。提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。
       */
      var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`;
      //按指定写入文件的字符编码encoding，向地址filepath，写入数据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 转化为图片后的本地路径，即可在画布上绘制成功
  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: '将图片发送到朋友圈，邀请好友加入',
      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发车', '腾讯大厦', '平安国际中心', '')
    });
    //...
  },
});

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