Web development practices on WeChat public platform-2. Select and share photos from mobile phone album-2

Public platform Web development practice-2. Select and share photos from mobile phone album, practice-2

The requirements can be divided:

(1) The JSSDK that can be used by mobile phone users.

(2) Select an image and use the "chooseImage" of JSSDK. Because the local address cannot be shared during image sharing, the "uploadImage" of JSSDK is also required ".

(3) To share with your friends, you need JSSDK's "onMenuShareTimeline ".

In summary, business logic 4.5 is shown.

 

Figure 4.5 business logic structure diagram

First, copy the jssdk's environment to the current directory and create the index.html file and imageSharing. js file. The directory structure is shown in 4.6.

Figure 4.6 directory structure

Modify the configuration file of the JSSDK environment. The Code is as follows:

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

Add the following code to the hosts file:

01 <! DOCTYPE html> 02 [Code description]
 

 

 
  
In index.html, a button is created to share a custom image, as shown in Figure 4.7.
 
  
Click the share button and call the JSSDK Image Selection API to allow users to select images, as shown in Figure 4.8.

 
 

Figure 4.7 custom image sharing UI

Figure 4.8 UI after Image Selection
 

 

 
  
Then, call "uploadImage" to upload the image.
 
  
After the upload is successful, return the uploaded server "serverId", call the multimedia download API, and assign the image value to the sharing API "onMenuShareTimeline" of JSSDK ".

 
 
You can view the sharing effect, as shown in Figure 4.9 and figure 4.10.

Figure 4.9 share the UI edited by the circle of friends

Figure 4.10 share a custom image to your friends

Public platform Web development practices-HTML5 + JSSDK hybrid development and decryption

 
Welcome to share this book