Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve the sharing function in the development of Wechat. The editor thinks it is very practical, so I hope you can get something after reading this article.

Through the understanding of the requirements, it can be broken down into:

(1) Mobile users on WeChat can use the JSSDK of Wechat.

(2) Select the picture and use the "chooseImage" of JSSDK. Because the local address cannot share the picture, you also need the "uploadImage" of JSSDK.

(3) to share in moments, you need JSSDK's "onMenuShareTimeline".

Taken together, the business logic is shown in figure 4.5.

Figure 4.5 Business logic structure diagram

First, copy a copy of the environment of JSSDK to the directory of this section, and create the index.html file and imageSharing.js file. The directory structure is shown in figure 4.6.

Figure 4.6 section 4.2 directory structure

Modify the configuration file of the JSSDK environment as follows:

01 jsApiList: [/ / required, list of JS interfaces to be used. For a list of all JS interfaces, please see Appendix B02 "chooseImage", 03 "previewImage", 04 "uploadImage", 05 "onMenuShareTimeline" 06] 07 / / other codes

According to the demand, build a click button with "id" equal to "chooseImage", and after clicking the button, use the container to display the selected image, and add the following code to the index.html file:

01 02 03 04 05 07 Section 4: 4.2-example: select photos from mobile phone albums and share 08 09 10 11 12 13 14 15 16 17 18 19 input {20 width: 100% 21 padding: 0.2 62c462 22 background-color: # 5eb95e political 23 font-size: 1.4 emscape 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.3emscape 30} 31 32 33 34:) 35 examples: select photos from mobile phone albums and share them. You can select an image! 36 37

38 there are no custom shared pictures

39 40 41

Add the code to handle the business in the imageSharing.js file as follows:

01 / * 02 function name: wxJSSDK.shareApi03 function function: add sharing module 04 parameters to wxJSSDK: 05 shareList (Array) required option API configuration Table to be shared 06 * / 07 wxJSSDK.shareApi = function (shareList) {08 if (wxJSSDK.isReady) {/ / wxJSSDK.isReady check whether Wechat JSSDK is initialized 09 10 / / get the "share to moments" button click status and custom sharing content API 11 if (shareList.onMenuShareTimeline) {12 var ParametersTimeline = shareList.onMenuShareTimeline 13 wx.onMenuShareTimeline ({14 title: ParametersTimeline.title, / / sharing title 15 link: ParametersTimeline.link, / / sharing link 16 imgUrl: ParametersTimeline.imgUrl / / sharing icon 17 success: function () {18 / / callback function 19 ParametersTimeline.success & & ParametersTimeline.success () executed after the user confirms the sharing 20}, 21 cancel: function () {22 / / callback function executed after the user cancels sharing 23 ParametersTimeline.cancel & & ParametersTimeline.cancel (); 24} 25}) 26} 27 28} else {29 console.log ("Sorry, wx is not initialized, please wait for wx initialization before calling the sharing service.") 30} 31} 32 / * 33 function name: wxJSSDK.imageApi34 function: add image service to wxJSSDK 35 parameters: 36 imageApi image API Object configuration 37 * / 38 wxJSSDK.imageApi = function (imageApi) {39 if (wxJSSDK.isReady) {/ / wxJSSDK.isReady check whether Wechat JSSDK is initialized 40 if ( ImageApi) {41 42 imageApi.chooseImage & & wx.chooseImage ({/ / take photos or select photo interface 43 success: function (res) {44 imageApi.chooseImage.success & & 45 imageApi.chooseImage.success (res)) 46} 47}) 48 49 imageApi.previewImage & & wx.previewImage ({/ / Preview image interface 50 current: imageApi.previewImage.current, / / currently displayed picture link 51 urls: imageApi.previewImage.urls / / list of picture links to be previewed 52}) 53 54 imageApi.uploadImage & & wx.uploadImage ({/ / upload image API 55 localId: imageApi.uploadImage.localId, / / the local ID,56 of the image to be uploaded is 57 isShowProgressTips: imageApi.uploadImage.isShowProgressTips via the chooseImage API | 1, / / 58 defaults to 1 Show progress prompt 59 success: function (res) {60 imageApi.uploadImage.success & & 61 imageApi.uploadImage.success (res) 62} 63}) 64 65 imageApi.downloadImage & & wx.downloadImage ({/ / download image API 66 serverId:imageApi.downloadImage.serverId, / / the server-side 67 ID of the image to be downloaded. 68 isShowProgressTips: imageApi.downloadImage.isShowProgressTips is obtained from the uploadImage API | 1, / / 69 defaults to 1 Show progress prompt 70 success: function (res) {71 imageApi.downloadImage.success & & 72 imageApi.downloadImage.success (res) 73} 74}); 75} else {76 console.log ("missing configuration parameters"); 77} 78} else {79 console.log ("Sorry, wx is not initialized, please wait for wx initialization, and then call the image for oral 80 services"). 81} 82 83} 84 85 _ window.onload = function () {86 var chooseImageID, / / take photos or select interface 87 shareImage from mobile photo albums 88 uploadImage = function (back) {89 wxJSSDK.imageApi ({/ / upload picture 90 uploadImage: {91 localId:chooseImageID.toString (), 92 success:function (res) {/ / temporary access_token After uploading the image successfully, perform the sharing operation 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 / / return the server-side ID98 back & & back () of the image; 99} 100} 101}) 102} 103 shareTimeline = function () {104 uploadImage (function () {105 wxJSSDK.shareApi) (share photos 106 onMenuShareTimeline: {/ / share to moments Title: "example: select photos from mobile photo albums and share them!" , / / sharing title 108link: 'http://weibo.com/xixinliang', / / sharing link 109imgUrl: shareImage, / / sharing icon 110success: function () {111112} 113 cancel: function () {114115} 116} 117}) Click (function () {121 wxJSSDK.imageApi ({22 chooseImage: {23 success:function (res) {24 chooseImageID = res.localIds [0]) / / returns the local ID list of the selected photos. 25 localId can be used as the src attribute of the img tag to display the picture 26 $("# imageContainer") .html ("

"); 28 $(" # selectImg ") .html (" selected pictures, please click the button in the upper right corner to share to moments "); 29 shareTimeline (); 30} 31} 32}); 33}); 34} [code interpretation]

In index.html, a button is created to share custom images, as shown in figure 4.7.

Click the share button, call JSSDK's Select Image API, and let the user select the image, as shown in figure 4.8.

Figure 4.7 Custom sharing Picture UI

Figure 4.8 UI after selecting a picture

After that, call "uploadImage" to upload the picture.

After the upload is successful, return to the server "serverId" after the upload, and then call the API for downloading multimedia to assign the image to the sharing API "onMenuShareTimeline" of JSSDK.

Users can view the sharing results, as shown in figures 4.9 and 4.10.

Figure 4.9 UI shared with WeChat moments editors

Figure 4.10 successfully sharing custom pictures to moments

This is the end of the article on "how to achieve sharing function in Wechat development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.