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

微信公众号与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.64.2节目录结构修改一下JSSDK环境的配置文件，代码如下：htmlview plaincopy1. jsApiList:/必填，需要使用的JS接口列表，所有JS接口列表见附录22. chooseImage,3. previewImage,4. uploadImage,5. onMenuShareTimeline6. 7. /其他代码略依据需求，构建一个“id”等于“chooseImage”点击按钮，以及点击按钮后，用来显示选中图片的容器，在index.html文件中增加如下代码：htmlview plaincopy1. 012. 023. 034. 045. 057. 07第4章4.2节-实例：从手机相册中选照片然后分享8. 089. 0910. 1011. 1112. 1213. 1314. 1415. 1516. 1617. 1718. 1819. 19input20. 20width:100%;21. 21padding:0.2em;22. 22background-color:#5eb95e;23. 23font-size:1.4em;24. 24background-image:linear-gradient(tobottom,#62c462,#57a957);25. 25background-repeat:repeat-x;26. 26color:#ffffff;27. 27text-align:center;28. 28text-shadow:0-1px0rgba(0,0,0,0.25);29. 29border-radius:0.3em;30. 3031. 3132. 3233. 3334. 34:)35. 35实例：从手机相册中选照片然后分享，支持选择1张图片！36. 3637. 3738. 38没有自定义分享图片39. 3940. 4041. 4142. 在imageSharing.js文件中增加处理业务的代码如下：43. 01/*44. 02函数名称：wxJSSDK.shareApi45. 03函数功能：为wxJSSDK增加分享模块46. 04参数：47. 05shareList（Array）必选项，待分享的API配置表48. 06*/49. 07wxJSSDK.shareApi=function(shareList)50. 08if(wxJSSDK.isReady)/wxJSSDK.isReady查看微信JSSDK是否初始化完毕51. 0952. 10/获取“分享到朋友圈”按钮点击状态及自定义分享内容接口53. 11if(shareList.onMenuShareTimeline)54. 12varParametersTimeline=shareList.onMenuShareTimeline;55. 13wx.onMenuShareTimeline(56. 14title:ParametersTimeline.title,/分享标题57. 15link:ParametersTimeline.link,/分享链接58. 16imgUrl:ParametersTimeline.imgUrl,/分享图标59. 17success:function()60. 18/用户确认分享后执行的回调函数61. 19ParametersTimeline.success&ParametersTimeline.success();62. 20,63. 21cancel:function()64. 22/用户取消分享后执行的回调函数65. 23ParametersTimeline.cancel&ParametersTimeline.cancel();66. 2467. 25);68. 2669. 2770. 28else71. 29console.log(抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用分享服务。);72. 3073. 3174. 32/*75. 33函数名称：wxJSSDK.imageApi76. 34函数功能：为wxJSSDK增加图像服务77. 35参数：78. 36imageApi图像APIObject配置79. 37*/80. 38wxJSSDK.imageApi=function(imageApi)81. 39if(wxJSSDK.isReady)/wxJSSDK.isReady查看微信JSSDK是否初始化完毕82. 40if(imageApi)83. 4184. 42imageApi.chooseImage&wx.chooseImage(/拍照或从手机相册中选图接口85. 43success:function(res)86. 44imageApi.chooseImage.success&87. 45imageApi.chooseImage.success(res);88. 4689. 47);90. 4891. 49imageApi.previewImage&wx.previewImage(/预览图片接口92. 50current:imageApi.previewImage.current,/当前显示的图片链接93. 51urls:imageApi.previewImage.urls/需要预览的图片链接列表94. 52);95. 5396. 54imageApi.uploadImage&wx.uploadImage(/上传图片接口97. 55localId:imageApi.uploadImage.localId,/需要上传的图片的本地ID，98. 56由chooseImage接口获得99. 57isShowProgressTips:imageApi.uploadImage.isShowProgressTips|1,/100. 58默认为1，显示进度提示101. 59success:function(res)102. 60imageApi.uploadImage.success&103. 61imageApi.uploadImage.success(res);104. 62105. 63);106. 64107. 65imageApi.downloadImage&wx.downloadImage(/下载图片接口108. 66serverId:imageApi.downloadImage.serverId,/需要下载的图片的服务器端67ID，由uploadImage接口获得109. 68isShowProgressTips:imageApi.downloadImage.isShowProgressTips|1,/69默认为1，显示进度提示110. 70success:function(res)111. 71imageApi.downloadImage.success&112. 72imageApi.downloadImage.success(res);113. 73114. 74);115. 75else116. 76console.log(缺少配置参数);117. 77118. 78else119. 79console.log(抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用图像接口服80务。);120. 81121. 82122. 83123. 84124. 85window.onload=function()125. 86varchooseImageID,/拍照或从手机相册中选图接口126. 87shareImage,127. 88uploadImage=function(back)128. 89wxJSSDK.imageApi(/上传图片129. 90uploadImage:130. 91localId:chooseImageID.toString(),131. 92success:function(res)/临时access_token，上传图片成功之后，执行分93享操作132. 94shareImage=133. 95/cgi-bin/media/get?access_token=134. 96eQv3HPwEFxwsw8cyh5O7DjaNOoGd4d-jYtG_c9uW-YbwUYxkMywh_O3LCC135. 97ZtmX8ZWr8np0Q5CqAox7lghNkNuiNHU8M618jbRvcaLjQuHq8&media_id=+res.serverId;/返回图片的服务器端ID136. 98back&back();137. 99138. 100139. 101);140. 102,141. 103shareTimeline=function()142. 104uploadImage(function()143. 105wxJSSDK.shareApi(/分享图片144. 106onMenuShareTimeline:/分享到朋友圈145. 107title:实例：从手机相册中选照片然后分享！,/分享标题146. 108link:/xixinliang,/分享链接147. 109imgUrl:shareImage,/分享图标148. 110success:function()149. 111150. 112,151. 113cancel:function()152. 114153. 115154. 116155. 117);156. 118);157. 119;158. 120$(#chooseImage).click(function()159. 121wxJSSDK.imageApi(160. 22chooseImage:161. 23success:function(res)162. 24chooseImageID=res.localIds0;/返回选定照片的本地ID列表，163. 25localId可以作为img标签的src属性显示图片164. 26$(#imageContainer).html();166. 28$(#selectImg).html(已选择图片，请点击右上角分享到朋友圈按钮);167. 29shareTimeline();168. 30169. 31170. 32);171. 33);172. 34【代码解释】l 在index.html中，创建了一个分享自定义图片的按