微信公众号及HTML 5混合模式—分享手机相册中照片.docxVIP

微信公众号与HTML 5混合模式—分享手机相册中照片4.2.1??项目需求需求说明：实现微信端的手机用户，点击按钮选取1张图片，分享到朋友圈。4.2.2??需求分解通过对需求的了解，可以将其分解为：（1）微信端手机用户，可以使用微信的JSSDK。（2）选取图片，使用JSSDK的“chooseImage”，由于分享图片本地地址无法分享，因此还需要JSSDK的“uploadImage”。（3）分享到朋友圈，需要JSSDK的“onMenuShareTimeline”。（4）综合起来，业务逻辑请查看图4.5。图4.5? 业务逻辑结构图4.2.3??代码实现首先将JSSDK的环境复制一份，到本节目录下，创建index.html文件、imageSharing.js文件，目录结构如图4.6。图4.6??4.2节目录结构??修改一下JSSDK环境的配置文件，代码如下：[html]?view plain?copyjsApiList:?[?//?必填，需要使用的JS接口列表，所有JS接口列表见附录2??????chooseImage,??????previewImage,??????uploadImage,??????onMenuShareTimeline??]??//其他代码略??依据需求，构建一个“id”等于“chooseImage”点击按钮，以及点击按钮后，用来显示选中图片的容器，在index.html文件中增加如下代码：[html]?view plain?copy01??!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/script??10??????!--依赖文件：微信的JSSDK源文件--??11??????script?src=/open/js/jweixin-1.0.0.js/script??12??????!--依赖文件：coolie--??13??????script?src=./js/cookie.js/script??14??????!--JSSDK的环境--??15??????script?src=./js/wxJSSDK.js/script??16??????!--引入检测API的图像服务--??17??????script?src=imageSharing.js/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??/bbr?/br?/??37??????p?id=imageContainer?style=text-align:?center;width:?100%/p??38??????p?id=selectImg?style=color:?#