小程序模板网

【微信小程序】分享朋友圈组件开发实践

2020-05-15 郢中质

背景
在一个完整带用户交互的小程序项目开发中,总会遇到分享这个功能,转发给好友用通用的api方法,分享朋友圈总是有各种各样的招式,一般的交互方案是生成一个带二维码的图,二维码有时候也分带参数和默认的。分享一个前段时间开发的生成分享图的功能,我当时的业务二维码是带参数的,为了识别能定位到固定产品页(生成带参数二维码是用微信云调用提供的方法处理,点此看帖

分享图用canvas画布开发,所以对wx封装的canvas相关api要有一定了解

开发步骤
新建一个share组件文件包,并开发业务逻辑和样式编写含小程序规范的几个文件js/wxml/wxss/json
开发代码,在需要引用页面的对应配置文件中加入组件配置
在引用的wxml中加入组件代码和传参,js文件写参数的交互


效果图

【微信小程序】分享朋友圈组件开发实践(图1)

代码概览
1.share / share.wxml 【参考效果图 步骤2/3

备注:
1.第一模块 步骤2的分享引导层,点击分享票圈,出来第二模块弹框
2.第二模块 步骤3效果图,share-load.gif是一个加载中动画的gif;close.png是关闭图标

 

  1. <!--分享弹窗-->
  2. <view class="share-wrap" bindtap="toClose">
  3. <!-- 分享的引导层 分 转发票圈或好友 -->
  4. <view class="share-mod" catchtap="doNothing">
  5. <view class="share-hd">
  6. <text class="fl">分享</text>
  7. <image class="share-close" catchtap="toClose" src="../../images/icons/close.png"></image>
  8. </view>
  9. <view class="share-guide">
  10. <view class="share-wx">
  11. <button class="share-btn" open-type="share"></button>
  12. <image src="../../images/icons/wx_friend.png"></image>
  13. <text>分享给好友</text>
  14. </view>
  15. <view class="share-line"></view>
  16. <view class="share-wx" catchtap="toShowShareImg">
  17. <image src="../../images/icons/wx_quan.png"></image>
  18. <text>生成分享海报</text>
  19. </view>
  20. </view>
  21. </view>
  22. <!-- 点击引导层的 转发票圈 触发的生成画布图弹层 -->
  23. <view class="share-mod" hidden="{{!showShareImg}}" catchtap="doNothing">
  24. <view class="share-hd">
  25. <text class="fl">保存到相册</text>
  26. <image class="share-close" catchtap="toCloseShareImg" src="../../images/icons/close.png"></image>
  27. </view>
  28. <view class="share-quan">
  29. <image wx:if="{{imgSrc!=''}}" class="share-img" src="{{imgSrc}}"></image>
  30. <view wx:else>
  31. <image class="share-img-load" src="../../images/icons/share-load.gif"></image>
  32. <text class="share-load-text">{{loadText}}</text>
  33. </view>
  34. <view class="save-btn" catchtap="saveImg">保存图片</view>
  35. <view class="save-tip">保存图片到手机相册后,就可以分享至您的圈子啦</view>
  36. </view>
  37. </view>
  38. </view>

2.share/ share.json

 

  1. {
  2. "component": true
  3. }

3.share/ share.js

 

  1. /* 使用说明↓↓↓
  2. 1.需要引用的页面json配置文件新增如下配置项
  3. "usingComponents": {
  4. "share-win": "/component/share/share"
  5. }
  6.  
  7. 2.页面wxml文件使用如下 shareInfo格式说明见下文 该组件是否渲染根据该对象是否有具体数据
  8. <canvas canvas-id="shareCanvas" style="position:fixed;top:0;left:999rpx;width:1000px;height:750px;"></canvas>
  9. <share-win share-info="{{shareInfo}}" bindcloseshare="closeShareWin"></share-win>
  10.  
  11. 3.页面对应js需要定义一个closeshare事件[由组件里的toClose触发] 内部主要是将shareInfo参数置空
  12.  
  13. 4.shareInfo格式
  14.  
  15. */
  16.  
  17. Component({
  18. properties: {
  19. shareInfo: {
  20. type: Object,
  21. value: {},
  22. }
  23. },
  24. data: {
  25. imgSrc:'',
  26. showShareImg:false,
  27. hasDownload:false,
  28. loadText:'分享图绘制准备中...'
  29. },
  30. ready:function(){
  31.  
  32. },
  33. methods: {
  34. //点击浮层区域关闭弹窗
  35. toClose:function(){
  36. this.toCloseShareImg();
  37. this.triggerEvent("closeshare")
  38. },
  39. toCloseShareImg:function(){
  40. this.setData({
  41. showShareImg:false
  42. })
  43. if(this.data.hasDownload){
  44. this.triggerEvent("closeshare")
  45. }
  46. },
  47. toShowShareImg:function(){
  48. this.setData({
  49. showShareImg:true
  50. })
  51. this.renderShareImg();
  52. },
  53. doNothing:function(){
  54. return false;
  55. },
  56. setLoadText:function(txt){
  57. this.setData({
  58. loadText:txt
  59. })
  60. },
  61. //渲染分享图
  62. renderShareImg:function(){
  63. //1000x750
  64. const _this = this;
  65. const _obj = _this.data.shareInfo;
  66.  
  67. //默认题图
  68. let promise1 = new Promise(function (resolve, reject) {
  69. if(_obj.cover==undefined || _obj.cover==''){
  70. _obj.cover = '../../images/share_default.jpg'
  71. resolve({path:_obj.cover});
  72. }else{
  73. _obj.cover = "https://"+_obj.cover.split('//')[1]
  74. wx.getImageInfo({
  75. src: _obj.cover,
  76. success: function (res) {
  77. resolve(res);
  78. }, fail: function (error) {
  79. console.log(error);
  80.  
  81. _obj.cover = '../../images/share_default.jpg'
  82. resolve({path:_obj.cover});
  83. }
  84. })
  85. }
  86. });
  87.  
  88. //小程序码
  89. let promise2 = new Promise(function (resolve, reject) {
  90. wx.cloud.callFunction({
  91. name: 'openapi',
  92. data: {
  93. action:'getWXACodeUnlimit',
  94. page: 'pages/detail/detail',
  95. width: 220,
  96. scene: _obj.id+"_"+_obj.goodsId,
  97. },
  98. success: res => {
  99. wx.getImageInfo({
  100. src: res.result[0].tempFileURL,
  101. success: function (suc) {
  102. resolve(suc);
  103. }, fail: function (error) {
  104. resolve({path:"../../images/qrcode.jpg"})
  105. console.log(error)
  106. }
  107. })
  108. },
  109. fail: error => {
  110. console.log(JSON.stringify(error))
  111. resolve({path:"../../images/qrcode.jpg"})
  112. }
  113. });
  114. });
  115.  
  116.  
  117. //加载所有完图片后绘制画布
  118. Promise.all(
  119. [promise1,promise2]
  120. ).then(res => {
  121. //绘制头图的圆角效果
  122. const ctx = wx.createCanvasContext('shareCanvas')
  123. ctx.setFillStyle('#ffffff');
  124. ctx.fillRect(0, 0, 750, 1125);
  125.  
  126. //绘制题图
  127. _this.setLoadText("绘制商品图...")
  128. ctx.drawImage(res[0].path, 25, 25, 700, 700)
  129.  
  130. // ...删除了部分 绘制逻辑代码...
  131.  
  132. //绘制小程序码
  133. _this.setLoadText("绘制小程序码...")
  134. ctx.drawImage(res[1].path, 35, 874, 228, 228);
  135.  
  136.  
  137. //画布绘制完成转图片,将地址赋值给图片
  138. _this.setLoadText("分享图生成中...")
  139. ctx.draw();
  140.  
  141. setTimeout(function () {
  142. wx.canvasToTempFilePath({
  143. width: 750,
  144. height: 1125,
  145. destWidth: 750,
  146. destHeight: 1125,
  147. quality: 1,
  148. canvasId: 'shareCanvas',
  149. success: function (res) {
  150. // console.log("canvasToTempFilePath success:"+res.tempFilePath);
  151. wx.hideLoading({})
  152. _this.setData({
  153. imgSrc: res.tempFilePath,
  154. shareShow: true
  155. })
  156. },
  157. fail: function (res) {
  158. }
  159. })
  160. }, 200)
  161. })
  162. },
  163. //保存图片
  164. saveImg:function(){
  165. //下载文件
  166. const _this = this;
  167. if(_this.data.imgSrc==''){
  168. wx.showToast({
  169. title:"分享图还在生成中...",
  170. icon: 'none',
  171. duration:3000
  172. })
  173. return false;
  174. }
  175. wx.saveImageToPhotosAlbum({
  176. filePath: _this.data.imgSrc,
  177. success(res) {
  178. wx.showToast({
  179. title:"已保存至相册,可以分享啦",
  180. icon: 'none',
  181. duration:3000
  182. })
  183. _this.setData({
  184. hasDownload:true
  185. })
  186. }
  187. })
  188. },
  189. //图片按比例居中裁剪
  190. calClipImg(oW,oH,mW,mH){
  191. var oR = parseFloat(oW/oH).toFixed(5);
  192. var mR = parseFloat(mW/mH).toFixed(5);
  193. if(oR == mR){
  194. return [0,0,oW,oH]
  195. }else if(oR > mR){
  196. var ratio = parseFloat(mH/oH).toFixed(5);
  197. return [((oW*ratio-mW)/2)/ratio,0,mW/ratio,mH/ratio];
  198. }else{
  199. var ratio = mW/oW;
  200. return [0,((oH*ratio-mH)/2)/ratio,mW/ratio,mH/ratio];
  201. }
  202. },
  203. //绘制圆角
  204. roundRect(x, y, w, h, r,ctx){
  205. var min_size = Math.min(w, h);
  206. if (r > min_size / 2) r = min_size / 2;
  207. // 开始绘制
  208. ctx.beginPath();
  209. ctx.moveTo(x + r, y);
  210. ctx.arcTo(x + w, y, x + w, y + h, r);
  211. ctx.arcTo(x + w, y + h, x, y + h, r);
  212. ctx.arcTo(x, y + h, x, y, r);
  213. ctx.arcTo(x, y, x + w, y, r);
  214. ctx.closePath();
  215. },
  216. //绘制文本方法
  217. drawText(str,ctx,initX,initY,lineHeight,minusW,maxLine){
  218. var curLine = 1;
  219. var lineWidth = 0;
  220. var canvasWidth = 750;
  221. var lastSubStrIndex= 0;
  222. var d = 0;
  223. for(var i=0;i<str.length;i++){
  224. lineWidth += ctx.measureText(str[i]).width;
  225. //判断当前文字行是否超过一行 [减minusW,防止边界溢出]
  226. if((d==0 && lineWidth>canvasWidth-minusW)||(d>0 && ((lineWidth>=canvasWidth-minusW) || ((lineWidth+ctx.measureText(str[i+1]).width)>canvasWidth-minusW)))){
  227. d++;
  228. ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
  229. initY+=lineHeight;
  230. lineWidth=0;
  231. lastSubStrIndex=i;
  232. curLine = curLine+1;
  233. if(maxLine!=-1 && curLine>maxLine)break; //最多绘制六行
  234. }
  235. //最后一个字的时候 绘制一行
  236. if(i==str.length-1){
  237. ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
  238. }
  239. }
  240. }
  241. }
  242. })

4.share.wxss

 

  1. .share-wrap{
  2. position:fixed;
  3. top:0;
  4. width:750rpx;
  5. height:100%;
  6. background:rgba(0,0,0,.4);
  7. overflow: hidden;
  8. z-index:1001;
  9. }
  10.  
  11. .share-mod{
  12. position:fixed;
  13. bottom:0;
  14. width:100%;
  15. background:#fff;
  16. z-index:1001;
  17. overflow: hidden;
  18. }
  19.  
  20. .share-mod .share-hd{
  21. padding-left:20rpx;
  22. height:80rpx;
  23. line-height:80rpx;
  24. background:#efefef;
  25. color:#666;
  26. font-size:32rpx;
  27. }
  28.  
  29. .share-mod .share-close{
  30. float:right;
  31. margin:15rpx 20rpx;
  32. height:50rpx;
  33. width:50rpx;
  34. }
  35.  
  36. .share-guide{
  37. padding:35rpx;
  38. width:680rpx;
  39. height:180rpx;
  40. }
  41.  
  42. .share-guide .share-wx,
  43. .share-guide .share-line{
  44. float:left;
  45. }
  46. .share-guide .share-line{
  47. margin-top:60rpx;
  48. height:160rpx;
  49. width:1rpx;
  50. color:#cdcdcd;
  51. }
  52. .share-guide .share-wx{
  53. width:339rpx;
  54. height:180rpx;
  55. text-align:center;
  56. font-size:24rpx;
  57. }
  58. .share-guide .share-wx image{
  59. display: block;
  60. margin:20rpx auto;
  61. padding:10rpx;
  62. width:64rpx;
  63. height:64rpx;
  64. border-radius:43rpx;
  65. border:1rpx solid #dedede;
  66. }
  67. .share-guide .share-btn{
  68. position: absolute;
  69. margin:0;
  70. padding:0;
  71. bottom:40rpx;
  72. left:35rpx;
  73. width:340rpx;
  74. height:180rpx;
  75. background:none;
  76. }
  77. .share-guide .share-btn:after{
  78. border:none;
  79. }
  80. .share-quan{
  81. margin:20rpx;
  82. overflow: hidden;
  83. }
  84. .share-quan .share-img{
  85. display:block;
  86. margin:10rpx auto 28rpx;
  87. height:600rpx;
  88. width:400rpx;
  89. border-radius:8rpx;
  90. box-shadow:0 0 10rpx #cdcdcd;
  91. }
  92. .share-quan .share-img-load{
  93. display:block;
  94. margin:260rpx auto 20rpx;
  95. height:80rpx;
  96. width:80rpx;
  97. }
  98. .share-quan .share-load-text{
  99. margin:0 auto 220rpx;
  100. display:block;
  101. widows:100%;
  102. text-align:center;
  103. font-size:28rpx;
  104. color:#b7b7b7;
  105. }
  106. .share-quan .save-btn{
  107. width:710rpx;
  108. height:80rpx;
  109. line-height:80rpx;
  110. color:#fff;
  111. text-align:center;
  112. letter-spacing:4rpx;
  113. background-color:#e2633f;
  114. border-radius:6rpx;
  115. font-size:34rpx;
  116. }
  117. .share-quan .save-tip{
  118. margin:18rpx;
  119. text-align:center;
  120. font-size:24rpx;
  121. }

↓组件开发已经完成,接下去是组件的使用↓

1.demo.json 备注:usingComponents加入对应组件配置即可

 

  1. {
  2. "navigationBarBackgroundColor": "#ffffff",
  3. "navigationBarTextStyle": "black",
  4. "navigationBarTitleText": "xxx",
  5. "usingComponents": {
  6. "share-win": "/component/share/share"
  7. }
  8. }

2.demo.wxml 备注:点击分享按钮的时候 showShareWin值改变,shareInfo根据渲染需求赋值

 

  1. <view>
  2. <!-- S 其他业务代码 -->
  3. <!-- E 其他业务代码 -->
  4.  
  5. <!-- 分享 -->
  6. <canvas canvas-id="shareCanvas" style="position:fixed;top:0;left:999rpx;width:750px;height:1125px;"></canvas>
  7. <share-win wx:if="{{showShareWin}}" share-info="{{shareInfo}}" bindcloseshare="closeShareWin"></share-win>
  8.  
  9. </view>

3.demo.js 备注:删除了其他业务代码,仅剩和分享的交互,便于阅读。shareInfo数据在load时就塞进去了,下面没有放出来~

 

  1. Page({
  2. data: {
  3. showTop:false
  4. },
  5. //点击右侧悬浮的分享按钮
  6. doShare:function(){
  7. this.setData({
  8. showShareWin:true
  9. })
  10. },
  11. //触发关闭分享弹框
  12. closeShareWin:function(){
  13. this.setData({
  14. showShareWin:false
  15. })
  16. },
  17. })

其他说明: 步骤4为最终生成效果图,微信识别二维码就可定位到具体业务页~

 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/25192.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询