（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接口列表见附录b 02 "chooseimage", 03 "previewimage", 04 "uploadimage", 05 "onmenusharetimeline" 06 ] 07 //其他代码略
依据需求，构建一个“id”等于“chooseimage”的点击按钮，以及点击按钮后，用来显示选中图片的容器，在index.html文件中增加如下代码：
01 <!doctype html> 02 <html lang="en"> 03 <head> 04 <meta charset="utf-8"> 05 <meta name="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 <script src="./js/jquery-1.11.2.min.js?1.1.10"></script> 10 <!--依赖文件：微信的jssdk源文件--> 11 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?1.1.10"></script> 12 <!--依赖文件：coolie--> 13 <script src="./js/cookie.js?1.1.10"></script> 14 <!--jssdk的环境--> 15 <script src="./js/wxjssdk.js?1.1.10"></script> 16 <!--引入检测api的图像服务--> 17 <script src="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(to bottom, #62c462, #57a957); 25 background-repeat: repeat-x; 26 color: #ffffff; 27 text-align: center; 28 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 29 border-radius: 0.3em; 30 } 31 </style> 32 </head> 33 <body> 34 <h1 style="font-size: 8em">:)</h1> 35 <b style="font-size: 2em">实例：从手机相册中选照片然后分享，支持选择1张图片！ 36 </b><br /><br /> 37 <p id="imagecontainer" style="text-align: center;width: 100%"></p> 38 <p id="selectimg" style="color: #5eb95e;text-align: center">没有自定义分享图片</p> 39 <input type="button" value="请选择分享图片" id="chooseimage" /><br /><br /> 40 </body> 41 </html>
在imagesharing.js文件中增加处理业务的代码如下：
01 /* 02 函数名称：wxjssdk.shareapi 03 函数功能：为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.imageapi 34 函数功能：为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 eqv3hpwefxwsw8cyh5o7djanoogd4d-jytg_c9uw-ybwuyxkmywh_o3lcc 97 ztmx8zwr8np0q5cqaox7lghnknuinhu8m618jbrvcaljquhq8&media_id="+res.serverid; // 返回图片的服务器端id 98 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("<img style='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 成功分享自定义图片到朋友圈
以上就是微信开发实战之分享功能的详细内容。