共计 4114 个字符,预计需要花费 11 分钟才能阅读完成。
前言
在各种小程序(微信、百度、支付宝)、H5、NativeApp 纷纷扰扰的当下,给大家强烈安利一款基于 React 的多终端开发利器:京东 Taro(泰罗·奥特曼),Taro 致力于多终端统一解决方案,一处代码,多处运行。
Taro 支持以 React 语言开发小程序,支持 CSS 预处理器,支持实时编译更新,支持 NPM,等等等等,简直不要太爽!
微信小程序分享图片功能是经常在小程序业务中出现的,比如学习打卡分享,推广会员分享,推广商品分享等等。因为小程序是不支持直接分享图片到朋友圈的,一般操作为:
- 生成包含小程序码(当前也可以是其他特定的信息)的图片;
- 用户点击保存图片,下载到本地,再发布到朋友圈;
- 其他用户长按识别该小程序码,进入当前小程序。
今天胡哥给大家分享下,基于 Taro 框架实现微信小程序分享图片功能的实践。
一、搭建 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 目录
二、小程序分享图片功能实践 — 打卡图片分享功能
先上图,再说话
这是重点:使用 Canvas 绘制图片并展示,保存图片到相册
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 即可,会收到项目源码地址
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得 收藏
、 转发
、点击右下角按钮 在看
,推荐给更多小伙伴呦,欢迎多多留言交流 …
胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!
长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!
正文完