微信小程序 如何把小程序页面保存至用户相册

思路

• canvas绘制出页面
• 将canvas转化成图片，获取到临时路径
• 用临时路径将图片保存至相册

组件及API

• canvas ( 画布 ) 官方文档链接
• wx.canvasToTempFilePath ( 将canvas转换为临时文件路径 ) 官方文档链接
• wx.saveImageToPhotosAlbum( 保存图片到系统相册 ) 官方文档链接

举个栗子

• wxml

  
  点击保存图片

• js

  //绘制
  onReady:function(){
    var context = wx.createCanvasContext('share')
    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.draw(false, this.getTempFilePath)
  }

  //获取临时路径
  getTempFilePath:function(){
    wx.canvasToTempFilePath({
      canvasId: 'share',
      success: (res) => {
        this.setData({
          shareTempFilePath: res.tempFilePath
        })
      }
    })
  }

  //保存至相册
  saveImageToPhotosAlbum:function(){
    if (!this.data.shareTempFilePath){
      wx.showModal({
        title: '提示',
        content: '图片绘制中，请稍后重试',
        showCancel:false
      })
    }
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareTempFilePath,
      success:(res)=>{
        console.log(res)
      },
      fail:(err)=>{
        console.log(err)
      }
    })
  }

wepy常用封装

由于我平时主要使用wepy开发项目 所以这些常用封装及项目架子都是使用的wepy
覆盖了一些常用操作与封装、登录流程、保存图片至相册及相关授权流程

所有常用封装及流程实现请点我前往GitHub查看https://github.com/webxing/wepy_skeleton

项目目录结构

.
├── README.md
└── wepy_skeleton
    ├── package.json  // 配置启动脚本 (debug/dev/build)
    ├── project.config.json
    ├── src
    │   ├── app.wpy // networkTimeout plugins  this.use('promisify')  拦截request请求
    │   ├── common
    │   │   ├── animate.wxss  // 动画支持
    │   │   ├── api.js  // 所有api
    │   │   ├── collectFormId.js  // 收集formId
    │   │   ├── common.js  // 封装一些公用方法
    │   │   ├── decorator.js  // 封装trycatch装饰器 实现对函数的错误监控
    │   │   ├── http.js  // 封装小程序request请求
    │   │   ├── bindEvent.js  // 当n个触发条件均满足时 触发函数
    │   │   └── storage.js  // 封装storage为promise
    │   ├── components
    │   │   └── Modal.wpy  // 错误弹窗
    │   └── pages
    │       └── index.wpy  // 登录流程 引入装饰器trycatch 配置错误处理handleError 
    │       └── sign.wpy  // 保存图片至相册及相关授权处理
    │       └── auth.wpy  // 授权页
    └── wepy.config.js  // 配置rootURL  配置Less autoprefix  配置drop_console drop_debugger

• github：https://github.com/webxing
• 简书：https://www.jianshu.com/u/489662a091fd

本人两年纯小程序开发经验 新建了一个交流群 欢迎加入

以下是我独立开发的小程序 第一次Pro 欢迎使用 欢迎吐槽