基於Taro的微信小程序分享圖片功能實踐

時間 2019-12-10

標籤基於 taro 微信程序分享圖片功能實踐简体版

原文原文鏈接

前言

在各類小程序(微信、百度、支付寶)、H五、NativeApp 紛紛擾擾的當下，給你們強烈安利一款基於React的多終端開發利器：京東Taro（泰羅·奧特曼），Taro致力於多終端統一解決方案，一處代碼，多處運行。javascript

Taro支持以React語言開發小程序，支持CSS預處理器，支持實時編譯更新，支持NPM，等等等等，簡直不要太爽！

微信小程序分享圖片功能是常常在小程序業務中出現的，好比學習打卡分享，推廣會員分享，推廣商品分享等等。由於小程序是不支持直接分享圖片到朋友圈的，通常操做爲：css

生成包含小程序碼（當前也能夠是其餘特定的信息）的圖片；
用戶點擊保存圖片，下載到本地，再發布到朋友圈；
其餘用戶長按識別該小程序碼，進入當前小程序。

今天胡哥給你們分享下，基於Taro框架實現微信小程序分享圖片功能的實踐。前端

1、搭建Taro項目框架，建立微信小程序

1. 安裝taro腳手架工具

npm install -g @tarojs/cli

2. 初始化taro項目

taro init taro-img-share

3. 編譯項目，開啓Dev模式，生成小程序 -- dist目錄

npm run dev:weapp

4. 微信開發者工具，建立小程序，選擇項目根目錄爲taro-img-share下的dist目錄

2、小程序分享圖片功能實踐 --- 打卡圖片分享功能

先上圖，再說話

這是重點：使用Canvas繪製圖片並展現，保存圖片到相冊

drawImage()方法負責繪製展現，saveCard()方法負責下載圖片到相冊

src/pages/index/index.jsvue

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.sassjava

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/awaitweb

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

開發完畢，發佈小程序

執行打包，生成最終的小程序源碼小程序
```
npm run build:weapp
```
發佈小程序
點擊微信開發者工具上傳按鈕，上傳小程序，而後在微信小程序平臺發佈小程序便可。微信小程序

小結

本文着重介紹了使用Taro實現小程序生成打卡圖片，保存相冊，分享圖片功能的開發原理與實踐步驟，各位童鞋可參考並結合本身的實際業務進行擴展開發。
本文併爲深刻的對不一樣手機進行圖片適配，部分值也是設置的固定值（如填充文字的開始座標與填充的文字長度、大小），並未作比例響應。須要進一步交流的小夥伴，能夠關注胡哥有話說公衆號，持續關注相關文章，也可直接在文章留言交流。
不管是使用何種框架如Taro、mpvue、wepy等開發小程序分享圖片功能，原理都是同樣的，只不過是在調用方法以及處理邏輯時須要進行響應的小調整