Custom Menu

1. More menu function descriptions for mini programs

In order to support different business needs within the App, such as supporting different fetch shares, the current SDK supports more custom menus within the panel. The custom menus are divided by type into two types: onMiniProgram and common

• common: This type does not require additional processing by the mini program
• onMiniProgram: This type of menu, when clicked, will fetch data from the mini program to provide business processing to the App Detailed description of menu types:< br>

1. A custom menu of type common will trigger a proxy event directly to the host app when the user clicks on the menu. no logic needs to be added to the current page of the mini program. < br>
2. The onMiniProgram type custom menu, when the user clicks on the menu, will first call the on{MenuId}ButtonHandler event on the current mini program page, get the mini program page data, and then trigger the proxy event to the host app. So, if a custom menu of type onMiniProgram is not implemented in the current mini program page, it will not be displayed if the corresponding event is not implemented. < br>

Note

Customizing more menu items needs to be implemented by both the App and the mini program. For the work on the App side, please refer to [UI Customization - Set mini program more menu](... /... /runtime-sdk/customui/set-more-menu.html#_8 - inject menu items in the more panel by yourself)

2. More menu examples for mini programs

For example: more menu items in the app to implement the onMiniProgram type [Share to Pin] and [Share to Sina Weibo] (only the processing needed in the mini program is described here)

2.1 Share ID

• Configure the Share to Pin menu in the admin backend with the ID ShareDingDing
• Manage backend configuration to share to Sina Weibo with the ID ShareSinaWeibo

2.2 Sharing configuration

Subscribe to DeepL Pro to edit this document. Visit www.DeepL.com/profor more information. In the corresponding page of the mini program, configure the onShareDingDingButtonHandler and onShareSinaWeiboButtonHandler functions (if the corresponding function is not configured, the SDK will not display the corresponding menu) mini program configuration method:< br> on{id}ButtonHandler(id is capitalized)< br> funtion is called to return title, appInfo and other information, which will be passed to the SDK for processing The whole process:< br> When the [Share to Pin] menu item is clicked, the onShareDingDingButtonHandler function is called, returning data and passing it through to the SDK for processing

Note

In the code of the mini program, the IDs are converted to initial capital letters in order to standardise the naming and specification with onShareAppMessage.

More examples

• If the ID is shareWeibo, the mini program needs to be configured with onShareWeiboButtonHandler;
• ID is shareDingDing, the mini program needs to be configured with onShareDingDingButtonHandler;
• ID is doSomething, the mini program needs to be configured with onDoSomethingButtonHandler;
• If the ID is ShareQQ, the mini program needs to be configured with onShareQQButtonHandler.

Page({
 // ...
 // Custom handler
 onShareDingDingButtonHandler(e) {
 return {
 title: "onShareDingDingButtonHandler custom title",
 appInfo: {
 // Other additional information
 },
 success(res) {
 console. log('share success callback', res)
 },
 fail(res) {
 console. log('share fail callback', res)
 }
 }
 },
 // Custom handler
 onShareSinaWeiboButtonHandler(e) {
 return {
 title: "onShareSinaWeiboButtonHandler custom title",
 appInfo: {
 // Other additional information
 },
 success(res) {
 console. log('share success callback', res)
 },
 fail(res) {
 console. log('share fail callback', res)
 }
 }
 },
 onShareAppMessage(res) {
 return {
 title: 'onShareAppMessage custom title',
 appInfo: {
 // Other additional information
 },
 success(res) {
 console. log('share success', res)
 },
 fail(res) {
 console. log('share fail', res)
 }
 }
 }
})