uni-app iOS平台支持3D Touch快捷菜单项

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app iOS平台支持3D Touch快捷菜单项

iPhone6s(plus)设备已经支持3D Touch屏幕,HBuilder已支持添加应用的快捷菜单,效果如下:


## 配置快捷菜单项

打开应用的manifest.json文件,切换到代码视图,在plus -> distribute -> apple 下添加shortcuts节点,并配置各菜单项,数组中每项对应一个快捷菜单项:

```javascript
"shortcuts": [  
    {  
        "type": "share",  
        "title": "分 享",  
        "subtitle": "分享到微信、微博、QQ",  
        "icontype": "UIApplicationShortcutIconTypeShare"  
    },  
    {  
        "type": "about",  
        "title": "关 于",  
        "subtitle": "www.dcloud.io",  
        "iconfile": "sa.png",  
        "userinfo": {  
            "key3":"value3"  
        }  
    }  
],

uni-app项目将以上数据添加到"app-plus"->“distribute”->"ios"节点下

其中各字段值规范如下:

  • type: (必选)菜单项类型,字符串类型,用于标识菜单项
  • title: (必选)菜单项上显示的标题,字符串类型
  • subtitle: (可选)菜单项上显示的子标题,字符串类型
  • icontype: (可选)菜单项上显示的图标类型,字符串类型,取值参考iOS官方文档UIApplicationShortcutIconType
  • iconfile: (可选)菜单项上显示的图标文件,字符串类型,相对5+应用根目录路径,图标要求35x35分辨率,单色,参考Apple官方PS模板图
  • userinfo: (可选)菜单项上的自定义数据,JSON格式

App中处理快捷菜单项

判断应用是否通过快捷菜单项启动

plus.runtime.launcher的值为"shortcut"表示应用从快捷菜单项启动,示例如下:

if(plus.runtime.launcher=='shortcut'){  
     // ...  
}

判断快捷菜单项启动的参数

plus.runtime.arguments中保存所有快捷菜单项配置的值(JSON格式字符串),示例如下:

var cmd = JSON.parse(plus.runtime.arguments);  
console.log("Shortcut-plus.runtime.arguments: "+plus.runtime.arguments)  
var type=cmd&&cmd.type;  
switch(type){  
    case 'share':  
        // 用户点击了‘share'菜单项  
    break;  
    case 'about':  
        // 用户点击了’about'菜单项  
    break;  
    default:  
    break;  
}

plus.runtime.arguments的JSON格式字符串示例如下:

"{"type":"about","title":"关 于","subtitle": "www.dcloud.io","userinfo":{"key3":"value3"}}"

其中包括以下键值:

  • type: 菜单项类型,字符串类型
  • title: 菜单项上显示的标题,字符串类型
  • subtitle: 菜单项上显示的子标题,字符串类型
  • userinfo: 菜单项上的自定义数据

注:真机运行不生效,需提交App云端打包后才生效

实际用法参考HelloH5应用的“js/shortcut.js”

iOS平台5+SDK原生环境配置方法

uni-app网友经验分享:https://ask.dcloud.net.cn/article/36103


1 回复

在uni-app中,虽然原生开发对于iOS平台提供了较为丰富的API支持,包括3D Touch快捷菜单项(也被称为Peek and Pop或者Quick Actions),但在uni-app框架内直接实现这一功能需要一些额外的步骤和原生代码扩展。以下是一个基本的思路和代码示例,帮助你理解如何在uni-app中实现iOS平台的3D Touch快捷菜单项。

步骤概述

  1. 配置原生iOS项目:在Xcode中配置3D Touch快捷菜单项。
  2. 编写原生插件:创建一个uni-app原生插件来暴露这些快捷菜单项的回调。
  3. 在uni-app中调用插件:通过JavaScript调用原生插件来处理快捷菜单项的点击事件。

Xcode配置

首先,在Xcode中打开你的uni-app的iOS原生项目,然后在Info.plist文件中添加快捷菜单项配置。例如:

<key>UIApplicationShortcutItems</key>
<array>
    <dict>
        <key>UIApplicationShortcutItemIconType</key>
        <string>UIApplicationShortcutIconTypeCompose</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>New Message</string>
        <key>UIApplicationShortcutItemType</key>
        <string>com.example.app.new-message</string>
    </dict>
</array>

原生插件开发

创建一个uni-app原生插件,用于处理3D Touch快捷菜单项的点击事件。这里是一个简单的示例:

// MyPlugin.m
#import <UniApp/UniAppPlugin.h>

@interface MyPlugin : NSObject <UniAppPlugin>

@end

@implementation MyPlugin

- (void)handleShortcutItem:(UIApplicationShortcutItem *)shortcutItem {
    // 处理快捷菜单项点击事件
    if ([shortcutItem.type isEqualToString:@"com.example.app.new-message"]) {
        // 执行相应操作,比如打开一个页面
    }
}

+ (void)registerPlugin:(UniModuleRegisterContext *)context {
    [context registerModule:@"MyPlugin" withClass:[MyPlugin class]];
}

@end

AppDelegate.m中注册快捷菜单项点击事件的监听:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // ...
    [UIApplication sharedApplication].shortcutItems = @[[self configureShortcutItemWithType:@"com.example.app.new-message" title:@"New Message" icon:UIApplicationShortcutIconTypeCompose]];
    
    UIResponder *responder = [UIApplication sharedApplication].keyWindow.rootViewController;
    while (responder) {
        if ([responder respondsToSelector:@selector(handleShortcutItem:)]) {
            SEL selector = NSSelectorFromString(@"handleShortcutItem:");
            IMP imp = [responder methodForSelector:selector];
            void (*func)(id, SEL, UIApplicationShortcutItem *) = (void *)imp;
            func(responder, selector, launchOptions[UIApplicationLaunchOptionsShortcutItemKey]);
            break;
        }
        responder = [responder nextResponder];
    }
    // ...
    return YES;
}

注意:上述代码中的handleShortcutItem:方法调用部分需要根据你的具体实现调整,这里仅作为示例。

在uni-app中调用

由于uni-app本身不直接支持3D Touch,你需要在原生层面处理完快捷菜单项点击后,通过原生插件或其他机制(如存储、网络请求等)通知uni-app应用进行相应的页面跳转或操作。

回到顶部