快捷導(dǎo)航

微信小程序基于Taro的分享圖片功能實(shí)踐詳解

更新時(shí)間：2019年07月12日 17:13:19 作者：JustBeCoder

這篇文章主要介紹了微信小程序基于Taro的分享圖片功能實(shí)踐詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

在各種小程序(微信、百度、支付寶)、H5、NativeApp 紛紛擾擾的當(dāng)下，給大家強(qiáng)烈安利一款基于React的多終端開發(fā)利器：京東Taro（泰羅·奧特曼），Taro致力于多終端統(tǒng)一解決方案，一處代碼，多處運(yùn)行。

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

微信小程序分享圖片功能是經(jīng)常在小程序業(yè)務(wù)中出現(xiàn)的，比如學(xué)習(xí)打卡分享，推廣會(huì)員分享，推廣商品分享等等。因?yàn)樾〕绦蚴遣恢С种苯臃窒韴D片到朋友圈的，一般操作為：

生成包含小程序碼（當(dāng)前也可以是其他特定的信息）的圖片；
用戶點(diǎn)擊保存圖片，下載到本地，再發(fā)布到朋友圈；
其他用戶長按識(shí)別該小程序碼，進(jìn)入當(dāng)前小程序。

今天胡哥給大家分享下，基于Taro框架實(shí)現(xiàn)微信小程序分享圖片功能的實(shí)踐。

一、搭建Taro項(xiàng)目框架，創(chuàng)建微信小程序

1. 安裝taro腳手架工具

npm install -g @tarojs/cli

2. 初始化taro項(xiàng)目

taro init taro-img-share

3. 編譯項(xiàng)目，開啟Dev模式，生成小程序 -- dist目錄

npm run dev:weapp

4. 微信開發(fā)者工具，創(chuàng)建小程序，選擇項(xiàng)目根目錄為taro-img-share下的dist目錄

二、小程序分享圖片功能實(shí)踐 --- 打卡圖片分享功能

先上圖，再說話

效果圖

點(diǎn)擊保存到相冊

這是重點(diǎn)：使用Canvas繪制圖片并展示，保存圖片到相冊

drawImage()方法負(fù)責(zé)繪制展示，saveCard()方法負(fù)責(zé)下載圖片到相冊

src/pages/index/index.js

import Taro, { Component } from '@tarojs/taro'
// 引入對(duì)應(yīng)的組件
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: '獲取用戶信息失敗，請(qǐng)授權(quán)',
  icon: 'none'
  })
  return
 }
 this.setState({
  isShowCanvas: true,
  userInfo: e.detail.userInfo
 }, () => {
  // 調(diào)用繪制圖片方法
  this.drawImage()
 })
 }

 /**
 * drawImage() 定義繪制圖片的方法
 */
 async drawImage () {
 // 創(chuàng)建canvas對(duì)象
 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('已在胡哥有話說公眾號(hào)打卡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)

 // 將以上繪畫操作進(jìn)行渲染
 ctx.draw()
 }

 /**
 * saveCard() 保存圖片到本地
 */
 async saveCard () {
 // 將Canvas圖片內(nèi)容導(dǎo)出指定大小的圖片
 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: '圖片成功保存到相冊了，快去發(fā)朋友圈吧~',
  showCancel: false,
  confirmText: '確認(rèn)'
  })
 } else {
  Taro.showModal({
  title: '圖片保存失敗',
  content: '請(qǐng)重新嘗試!',
  showCancel: false,
  confirmText: '確認(rèn)'
  })
 }
 }

 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;
 }
}

注意事項(xiàng)

設(shè)置Taro支持ES6的async/await

1.下載@tarojs/async-await

npm install -D @tarojs/async-await

2.app.js中引入

import '@tarojs/async-await'

開發(fā)完畢，發(fā)布小程序

1.執(zhí)行打包，生成最終的小程序源碼

npm run build:weapp

2.發(fā)布小程序

點(diǎn)擊微信開發(fā)者工具上傳按鈕，上傳小程序，然后在微信小程序平臺(tái)發(fā)布小程序即可。

小結(jié)

本文著重介紹了使用Taro實(shí)現(xiàn)小程序生成打卡圖片，保存相冊，分享圖片功能的開發(fā)原理與實(shí)踐步驟，各位童鞋可參考并結(jié)合自己的實(shí)際業(yè)務(wù)進(jìn)行擴(kuò)展開發(fā)。

本文并為深入的對(duì)不同手機(jī)進(jìn)行圖片適配，部分值也是設(shè)置的固定值（如填充文字的開始坐標(biāo)與填充的文字長度、大小），并未做比例響應(yīng)。需要進(jìn)一步交流的小伙伴，可以關(guān)注胡哥有話說公眾號(hào)，持續(xù)關(guān)注相關(guān)文章，也可直接在文章留言交流。

無論是使用何種框架如Taro、mpvue、wepy等開發(fā)小程序分享圖片功能，原理都是一樣的，只不過是在調(diào)用方法以及處理邏輯時(shí)需要進(jìn)行響應(yīng)的小調(diào)整

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: