微信开发实战之分享功能

PHP中文网 • 2025年3月11日 04:39:59 • 编程技术 • 阅读 2

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

（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环境的配置文件，代码如下：

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

登录后复制

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

01nbsp;html>02030405 07 第4章 4.2节-实例：从手机相册中选照片然后分享08 09 10 11 12 13 14 15 16 17 18 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 323334

:)

35 实例：从手机相册中选照片然后分享，支持选择1张图片！36

37

没有自定义分享图片

39

4041

登录后复制

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

01/*02 函数名称：wxJSSDK.shareApi03 函数功能：为wxJSSDK增加分享模块04 参数：05 shareList（Array） 必选项，待分享的API配置表06 */07wxJSSDK.shareApi = function(shareList){08    if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕0910        //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口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        }2728    }else{29        console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用分享服务。");30    }31}32/*33 函数名称：wxJSSDK.imageApi34 函数功能：为wxJSSDK增加图像服务35 参数：36 imageApi 图像API Object 配置37 */38wxJSSDK.imageApi = function(imageApi){39    if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕40        if(imageApi){4142            imageApi.chooseImage && wx.chooseImage({//拍照或从手机相册中选图接口43                success: function (res) {44                    imageApi.chooseImage.success && 45imageApi.chooseImage.success(res);46                }47            });4849            imageApi.previewImage && wx.previewImage({// 预览图片接口50                current: imageApi.previewImage.current, // 当前显示的图片链接51                urls: imageApi.previewImage.urls // 需要预览的图片链接列表52            });5354            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 && 61imageApi.uploadImage.success(res);62                }63            });6465            imageApi.downloadImage && wx.downloadImage({//下载图片接口66                serverId:imageApi.downloadImage.serverId, // 需要下载的图片的服务器端67ID，由uploadImage接口获得68                isShowProgressTips: imageApi.downloadImage.isShowProgressTips || 1, // 69默认为1，显示进度提示70                success: function (res) {71                    imageApi.downloadImage.success && 72imageApi.downloadImage.success(res);73                }74            });75        }else{76            console.log("缺少配置参数");77        }78    }else{79        console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用图像接口服80务。");81    }8283}8485window.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=96eQv3HPwEFxwsw8cyh5O7DjaNOoGd4d-jYtG_c9uW-YbwUYxkMywh_O3LCC97ZtmX8ZWr8np0Q5CqAox7lghNkNuiNHU8M618jbRvcaLjQuHq8&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 () {111112                        },113                        cancel: function () {114115                        }116                    }117                });118            });119        };120    $("#chooseImage").click(function(){121        wxJSSDK.imageApi({22            chooseImage:{23                success:function(res){24                    chooseImageID =  res.localIds[0]; // 返回选定照片的本地ID列表，25localId可以作为img标签的src属性显示图片26                    $("#imageContainer").html("");28                    $("#selectImg").html("已选择图片，请点击右上角分享到朋友圈按钮");29                    shareTimeline();30                }31            }32        });33    });34}