?? Implementing Share Functionality in WeChat Mini Program: A Step-by-Step Guide ??As a developer, you're probably excited to learn about the share functionality in WeChat mini programs. In this comprehensive guide, we'll walk you through the process of implementing share functionality for both friends and Moments (朋友圈) in your WeChat mini program.
Prerequisites
Before diving into the implementation details, make sure you have:
1. A basic understanding of WeChat mini program development.
2. Familiarity with JavaScript and HTML.
3. The WeChat mini program documentation: < Share Functionality in WeChat Mini Programs
WeChat mini programs support sharing to both friends (好友) and Moments (朋友圈). When a user shares your mini program, they can choose to share it with their friends or post it in their Moments. Here's what happens when a user shares your mini program:
1. Friends: The shared link opens the mini program in a new tab, allowing users to interact with your app.
2. Moments: When a user shares your mini program in their Moments, they won't actually open the mini program. Instead, they'll enter a "mini program single-page mode" page, which displays a static snapshot of your mini program's content.
Implementing Share Functionality
To implement share functionality in your WeChat mini program, follow these steps:
Step1: Add the `share` ButtonIn your mini program's HTML file, add a `share` button with the following attributes:
```html
```
The `data-share-type` attribute specifies whether to share the link as a friend or in Moments. You can set it to either `"friend"` or `"moment"`.
Step2: Handle Share Button ClickIn your mini program's JavaScript file, add an event listener for the `share` button click:
```javascriptdocument.getElementById('share-btn').addEventListener('click', share);
```
The `share` function will be called when the user clicks the `share` button.
Step3: Implement Share FunctionalityIn the `share` function, use the WeChat mini program's API to generate a share link:
```javascriptfunction share() {
const shareLink = wx.createShareLink({
title: 'Your Mini Program Title',
desc: 'Your Mini Program Description',
imgUri: ' // Optional icon URL });
// Share the link to friends or Moments if (wx.getStorageSync('shareType') === 'friend') {
wx.shareAppMessage({
title: shareLink.title,
desc: shareLink.desc,
imgUri: shareLink.imgUri,
success() {
console.log('Shared successfully!');
},
fail() {
console.log('Sharing failed!');
},
});
} else if (wx.getStorageSync('shareType') === 'moment') {
wx.shareToMoment({
title: shareLink.title,
desc: shareLink.desc,
imgUri: shareLink.imgUri,
success() {
console.log('Shared successfully!');
},
fail() {
console.log('Sharing failed!');
},
});
}
}
```
In this example, we use the `wx.createShareLink` API to generate a share link with the specified title, description, and icon URL (if provided). We then check the value of `shareType` stored in local storage using `wx.getStorageSync`. If `shareType` is set to `"friend"`, we call `wx.shareAppMessage` to share the link. If it's set to `"moment"`, we call `wx.shareToMoment`.
Step4: Store Share Type in Local StorageIn your mini program, store the share type (either `"friend"` or `"moment"`) in local storage using `wx.setStorageSync`:
```javascriptwx.setStorageSync('shareType', 'friend'); // Or 'moment'
```
This allows you to retrieve the share type later and determine whether to share the link as a friend or in Moments.
Step5: Handle Share Link GenerationIn your mini program, handle the generation of the share link using `wx.createShareLink`:
```javascriptfunction generateShareLink() {
const shareLink = wx.createShareLink({
title: 'Your Mini Program Title',
desc: 'Your Mini Program Description',
imgUri: ' // Optional icon URL });
return shareLink;
}
```
This function generates a share link with the specified title, description, and icon URL (if provided).
Step6: Integrate Share FunctionalityFinally, integrate the share functionality into your mini program by calling the `generateShareLink` function when the user clicks the `share` button:
```javascriptdocument.getElementById('share-btn').addEventListener('click', () => {
const shareLink = generateShareLink();
// Share the link to friends or Moments if (wx.getStorageSync('shareType') === 'friend') {
wx.shareAppMessage({
title: shareLink.title,
desc: shareLink.desc,
imgUri: shareLink.imgUri,
success() {
console.log('Shared successfully!');
},
fail() {
console.log('Sharing failed!');
},
});
} else if (wx.getStorageSync('shareType') === 'moment') {
wx.shareToMoment({
title: shareLink.title,
desc: shareLink.desc,
imgUri: shareLink.imgUri,
success() {
console.log('Shared successfully!');
},
fail() {
console.log('Sharing failed!');
},
});
}
});
```
In this example, we generate a share link using the `generateShareLink` function and then call either `wx.shareAppMessage` or `wx.shareToMoment` depending on the value of `shareType`.
Conclusion
Implementing share functionality in your WeChat mini program is a straightforward process. By following these steps, you can enable users to share your app with their friends or post it in their Moments. Remember to store the share type in local storage and handle the generation of the share link using `wx.createShareLink`. Happy coding! ??
