微信小程序基于Taro的分享图片功能实践详解


Posted in Javascript onJuly 12, 2019

前言

在各种小程序(微信、百度、支付宝)、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目录

二、小程序分享图片功能实践 --- 打卡图片分享功能

先上图,再说话

微信小程序基于Taro的分享图片功能实践详解

效果图

微信小程序基于Taro的分享图片功能实践详解

点击保存到相册

这是重点:使用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

1.下载@tarojs/async-await

npm install -D @tarojs/async-await

2.app.js中引入

import '@tarojs/async-await'

开发完毕,发布小程序

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

npm run build:weapp

2.发布小程序

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

小结

本文着重介绍了使用Taro实现小程序生成打卡图片,保存相册,分享图片功能的开发原理与实践步骤,各位童鞋可参考并结合自己的实际业务进行扩展开发。

本文并为深入的对不同手机进行图片适配,部分值也是设置的固定值(如填充文字的开始坐标与填充的文字长度、大小),并未做比例响应。需要进一步交流的小伙伴,可以关注胡哥有话说公众号,持续关注相关文章,也可直接在文章留言交流。

无论是使用何种框架如Taro、mpvue、wepy等开发小程序分享图片功能,原理都是一样的,只不过是在调用方法以及处理逻辑时需要进行响应的小调整

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery动画animate方法使用介绍
May 06 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
小程序实现悬浮搜索框
Jul 12 #Javascript
小程序实现搜索框功能
Mar 26 #Javascript
iview的table组件自带的过滤器实现
Jul 12 #Javascript
es6中比较有用的7个技巧小结
Jul 12 #Javascript
echarts大屏字体自适应的方法步骤
Jul 12 #Javascript
javascript实现简易聊天室
Jul 12 #Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 #Javascript
You might like
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
php判断目录存在的简单方法
2019/09/26 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python多线程原理与用法详解
2018/08/20 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
出国英文推荐信
2014/05/10 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
致运动员的广播稿
2015/08/19 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Vue监视数据的原理详解
2022/02/24 Vue.js