@kbapp/js-bridge 0.4.8-alpha.0 → 1.0.0-alpha.0

package/dist/lib/share-model.d.ts

@@ -1,69 +1,194 @@
 /**
  *
- * @description 设置当前页面 分享时 显示的文案内容封面等
+ * @description app分享model
+ */
+export declare class AppShareModel {
+    /**
+     * 标题
+     */
+    title: string;
+    /**
+     * 文字内容
+     */
+    content?: string;
+    /**
+     * 图片
+     */
+    imageUrl: string;
+    /**
+     * 分享链接
+     */
+    url: string;
+    /**
+     * 分享功能是否开启. 默认为 true.
+     * 当分享功能关闭时, 其他分享相关字段均无效.
+     */
+    enabled?: boolean;
+    /**
+     * 海报分享标题.
+     * 客户端: 海报分享必须. 若不存在则取 {@link #title}, 若也不存在, 则海报分享功能关闭.
+     * H5: 非必填. 通过桥接给到客户端时, 建议可以只填充 {@link #title}.
+     * 后端: 非必填.
+     */
+    posterTitle?: string;
+    /**
+     * 海报分享内容.
+     * 客户端: 非必须. 若不存在则取 {@link #content}, 若也不存在, 则海报只有标题内容.
+     * H5: 非必填. 通过桥接给到客户端时, 建议可以只填充 {@link #content}.
+     * 后端: 非必填.
+     */
+    posterContent?: string;
+    /**
+     * 海报分享封面图.
+     * 客户端: 海报分享非必须. 若不存在则取 {@link #imageUrl}, 若也不存在, 则海报无封面.
+     * H5: 非必填. 通过桥接给到客户端时, 建议可以只填充 {@link #imageUrl}.
+     * 后端: 非必填.
+     */
+    posterUrl?: string;
+    /**
+     * 海报分享的展示时间.
+     * 客户端: 海报分享非必须. 若不存在则海报不展示时间.
+     * H5: 非必填. 通过桥接给到客户端时, 建议忽略该字段.
+     * 后端: 非必填.
+     */
+    posterTime?: string;
+    /** 海报分享展示时间格式. */
+    posterTimeFormat?: string;
+    /**
+     * 海报分享功能是否开启. 默认为 false.
+     * 当海报分享功能关闭时, 其他海报分享相关字段均无效.
+     */
+    posterEnabled?: boolean;
+    /**
+     * 分享小程序设置: 小程序原始ID.
+     * 获取方法: 登录小程序管理后台-设置-基本设置-帐号信息.
+     *
+     * 当此字段非空时, 客户端会显示 '分享至小程序' 功能. 详见微信小程序分享文档:
+     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
+     */
+    wxMiniUserName?: string;
+    /**
+     * 分享小程序设置: 小程序页面路径.
+     */
+    wxMiniPath?: string;
+    /**
+     * 分享小程序设置: 额外信息.
+     * 通常开发者希望分享出去的小程序被二次打开时可以获取到更多信息, 例如群的标识.
+     */
+    wxMiniShareTicket?: boolean;
+    /**
+     * 分享小程序设置: 小程序的类型.
+     * 0为正式版, 1为测试版, 2为体验版.
+     */
+    wxMiniType?: number;
+}
+/**
  *
- * **示例代码**
+ * @description 定义app点击转发时候的分享卡片内容
+ * @example **示例代码**
 ```js
-import { defineShareModel } from '@kbapp/js-bridge';
+import { defineAppShareModel } from '@kbapp/js-bridge';
 
-defineShareModel({
+// 方式1
+defineAppShareModel({
     title: '分享标题',
     content: '分享内容',
     imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png', // 分享图片
     url: 'http://www.kaiba315.com.cn/' // 分享网页地址
+    success() {
+        console.log('设置成功')
+    },
+    fail() {
+        console.log('设置失败')
+    }
+})
+
+// 方式2
+defineAppShareModel({
+    onShareApp() {
+        // 点击页面右上角的时候触发该回调, 定义转发内容
+        return {
+            title: '分享标题',
+            content: '分享内容',
+            imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png', // 分享图片
+            url: 'http://www.kaiba315.com.cn/' // 分享网页地址
+        }
+    },
+    success() {
+        console.log('设置成功')
+    },
+    fail() {
+        console.log('设置失败')
+    }
 })
 ```
  */
