微信开发之如何实现分享功能
导读：本文共4891字符，通常情况下阅读需要16分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 通过对需求的了解，可以将其分解为：（1）微信端手机用户，可以使用微信的JSSDK。（2）选取图片，使用JSSDK的“chooseImage”，由于分享图片时本地地址无法分享，因此还需要JSSDK的“uploadImage”。（3）分享到朋友圈... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。通过对需求的了解，可以将其分解为：
（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 <!DOCTYPEhtml>02 <htmllang="en">03 <head>04 <metacharset="UTF-8">05 <metaname="viewport"content="width=device-width,initial-scale=1.0,06 minimum-scale=1,maximum-scale=1.0,user-scalable=no">07 <title>第4章4.2节-实例：从手机相册中选照片然后分享</title>08 <!--依赖文件：jQuery-->09 <scriptsrc="./js/jquery-1.11.2.min.js?1.1.10"></script>10 <!--依赖文件：微信的JSSDK源文件-->11 <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?1.1.10"></script>12 <!--依赖文件：coolie-->13 <scriptsrc="./js/cookie.js?1.1.10"></script>14 <!--JSSDK的环境-->15 <scriptsrc="./js/wxJSSDK.js?1.1.10"></script>16 <!--引入检测API的图像服务-->17 <scriptsrc="imageSharing.js?1.1.10"></script>18 <style>19 input{20 width:100%;21 padding:0.2em;22 background-color:#5eb95e;23 font-size:1.4em;24 background-image:linear-gradient(tobottom,#62c462,#57a957);25 background-repeat:repeat-x;26 color:#ffffff;27 text-align:center;28 text-shadow:0-1px0rgba(0,0,0,0.25);29 border-radius:0.3em;30 }31 </style>32 </head>33 <body>34 <h2style="font-size:8em">:)</h2>35 <bstyle="font-size:2em">实例：从手机相册中选照片然后分享，支持选择1张图片！36 </b><br/><br/>37 <pid="imageContainer"style="text-align:center;width:100%"></p>38 <pid="selectImg"style="color:#5eb95e;text-align:center">没有自定义分享图片</p>39 <inputtype="button"value="请选择分享图片"id="chooseImage"/><br/><br/>40 </body>41 </html>在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 varParametersTimeline=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图像APIObject配置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 varchooseImageID, //拍照或从手机相册中选图接口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("<imgstyle='width:30%'27 src='"+chooseImageID+"'>");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 成功分享自定义图片到朋友圈
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
微信开发之如何实现分享功能的详细内容，希望对您有所帮助，信息来源于网络。