基于Taro的微信小程序分享图片功能实践

共计 4114 个字符，预计需要花费 11 分钟才能阅读完成。

在各种小程序(微信、百度、支付宝)、H5、NativeApp 纷纷扰扰的当下，给大家强烈安利一款基于 React 的多终端开发利器：京东 Taro（泰罗·奥特曼），Taro 致力于多终端统一解决方案，一处代码，多处运行。

Taro 支持以 React 语言开发小程序，支持 CSS 预处理器，支持实时编译更新，支持 NPM，等等等等，简直不要太爽！

微信小程序分享图片功能是经常在小程序业务中出现的，比如学习打卡分享，推广会员分享，推广商品分享等等。因为小程序是不支持直接分享图片到朋友圈的，一般操作为：

生成包含小程序码（当前也可以是其他特定的信息）的图片；
用户点击保存图片，下载到本地，再发布到朋友圈；
其他用户长按识别该小程序码，进入当前小程序。

今天胡哥给大家分享下，基于 Taro 框架实现微信小程序分享图片功能的实践。

npm install -g @tarojs/cli

taro init taro-img-share

npm run dev:weapp

drawImage()方法负责绘制展示，saveCard()方法负责下载图片到相册

src/pages/index/index.js

import Taro, {Component} from '@tarojs/taro'
// 引入对应的组件
import {View, Text, Button, Canvas} from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  config = {navigationBarTitleText: '首页'}

  /**
  * 初始化信息
  */
  constructor () {
    this.state = {
      // 用户信息
      userInfo: {},
      // 是否展示 canvas
      isShowCanvas: false
    }
  }

  /**
   * getUserInfo() 获取用户信息
   */
  getUserInfo (e) {if (!e.detail.userInfo) {
      Taro.showToast({
        title: '获取用户信息失败，请授权',
        icon: 'none'
      })
      return
    }
    this.setState({
      isShowCanvas: true,
      userInfo: e.detail.userInfo
    }, () => {
      // 调用绘制图片方法
      this.drawImage()})
  }

  /**
   * drawImage() 定义绘制图片的方法
   */
  async drawImage () {
    // 创建 canvas 对象
    let ctx = Taro.createCanvasContext('cardCanvas')
    
    // 填充背景色
    let grd = ctx.createLinearGradient(0, 0, 1, 500)
    grd.addColorStop(0, '#1452d0')
    grd.addColorStop(0.5, '#FFF')
    ctx.setFillStyle(grd)
    ctx.fillRect(0, 0, 400, 500)

    // // 绘制圆形用户头像
    let {userInfo} = this.state
    let res = await Taro.downloadFile({url: userInfo.avatarUrl})
    ctx.save()
    ctx.beginPath()
    // ctx.arc(160, 86, 66, 0, Math.PI * 2, false)
    ctx.arc(160, 88, 66, 0, Math.PI * 2)
    ctx.closePath()
    ctx.clip()
    ctx.stroke()
    ctx.translate(160, 88)
    ctx.drawImage(res.tempFilePath, -66, -66, 132, 132)
    ctx.restore()

    // 绘制文字
    ctx.save()
    ctx.setFontSize(20)
    ctx.setFillStyle('#FFF')
    ctx.fillText(userInfo.nickName, 100, 200)
    ctx.setFontSize(16)
    ctx.setFillStyle('black')
    ctx.fillText('已在胡哥有话说公众号打卡 20 天', 50, 240)
    ctx.restore()

    // 绘制二维码
    let qrcode = await Taro.downloadFile({url: 'https://upload-images.jianshu.io/upload_images/3091895-f0b4b900390aec73.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/258/format/webp.jpg'})
    ctx.drawImage(qrcode.tempFilePath, 70, 260, 180, 180)

    // 将以上绘画操作进行渲染
    ctx.draw()}

  /**
   * saveCard() 保存图片到本地
   */
  async saveCard () {
    // 将 Canvas 图片内容导出指定大小的图片
    let res = await Taro.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 400,
      height: 500,
      destWidth: 360,
      destHeight: 450,
      canvasId: 'cardCanvas',
      fileType: 'png'
    })
    let saveRes = await Taro.saveImageToPhotosAlbum({filePath: res.tempFilePath})
    if (saveRes.errMsg === 'saveImageToPhotosAlbum:ok') {
      Taro.showModal({
        title: '图片保存成功',
        content: '图片成功保存到相册了，快去发朋友圈吧~',
        showCancel: false,
        confirmText: '确认'
      })
    } else {
        Taro.showModal({
        title: '图片保存失败',
        content: '请重新尝试!',
        showCancel: false,
        confirmText: '确认'
      })
    }
  }

  render () {let { isShowCanvas} = this.state
    return (
      <View className='index'>
        <Button onGetUserInfo={this.getUserInfo} openType="getUserInfo" type="primary" size="mini"> 打卡 </Button>
        {/* 使用 Canvas 绘制分享图片 */}
        {
          isShowCanvas && 
            <View className="canvas-wrap">
              <Canvas 
                id="card-canvas"
                className="card-canvas"
                style="width: 320px; height: 450px"
                canvasId="cardCanvas" >
              </Canvas>
              <Button onClick={this.saveCard} className="btn-save" type="primary" size="mini"> 保存到相册 </Button>
            </View> 
        }
      </View>
    )
  }
}

src/pages/index/index.sass

index.js 组件中的 css 样式

.index {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.canvas-wrap {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .btn-save {margin-top: 40rpx;}
}

设置 Taro 支持 ES6 的 async/await

下载 @tarojs/async-await
```
npm install -D @tarojs/async-await
```
app.js 中引入
```
import '@tarojs/async-await'
```

执行打包，生成最终的小程序源码
```
npm run build:weapp
```
发布小程序
点击微信开发者工具上传按钮，上传小程序，然后在微信小程序平台发布小程序即可。

本文着重介绍了使用 Taro 实现小程序生成打卡图片，保存相册，分享图片功能的开发原理与实践步骤，各位童鞋可参考并结合自己的实际业务进行扩展开发。
本文并为深入的对不同手机进行图片适配，部分值也是设置的固定值（如填充文字的开始坐标与填充的文字长度、大小），并未做比例响应。需要进一步交流的小伙伴，可以关注胡哥有话说公众号，持续关注相关文章，也可直接在文章留言交流。
无论是使用何种框架如 Taro、mpvue、wepy 等开发小程序分享图片功能，原理都是一样的，只不过是在调用方法以及处理逻辑时需要进行响应的小调整

掌握业务功能实现原理，是制胜一切的法宝！

关注胡哥有话说公众号
回复关键字 Taro 即可，会收到项目源码地址

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得 收藏 、 转发 、点击右下角按钮 在看，推荐给更多小伙伴呦，欢迎多多留言交流 …

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！

前言

一、搭建 Taro 项目框架，创建微信小程序

1. 安装 taro 脚手架工具

2. 初始化 taro 项目

3. 编译项目，开启 Dev 模式，生成小程序 — dist 目录

4. 微信开发者工具，创建小程序，选择项目根目录为 taro-img-share 下的 dist 目录

二、小程序分享图片功能实践 — 打卡图片分享功能

先上图，再说话

这是重点：使用 Canvas 绘制图片并展示，保存图片到相册

注意事项

开发完毕，发布小程序

小结

如何获取该案例的源代码

后记

Just My Socks（注册教程内含优惠码）