-export declare function defineShareModel(data: {
-    /** 标题 */
-    title: string;
-    /** 内容 */
-    content?: string;
-    /** 封面图片 */
-    imageUrl: string;
-    /** url */
-    url: string;
-    /** qqUrl */
-    qqUrl?: string;
-    /** 天目打点 */
-    tmuTrack?: any;
-}): void;
+export declare const defineAppShareModel: (...args: [params: AppShareModel & {
+    success?: ((res: void) => void) | undefined;
+    fail?: (error: import('./bridge-code').BridgeCode) => void;
+    complete?: () => void;
+}] | [params: {
+    onShareApp: () => AppShareModel;
+} & {
+    success?: ((res: void) => void) | undefined;
+    fail?: (error: import('./bridge-code').BridgeCode) => void;
+    complete?: () => void;
+}]) => Promise<void>;
 /**
  *
- * @description 定义页面右上角分享更多按钮显示以及分享面板
+ * @description 主动唤起 分享面板
+ * 桥接type: 58
+ * @example **示例代码**
+```js
+import { openAppSharePanel } from '@kbapp/market-partner-sdk';
+
+openAppSharePanel({
+    title: '开吧分享',
+    content: '开吧，开汽车上新生活！',
+    url: 'http://www.kaiba315.com.cn/',
+    imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png',
+    success() {
+        console.log('打开分享面板成功')
+    },
+    fail() {
+        console.log('打开分享面板失败')
+    }
+})
+```
  *
  */
-export declare function defineShareModelState(params: {
-    /** 是否显示 显示右上角 ...菜单 */
-    showMenu: boolean;
-    /** 显示分享面板布局, 0:正常显示. 1:只显示复制链接,浏览器打开相关. 2:只显示分享微信、QQ等. 默认 0 */
-    panelStyle: 0 | 1 | 2;
-}): void;
+export declare const openAppSharePanel: (params: AppShareModel & {
+    success?: ((res: void) => void) | undefined;
+    fail?: (error: import('./bridge-code').BridgeCode) => void;
+    complete?: () => void;
+}) => Promise<void>;
 /**
  *
- * @description 主动唤起更多分享模态框
- *
- *
- * **示例代码**
+ * @description 监听 分享面板打开时触发 (主动和被动)
+ * @example **示例代码**
 ```js
-import { invokeShareModal } from '@kbapp/js-bridge';
+import { onAppSharePanelShow } from '@kbapp/market-partner-sdk';
 
-invokeShareModal({
-    title: '开吧分享',
-    content: '开吧，开汽车上新生活！',
-    url: 'http://www.kaiba315.com.cn/',
-    imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png'
+const stopHandle = onAppSharePanelShow(() => {
+    console.log('分享面板打开')
 })
+
+// stopHandle() 停止监听
 ```
+ */
+export declare function onAppSharePanelShow(callback: EventListenerOrEventListenerObject): () => void;
+/**
  *
+ * @description 定义页面是否显示右上角分享菜单, 定义分享面板显示的相关状态
+ * 桥接type: 68
  */
-export declare function invokeShareModal(data: {
-    /** 分享出去的h5地址 */
-    url: string;
-    /** 分享出去的标题 */
-    title: string;
-    /** 分享出去的正文内容 */
-    content?: string;
-    /** 分享出去的封面图片 */
-    imageUrl: string;
-}): void;
+export declare const defineAppSharePanelState: (params: {
+    /** 是否显示 显示右上角 ...菜单 */
+    showMenu: boolean;
+    /** 显示分享面板布局, 0:正常显示. 1:只显示复制链接,浏览器打开相关. 2:只显示分享微信、QQ等. 默认 0 */
+    panelStyle: 0 | 1 | 2;
+} & {
+    success?: ((res: void) => void) | undefined;
+    fail?: (error: import('./bridge-code').BridgeCode) => void;
+    complete?: () => void;
+}) => Promise<void>;

