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

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

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

效果图

代码概览
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为最终生成效果图，微信识别二维码就可定位到具体业务页~