前言
在各種小程序(微信、百度、支付寶)、H5、NativeApp 紛紛擾擾的當(dāng)下，給大家強(qiáng)烈安利一款基于React的多終端開(kāi)發(fā)利器：京東Taro（泰羅·奧特曼），Taro致力于多終端統(tǒng)一解決方案，一處代碼，多處運(yùn)行。
Taro支持以React語(yǔ)言開(kāi)發(fā)小程序，支持CSS預(yù)處理器，支持實(shí)時(shí)編譯更新，支持NPM，等等等等，簡(jiǎn)直不要太爽！
微信小程序分享圖片功能是經(jīng)常在小程序業(yè)務(wù)中出現(xiàn)的，比如學(xué)習(xí)打卡分享，推廣會(huì)員分享，推廣商品分享等等。因?yàn)樾〕绦蚴遣恢С种苯臃窒韴D片到朋友圈的，一般操作為：
今天胡哥給大家分享下，基于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)目，開(kāi)啟Dev模式，生成小程序 -- dist目錄
npm run dev:weapp
4. 微信開(kāi)發(fā)者工具，創(chuàng)建小程序，選擇項(xiàng)目根目錄為taro-img-share下的dist目錄
二、小程序分享圖片功能實(shí)踐 --- 打卡圖片分享功能
先上圖，再說(shuō)話
效果圖
點(diǎn)擊保存到相冊(cè)
這是重點(diǎn)：使用Canvas繪制圖片并展示，保存圖片到相冊(cè)
drawImage()方法負(fù)責(zé)繪制展示，saveCard()方法負(fù)責(zé)下載圖片到相冊(cè)
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: '首頁(yè)' } /** * 初始化信息 */ 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('已在胡哥有話說(shuō)公眾號(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: '圖片成功保存到相冊(cè)了，快去發(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">保存到相冊(cè)</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'
開(kāi)發(fā)完畢，發(fā)布小程序
1.執(zhí)行打包，生成最終的小程序源碼
npm run build:weapp
2.發(fā)布小程序
點(diǎn)擊微信開(kāi)發(fā)者工具上傳按鈕，上傳小程序，然后在微信小程序平臺(tái)發(fā)布小程序即可。
小結(jié)
本文著重介紹了使用Taro實(shí)現(xiàn)小程序生成打卡圖片，保存相冊(cè)，分享圖片功能的開(kāi)發(fā)原理與實(shí)踐步驟，各位童鞋可參考并結(jié)合自己的實(shí)際業(yè)務(wù)進(jìn)行擴(kuò)展開(kāi)發(fā)。
本文并為深入的對(duì)不同手機(jī)進(jìn)行圖片適配，部分值也是設(shè)置的固定值（如填充文字的開(kāi)始坐標(biāo)與填充的文字長(zhǎng)度、大小），并未做比例響應(yīng)。需要進(jìn)一步交流的小伙伴，可以關(guān)注胡哥有話說(shuō)公眾號(hào)，持續(xù)關(guān)注相關(guān)文章，也可直接在文章留言交流。
無(wú)論是使用何種框架如Taro、mpvue、wepy等開(kāi)發(fā)小程序分享圖片功能，原理都是一樣的，只不過(guò)是在調(diào)用方法以及處理邏輯時(shí)需要進(jìn)行響應(yīng)的小調(diào)整
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