package/dist/lib/subscribe-notify.d.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ * @description 获取APP订阅通知状态
+ * 桥接type: 72
+ * @returns {Promise<{ enabled: 0 | 1 }>}  1：开启；0：关闭
+ */
+export declare const getAppSubscribeNotifyStatus: (params?: {
+    success?: ((res: {
+        enabled: 0 | 1;
+    }) => void) | undefined;
+    fail?: (error: import('./bridge-code').BridgeCode) => void;
+    complete?: () => void;
+} | undefined) => Promise<{
+    enabled: 0 | 1;
+}>;
+/**
+ *
+ * @description 前往/打开 app订阅管理页面
+ * 桥接type: 73
+ */
+export declare const openAppSubscribeNotifySettings: (params?: {
+    success?: ((res: void) => void) | undefined;
+    fail?: (error: import('./bridge-code').BridgeCode) => void;
+    complete?: () => void;
+} | undefined) => Promise<void>;

package/dist/lib/trigger-login.d.ts

@@ -1,3 +1,5 @@
+import { BridgeCode } from './bridge-code';
+
 /**
  *
  * @description 登录信息
@@ -25,21 +27,27 @@ export declare class AppBridgedUserInfo {
 /**
  *
  * @description 获取用户登录信息.如果未登录返回null
+ * 桥接type: 31
  */
-export declare function getAppLoginInfo(): Promise<AppBridgedUserInfo | null>;
+export declare const getAppLoginInfo: (params?: {
+    success?: ((res: AppBridgedUserInfo | null) => void) | undefined;
+    fail?: (error: BridgeCode) => void;
+    complete?: () => void;
+} | undefined) => Promise<AppBridgedUserInfo | null>;
 /**
  *
- * @description 触发登录
- * 如果已登录,将直接返回登录信息, 请通过 `watchAppLoginSuccess` 监听登录成功事件
+ * @description 触发登录, 该函数仅触发登录, 不会返回任何结果, 可以通过 getAppLoginInfo 获取登录结果 或者 watchAppLoginSuccess 监听到登录
  */
-export declare function triggerAppLogin(): Promise<AppBridgedUserInfo>;
+export declare const triggerAppLogin: (params?: {
+    success?: ((res: void) => void) | undefined;
+    fail?: (error: BridgeCode) => void;
+    complete?: () => void;
+} | undefined) => Promise<void>;
 /**
  *
- * @description 注册监听app登录成功, 监听时候立刻执行检测一次, 注意,该函数仅读取登录信息, 不会触发登录
- * @param {(loginInfo: AppBridgedUserInfo) => void} callback 登录成功回调
- * @returns {() => void} 调用该函数取消监听
- *
- * **示例代码**
+ * @description 注册监听app是否登录成功, 监听时候立刻执行检测一次
+ * 如果已登录, 立刻触发一次回调
+ * @example **示例代码**
 ```js
 import { watchAppLoginSuccess } from '@kbapp/js-bridge';
 
@@ -50,4 +58,4 @@ const handle = watchAppLoginSuccess(() => {
 // handle() 停止监听
 ```
  */
-export declare const watchAppLoginSuccess: (callback: (loginInfo: AppBridgedUserInfo) => void) => () => void;
+export declare const onAppLoginSuccess: (callback: (loginInfo: AppBridgedUserInfo) => void) => () => void;

package/dist/utils/filter-undefined-properties.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 递归过滤对象中所有层级的 undefined 和 null 属性
+ * @param obj 待过滤的对象（仅支持纯对象，不支持数组/非对象类型）
+ * @returns 过滤后的新对象（自动剔除所有层级的 undefined 和 null 值）
+ */
+export declare function filterUndefinedAndNullProperties<T extends Record<string, any>>(obj: T): T;

package/dist/utils/promise-cache.d.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ * @description 缓存promise结果
+ */
+export declare function decorateCacheAsyncResult<CB extends (...params: any[]) => any>(cb: CB): (...params: Parameters<CB>) => ReturnType<CB>;

package/dist/utils/wrap-async.d.ts

