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

前言

在各种小程序(微信、百度、支付宝)、H5、NativeApp纷扰的当下，我们强烈给安利一个基于React: Taro(机动奥特曼)的多终端开发工具。Taro)在JD.COM，致力于多终端统一解决方案，一码多操作。

Taro支持用React语言开发小程序，CSS预处理器，实时编译更新，NPM等。不太酷！

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

生成包含小程序代码的图片(目前也可以是其他具体信息)；用户点击保存图片，本地下载，然后发布到朋友圈；其他用户按下并识别小程序代码，进入当前小程序。今天胡哥就和大家分享一下基于Taro框架在微信小程序中分享图片的做法。

首先，构建一个Taro项目框架，创建一个微信小程序

1.安装芋头脚手架工具

Npm install -g @tarojs/cli2。初始化taro项目

Taro init taro-img-share3。编译项目，打开开发模式，并生成applet - dist目录

Npm运行dev:weapp4。微信开发者工具，创建一个小程序，选择taro-img-share下的dist目录作为项目的根目录

二、小程序分享图片功能练习——打卡图片分享功能

先拍照，再说话

翻译

单击保存到相册

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

drawImage()方法负责绘制演示文稿，saveCard()方法负责将图片下载到相册

src/page/index/index . js

从“@ Taro js/Taro”//导入芋头，{组件}引入对应的组件从" @tarojs/components "导入{视图、文本、按钮、画布}"导入"。/index.scss的导出默认类指数扩展了组件{ config={ navigationbartitletext : }首页' } /** * 初始化信息*/constructor () { this.state={ //用户信息userInfo: {}，//是否展示canvas为show canvas : false } }/* * * getUserInfo()获取用户信息*/getUserInfo (e) { if(！细节。UserInfo){ Taro。showToast({ title : '获取用户信息失败，请授权，icon: 'none' })返回}这个。setstate({ isshocanvas : true，userinfo : e . detail。userinfo }，()={ //调用绘制图片方法这个。绘制图像()})}/* * *绘制图像()定义绘制图片的方法*/async drawImage () { //创建帆布对象让CTX=芋头。createcanvascontext('卡片画布')//填充背景色让grd=CTX。createrlinegradient(0，0，1，500) grd.addColorStop(0 '，#1452d0') grd.addColorStop(0.5 '，# FFF ')CTX。CTX。填充矩形(0，0，400，500) ///绘制圆形用户头像让{ userInfo }=this.state让RES=等待芋头。下载文件({ URL : UserInfo。头像网址})CTX。拯救()CTX。Begin path()//CTX。arc(160，86，66，0，数学.PI * 2，假)ctx.arc(160，88，66，0，数学* 2)CTX。CTX。剪辑()CTX。中风(CTX)。翻译(160，88)CTX。绘制图像(RES . tempfilepath，-66，-66，132，132) ctx.restore() //绘制文字ctx.save()已在胡哥有话说公众号打卡20天，50，240) ctx.restore() //绘制二维码让二维码=等等太郎。下载文件({ URL : ' https://上传-图像。金苏。io/upload _ images/3091895-f0b4b 900390 AEC 73。巴布亚新几内亚？imagemog R2/自动定向/条状| imageView2/2/w/258/format/webp。)CTX。绘制图像(二维码。tempfilepath，70，260，180，180) //将以上绘画操作进行渲染ctx.draw() } /** * saveCard()保存图片到本地*/async saveCard () { //将帆布图片内容导出指定大小的图片让RES=等待芋头。canvastenpfilepath({ x : 0，y: 0，宽度： 400，高度： 500，设计宽度： 360，设计高度： 450，canvasId: 'cardCanvas '，文件类型： 'png' })让saveRes=等待taro。savimagetoftopsolum({ file path 3360 RES . tempfile path })图片保存成功，content: '图片成功保存到相册了，快去发朋友圈吧~ '，showCancel: false，confirmText: '确认})} else { taro。显示模式({ title : '图片保存失败，content: '请重新尝试!'，showCancel: false，confirmText: '确认})} } render(){ let { is show canvas }=this。状态返回(视图类名=' index ' Button on etuserinfo={ this。getUserInfo } openType=' getUserInfo ' type=' primary ' size=' mini '打卡/Button {/*使用帆布绘制分享图片*/} { isshow Canvas View类名=' Canvas-wrap ' Canvas id=' card-Canvas ' card-Canvas ' style=' width : 320 px；高度： 450 px ' canvasId=' card Canvas '/Canvas Button onClick={ this。save card }类名=' BTN-save ' type=' primary ' size=' mini '保存到相册/Button/View }/View)} } src/pages/index/index。厚颜无耻

index.js组件中的钢性铸铁样式。索引{ display : flex align-items :居中；正义-内容：中心；高度： 100%;}.帆布包装{宽度： 100%;高度： 100%;background: rgba(0，0，0，0.3)；位置：固定；top : 0；左： 0；display : flex align-items :居中；正义-内容：中心；弯曲方向：柱；BTN-储蓄{保证金-最高： 40 rpx}}注意事项

设置芋支持ES6的异步/等待

1.下载@ tarojs/async-等待

NPM安装-D @ tarojs/异步-等待2。app。射流研究…中引入

导入" @ tarojs/async-wait "开发完毕，发布小程序

1.执行打包，生成最终的小程序源码

新公共管理运行建筑build:weapp2 .发布小程序

点击微信开发者工具的上传按钮，上传小程序，然后在微信小程序平台发布小程序。

摘要

重点介绍了利用Taro实现生成打卡图片、保存相册、分享图片等功能的开发原理和实际步骤。童鞋可以参照自己的实际业务进行拓展和发展。

本文针对不同手机做了深入的图片适配，有些值也是设置固定值(比如填充文字的起始坐标和填充文字的长度大小)，不按比例响应。需要进一步交流的小伙伴可以关注胡歌说的微信官方账号，持续关注相关文章，也可以在文章中直接交换消息。

不管用什么样的框架，比如Taro，mpvue，wepy等。原理是一样的，但只是调用方法和处理逻辑时需要响应的一个小调整

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。