微信开发之如何实现分享功能

这篇文章将为大家详细讲解有关微信开发之如何实现分享功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

通过对需求的了解，可以将其分解为：

（1）微信端手机用户，可以使用微信的JSSDK。

（2）选取图片，使用JSSDK的"chooseImage"，由于分享图片时本地地址无法分享，因此还需要JSSDK的"uploadImage"。

（3）分享到朋友圈，需要JSSDK的"onMenuShareTimeline"。

综合起来，业务逻辑如图4.5所示。

图4.5 业务逻辑结构图

首先将JSSDK的环境复制一份到本节目录下，创建index.html文件、imageSharing.js文件，目录结构如图4.6所示。

图4.6 4.2节目录结构

修改一下JSSDK环境的配置文件，代码如下：

01     jsApiList: [ // 必填，需要使用的JS接口列表，所有JS接口列表见附录B02          "chooseImage",03          "previewImage",04          "uploadImage",05          "onMenuShareTimeline"06      ]07      //其他代码略

依据需求，构建一个"id"等于"chooseImage"的点击按钮，以及点击按钮后，用来显示选中图片的容器，在index.html文件中增加如下代码：

01     02      03      04              05          07          08          09          10          11          12          13          14          15          16          17          18          32      33      34          
:)
35          实例：从手机相册中选照片然后分享，支持选择1张图片！36      

37          
38          
没有自定义分享图片
39          

40      41      

在imageSharing.js文件中增加处理业务的代码如下：

01   /*02       函数名称：wxJSSDK.shareApi03       函数功能：为wxJSSDK增加分享模块04       参数：05       shareList（Array） 必选项，待分享的API配置表06       */07      wxJSSDK.shareApi = function(shareList){08          if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕09      10              //获取"分享到朋友圈"按钮点击状态及自定义分享内容接口11              if(shareList.onMenuShareTimeline){12                  var ParametersTimeline = shareList.onMenuShareTimeline;13                  wx.onMenuShareTimeline({14                      title: ParametersTimeline.title,              // 分享标题15                      link: ParametersTimeline.link,             // 分享链接16                      imgUrl: ParametersTimeline.imgUrl,    // 分享图标17                      success: function () {18                          // 用户确认分享后执行的回调函数19                          ParametersTimeline.success && ParametersTimeline.success();20                      },21                      cancel: function () {22                          // 用户取消分享后执行的回调函数23                          ParametersTimeline.cancel && ParametersTimeline.cancel();24                      }25                  });26              }27      28          }else{29              console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用分享服务。");30          }31      }32      /*33       函数名称：wxJSSDK.imageApi34       函数功能：为wxJSSDK增加图像服务35       参数：36       imageApi 图像API Object 配置37       */38      wxJSSDK.imageApi = function(imageApi){39          if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕40              if(imageApi){41      42                  imageApi.chooseImage && wx.chooseImage({//拍照或从手机相册中选图接口43                      success: function (res) {44                          imageApi.chooseImage.success && 45      imageApi.chooseImage.success(res);46                      }47                  });48      49                  imageApi.previewImage && wx.previewImage({    // 预览图片接口50                      current: imageApi.previewImage.current,       // 当前显示的图片链接51                      urls: imageApi.previewImage.urls                      // 需要预览的图片链接列表52                  });53      54                  imageApi.uploadImage && wx.uploadImage({      // 上传图片接口55                      localId: imageApi.uploadImage.localId,                // 需要上传的图片的本地ID，56      由chooseImage接口获得57                      isShowProgressTips: imageApi.uploadImage.isShowProgressTips || 1, // 58      默认为1，显示进度提示59                      success: function (res) {60                          imageApi.uploadImage.success && 61      imageApi.uploadImage.success(res);62                      }63                  });64      65                  imageApi.downloadImage && wx.downloadImage({//下载图片接口66                      serverId:imageApi.downloadImage.serverId, // 需要下载的图片的服务器端67      ID，由uploadImage接口获得68                      isShowProgressTips: imageApi.downloadImage.isShowProgressTips || 1, // 69      默认为1，显示进度提示70                      success: function (res) {71                          imageApi.downloadImage.success && 72      imageApi.downloadImage.success(res);73                      }74                  });75              }else{76                  console.log("缺少配置参数");77              }78          }else{79              console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用图像接口服80      务。");81          }82      83      }84      85      _window.onload = function(){86          var chooseImageID, // 拍照或从手机相册中选图接口87              shareImage,88              uploadImage = function(back){89                  wxJSSDK.imageApi({      // 上传图片···90                      uploadImage:{91                          localId:chooseImageID.toString(),92                          success:function(res){//临时access_token，上传图片成功之后，执行分93      享操作94                         shareImage = 95      "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=96      eQv3HPwEFxwsw8cyh6O7DjaNOoGd4d-jYtG_c9uW-YbwUYxkMywh_O3LCC97      ZtmX8ZWr8np0Q5CqAox7lghNkNuiNHU8M618jbRvcaLjQuHq8&media_id="+res.serverId; // 返回图片的服务器端ID98                              back && back();99                          }100                     }101                 });102             },103             shareTimeline = function(){104                 uploadImage(function(){105                     wxJSSDK.shareApi({                                      // 分享图片···106                         onMenuShareTimeline : {                       // 分享到朋友圈107                             title: "实例：从手机相册中选照片然后分享！", // 分享标题108                             link: 'http://weibo.com/xixinliang',  // 分享链接109                             imgUrl: shareImage,                   // 分享图标110                             success: function () {111     112                             },113                             cancel: function () {114     115                             }116                         }117                     });118                 });119             };120         $("#chooseImage").click(function(){121             wxJSSDK.imageApi({22                  chooseImage:{23                      success:function(res){24                          chooseImageID =  res.localIds[0]; // 返回选定照片的本地ID列表，25      localId可以作为img标签的src属性显示图片26                          $("#imageContainer").html("");28                          $("#selectImg").html("已选择图片，请点击右上角分享到朋友圈按钮");29                          shareTimeline();30                      }31                  }32              });33          });34      }

【代码解释】

• 在index.html中，创建了一个分享自定义图片的按钮，如图4.7所示。

• 点击分享按钮，调用JSSDK的选择图片API，让用户选中图片，如图4.8所示。

图4.7 自定义分享图片UI

图4.8 选择图片之后的UI

• 之后，调用"uploadImage"上传图片。

• 上传成功之后，返回上传之后的服务端"serverId"，再调用下载多媒体的API，将图片赋值给JSSDK的分享API"onMenuShareTimeline"。

用户可以查看分享效果，如图4.9和图4.10所示。

图4.9 分享到朋友圈编辑的UI

图4.10 成功分享自定义图片到朋友圈

关于"微信开发之如何实现分享功能"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。