@@ -0,0 +1,17 @@
+import { BridgeCode } from '../lib/bridge-code';
+
+type CallbackOptions<R> = {
+    /** 成功回调 */
+    success?: (res: R) => void;
+    /** 失败回调 */
+    fail?: (error: BridgeCode) => void;
+    /** 同时触发 */
+    complete?: () => void;
+};
+/**
+ *
+ * 将普通的async异步函数包装成小程序风格：
+ * 限制被包装函数 F 必须且只能接收一个参数
+ */
+export declare function wrapAsync<P, R>(fn: (params: P) => R | Promise<R>): (...args: P extends undefined ? [params?: CallbackOptions<Awaited<R>>] : {} extends P ? [params?: P & CallbackOptions<Awaited<R>>] : [params: P & CallbackOptions<Awaited<R>>]) => Promise<Awaited<R>>;
+export {};

package/examples/index.html

@@ -0,0 +1,236 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>测试demo</title>
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
+            crossorigin="anonymous"
+        />
+    </head>
+    <body>
+        <div id="app">
+            <div class="card m-2" v-for="(item, index) in list" :key="index">
+                <h5 class="card-header">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <span>{{item.title}}</span>
+
+                        <template v-if="item.done.status.loading">
+                            <button type="button" class="btn btn-primary" disabled>
+                                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button type="button" class="btn btn-primary" @click="() => {item.done()}">{{item.buttonText}}</button>
+                        </template>
+                    </div>
+                </h5>
+
+                <div class="card-body">
+                    <template v-if="item.subtitle">
+                        <div class="card-title fw-bold">{{item.subtitle}}</div>
+                    </template>
+
+                    <template v-if="item.desc">
+                        <div class="card-text">{{item.desc}}</div>
+                    </template>
+
+                    <template v-if="item.form && item.form.schema">
+                        <div class="card mt-3">
+                            <div class="card-header">执行参数</div>
+                            <div class="card-body">
+                                <div v-for="(key, index) in item.form.schema" :key="index">
+                                    <label :for="`exampleFormControlInput${index}`" class="form-label">{{ key.key }} {{ key.label }}</label>
+
+                                    <template v-if="key.type === 'number'">
+                                        <input
+                                            type="number"
+                                            class="form-control"
+                                            :id="`exampleFormControlInput${index}`"
+                                            :placeholder="key.label"
+                                            v-model="item.form.data[key.key]"
+                                        />
+                                    </template>
+                                    <template v-else>
+                                        <input
+                                            type="text"
+                                            class="form-control"
+                                            :id="`exampleFormControlInput${index}`"
+                                            :placeholder="key.label"
+                                            v-model="item.form.data[key.key]"
+                                        />
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+
+                    <template v-if="item.done.status.data">
+                        <div class="alert alert-success mt-2" role="alert">{{item.done.status.data}}</div>
+                    </template>
+
+                    <template v-if="item.done.status.error">
+                        <div class="alert alert-danger mt-2" role="alert">{{item.done.status.error}}</div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </body>
+    <script type="module">
+        import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+        import { runAction, defineAppShareModel, openAppSharePanel, reportDAEvent, getAppBaseInfo, shareImage, scanQRCode } from '../dist/index.es.js'
+
+        // import '../dist/index.umd.js'
+        // const { runAction, defineAppShareModel, openAppSharePanel, reportDAEvent, getAppBaseInfo, shareImage, scanQRCode } = window.kbBridge
+
+        /**
+         * 装饰器，用于处理done函数的调用
+         * @param {Function} callback - 实际执行的函数
+         * @returns {Function} - 装饰后的函数
+         */
+        const decorateDone = (callback) => {
+            /** 状态 */
+            const status = reactive({
+                /** 请求中 */
+                loading: false,
+
+                /** 请求完成 */
+                data: null,
+
+                /** 异常值 */
+                error: null,
+            })
+
+            async function done() {
+                status.data = null
+                status.error = null
+                status.loading = true
+
+                try {
+                    const data = await Promise.resolve(callback.call(this))
+                    status.data = data
+                } catch (error) {
+                    status.error = error
+                    throw error
+                } finally {
+                    status.loading = false
+                }
+            }
+
+            done['status'] = status
+
+            return done
+        }
+
+        const list = reactive([
+            {
+                title: 'runAction',
+                subtitle: '通用跳转',
+                buttonText: '执行',
+                desc: `执行结果: 跳转到百度页面`,
+                done: decorateDone(async () => {
+                    await runAction({
+                        action: 'pageWeb',
+                        actionParams: {
+                            url: 'https://www.baidu.com',
+                        },
+                    })
+                    return '执行成功'
+                }),
+            },
+            {
+                title: 'defineAppShareModel',
+                subtitle: '定义分享model',
+                buttonText: '执行',
+                desc: `执行结果: 设置点击页面右上角分享卡片内容`,
+                done: decorateDone(async () => {
+                    await defineAppShareModel({
+                        title: '分享标题',
+                        content: '分享内容',
+                        imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png',
+                        url: 'http://www.kaiba315.com.cn/',
+                    })
+
+                    return '设置成功'
+                }),
+            },
+            {
+                title: 'openAppSharePanel',
+                subtitle: '打开分享面板',
+                buttonText: '执行',
+                desc: `执行结果： 打开分享面板`,
+                done: decorateDone(async () => {
+                    await openAppSharePanel({
+                        title: '开吧分享',
+                        content: '开吧，开汽车上新生活！',
+                        url: 'http://www.kaiba315.com.cn/',
+                        imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png',
+                    })
+
+                    return '执行成功'
+                }),
+            },
+            {
+                title: 'reportDAEvent',
+                subtitle: '上报数据埋点到个推',
+                buttonText: '执行',
+                desc: `执行结果：上报数据埋点到个推`,
+                done: decorateDone(async () => {
+                    await reportDAEvent({
+                        eventName: 'text_event_name',
+                        eventParams: {
+                            test_param: 'test_value',
+                        },
+                    })
+
+                    return '执行成功'
+                }),
+            },
+            {
+                title: 'getAppBaseInfo',
+                subtitle: '获取开吧 App 基础信息',
+                buttonText: '执行',
+                desc: `执行结果: 返回开吧 App 基础信息`,
+                done: decorateDone(async () => {
+                    return getAppBaseInfo()
+                }),
+            },
+            {
+                title: 'shareImage',
+                subtitle: '分享图片',
+                buttonText: '执行',
+                desc: `执行结果 分享图片`,
+                done: decorateDone(async () => {
+                    await shareImage({
+                        imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png',
+                    })
+
+                    return '分享成功'
+                }),
+            },
+            {
+                title: 'scanQRCode',
+                subtitle: '扫码',
+                buttonText: '执行',
+                desc: `执行结果 分享图片`,
+                done: decorateDone(async () => {
+                    return scanQRCode({
+                        imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png',
+                    })
+                }),
+                
+            }
+        ])
+
+        createApp({
+            setup() {
+                return {
+                    list,
+                }
+            },
+        }).mount('#app')
+    </script>
+</html>

