【原创】微信小程序把页面做成图片分享_小程序用首页的页面截图分享-CSDN博客

本文链接：https://blog.csdn.net/Harbour_zhang/article/details/103042338

本文介绍了如何在微信小程序中创建一个将页面转化为图片并进行分享的功能。通过在WXML中添加canvas，获取用户信息，然后使用小程序的API进行页面绘制，详细讲解了实现这一功能的步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
开发微信小程序的时候，经常要遇到如上图这样的，保存小程序二维码图片的分享功能。
网上找了很多都没有具体的写法，于是自己看官方文档写了一个，分享一下。

大致原理是:
1. 首先，需要在 wxml 中创建一个画板 canvas 。
2. 获取用户的设备信息，用户头像，昵称等。这些都可以通过小程序官方接口获取。
3. 绘制页面。绘制页面的各种API在官方文档都有。

下面贴代码：

WXML代码：

    
<view class='more' bindtap='saveImageToPhotosAlbum'>保存图片</view>   //保存图片按钮
<canvas canvas-id='share' style='width:100vw;height:100vh;' hidden='{
   {canvasHidden}}'></canvas> 

    //这里的 canvas-id 后面要用的上。 
    //style里的宽高要用上，不设置宽高画板会失效。其中vw和vh是微信的单位，
    //100vw等于1屏宽，100vh等于1屏高
    //canvasHidden是控制画板显示隐藏的参数，画板直接设置display none，会导致失效。

data 设置

 data: {
   
        canvasHidden:true,     //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
        avatarUrl: '',         //用户头像
        nickName: '',          //用户昵称
        wxappName: app.globalData.wxappName,    //小程序名称
        shareImgPath: '',      
        screenWidth: '',       //设备屏幕宽度
        description: app.globalData.description,    //奖品描述
        FilePath:'',           //头像路径
    },

JS代码：

 onLoad: function (options) {
   
      var that = this
      var userInfo, nickName, avatarUrl
      //获取用户信息，头像，昵称之类的数据
      wx.getUserInfo({
   
          success: function (res) {
   
              console.log(res);
              userInfo = res.userInfo
              nickName = userInfo.nickName
              avatarUrl = userInfo.avatarUrl
              that.setData({
   
                  avatarUrl: res.userInfo.avatarUrl,
                  nickName