package/package.json

@@ -3,8 +3,21 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.4.8-alpha.0",
+    "version": "1.0.0-alpha.0",
     "description": "开吧客户端桥接",
-    "main": "./dist/index.js",
-    "author": "along"
-}
+    "author": "along",
+    "type": "module",
+    "main": "./dist/index.umd.js",
+    "module": "./dist/index.es.js",
+    "types": "./dist/index.d.ts",
+    "scripts": {
+        "dev": "vite build && vite",
+        "build": "vite build",
+        "publish": "npm run build && npm publish"
+    },
+    "devDependencies": {
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0"
+    }
+}

package/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+    build: {
+        lib: {
+            // 库的入口文件
+            entry: resolve(__dirname, 'src/index.ts'),
+            // UMD 格式下全局变量的名字（例如：window.kbBridge)
+            name: 'kbBridge',
+            // 打包输出的文件名
+            fileName: (format) => `index.${format}.js`,
+            // 依然打包两种格式，确保兼容性
+            formats: ['es', 'umd'],
+        },
+        rollupOptions: {
+            // 如果有外部依赖，在这里声明
+            external: [],
+            output: {
+                globals: {},
+            },
+        },
+        outDir: 'dist',
+    },
+    plugins: [dts({ insertTypesEntry: true })],
+    // 这里的配置是为了让 npx vite 启动时默认打开测试页
+    server: {
+        open: '/examples/index.html',
+        host: '0.0.0.0'
+    },
+})