@hlw-uni/mp-vue 2.1.52 → 2.1.55

package/src/composables/request/README.md

@@ -0,0 +1,124 @@
+# request 调用文档
+
+`request` 模块封装 `uni.request`、请求拦截器、响应拦截器、错误拦截器、上传和服务类组织方式。
+
+## 引入
+
+```ts
+import {
+    useRequest,
+    useUpload,
+    BaseService,
+    ServiceNamespace,
+    ServicePrefix,
+} from "@hlw-uni/mp-vue";
+```
+
+## useRequest
+
+```ts
+const request = useRequest();
+
+request.setBaseURL("https://api.example.com");
+
+const offRequest = request.onRequest((config) => {
+    config.headers = {
+        ...config.headers,
+        "x-token": uni.getStorageSync("token"),
+    };
+    return config;
+});
+
+const res = await request.get<{ name: string }>("/user/profile");
+
+offRequest();
+```
+
+## API
+
+| 方法 | 说明 |
+| --- | --- |
+| `request(config)` | 发起完整配置请求 |
+| `get(url, data?)` | GET 请求 |
+| `post(url, data?)` | POST 请求 |
+| `put(url, data?)` | PUT 请求 |
+| `del(url, data?)` | DELETE 请求 |
+| `setBaseURL(url)` | 设置全局基础地址 |
+| `onRequest(fn)` | 注册请求拦截器，返回取消函数 |
+| `onResponse(fn)` | 注册响应拦截器，返回取消函数 |
+| `onError(fn)` | 注册错误拦截器，返回取消函数 |
+| `upload(config)` | 上传文件 |
+| `resolveServiceUrl(namespace, url, servicePrefix?)` | 生成服务类请求地址 |
+
+## 响应格式
+
+```ts
+interface ApiResponse<T = unknown> {
+    code: number;
+    data: T;
+    info: string;
+}
+```
+
+## useUpload
+
+```ts
+const { uploading, upload } = useUpload();
+
+const result = await upload({
+    type: "local",
+    server: "https://api.example.com/upload",
+    url: "https://api.example.com/upload",
+    filePath: tempFilePath,
+    header: {
+        "x-token": uni.getStorageSync("token"),
+    },
+});
+
+console.log(uploading.value, result.data);
+```
+
+上传类型：
+
+| 类型 | 说明 |
+| --- | --- |
+| `local` | 直接上传到业务接口 |
+| `cos` | 腾讯云 COS 表单上传 |
+| `oss` | 阿里云 OSS 表单上传 |
+| `qiniu` | 七牛云表单上传 |
+| `alist` | Alist 上传 |
+
+## BaseService
+
+```ts
+@ServicePrefix("api")
+@ServiceNamespace("user")
+class UserService extends BaseService {
+    profile() {
+        return this.get<{ nickname: string }>("/profile");
+    }
+
+    update(data: { nickname: string }) {
+        return this.post("/update", data);
+    }
+}
+
+const userService = new UserService();
+const profile = await userService.profile();
+```
+
+上面的 `profile()` 会请求 `/api/user/profile`。如果传入绝对地址，例如 `https://example.com/a`，则不会拼接前缀。
+
+## UploadConfig
+
+```ts
+interface UploadConfig {
+    server: string;
+    filePath: string;
+    fileName?: string;
+    type: string;
+    credentials?: Record<string, string>;
+    header?: Record<string, string>;
+    url?: string;
+}
+```

package/src/composables/{http → request}/adapters/oss.ts

@@ -11,6 +11,7 @@ export const ossAdapter: UploadAdapter = {
     buildFormData(ctx) {
         const c = ctx.credentials ?? {};
         return {
+            key: c["key"] ?? ctx.fileName,
             policy: c["policy"] ?? "",
             signature: c["signature"] ?? "",
             OSSAccessKeyId: c["accessKeyId"] ?? "",

package/src/composables/request/client.ts

@@ -0,0 +1,204 @@
+import { ref } from "vue";
+import type {
+    ApiResponse,
+    ErrorInterceptor,
+    RequestConfig,
+    RequestInterceptor,
+    ResponseInterceptor,
+    UploadConfig,
+    UploadResult,
+} from "./types";
+import { getAdapter } from "./adapters";
+
+export interface RequestClient {
+    request<T = unknown>(config: RequestConfig): Promise<ApiResponse<T>>;
+    get<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>>;
+    post<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>>;
+    put<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>>;
+    del<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>>;
+    upload(config: UploadConfig): Promise<UploadResult>;
+    setBaseURL(url: string): void;
+    resolveServiceUrl(namespace: string, url: string, servicePrefix?: string): string;
+    onRequest(fn: RequestInterceptor): () => void;
+    onResponse<T = unknown>(fn: ResponseInterceptor<T>): () => void;
+    onError(fn: ErrorInterceptor): () => void;
+}
+
+class UniRequestClient implements RequestClient {
+    private reqInterceptors: RequestInterceptor[] = [];
+    private resInterceptors: ResponseInterceptor[] = [];
+    private errInterceptors: ErrorInterceptor[] = [];
+    private baseURL = "";
+    private defaultHeaders: Record<string, string> = { "Content-Type": "application/json" };
+
+    setBaseURL(url: string): void {
+        this.baseURL = url;
+    }
+
+    onRequest(fn: RequestInterceptor): () => void {
+        this.reqInterceptors.push(fn);
+        return () => this.remove(this.reqInterceptors, fn);
+    }
+
+    onResponse<T = unknown>(fn: ResponseInterceptor<T>): () => void {
+        const item = fn as ResponseInterceptor;
+        this.resInterceptors.push(item);
+        return () => this.remove(this.resInterceptors, item);
+    }
+
+    onError(fn: ErrorInterceptor): () => void {
+        this.errInterceptors.push(fn);
+        return () => this.remove(this.errInterceptors, fn);
+    }
+
+    async request<T = unknown>(config: RequestConfig): Promise<ApiResponse<T>> {
+        let cfg: RequestConfig = {
+            method: "GET",
+            ...config,
+            headers: { ...this.defaultHeaders, ...config.headers },
+        };
+
+        for (const fn of this.reqInterceptors) {
+            cfg = await fn(cfg);
+        }
+
+        try {
+            const res = await this.send<T>(this.resolveUrl(cfg.url), cfg);
+            for (const fn of this.resInterceptors) {
+                const next = await fn(res as ApiResponse<unknown>);
+                if (next !== undefined) return next as ApiResponse<T>;
+            }
+            return res;
+        } catch (e) {
+            const err = e as Error;
+            for (const fn of this.errInterceptors) {
+                await fn(err);
+            }
+            throw err;
+        }
+    }
+
+    get<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "GET", data });
+    }
+
+    post<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "POST", data });
+    }
+
+    put<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "PUT", data });
+    }
+
+    del<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "DELETE", data });
+    }
+
+    upload(config: UploadConfig): Promise<UploadResult> {
+        const fileName = config.fileName ?? config.filePath.split("/").pop() ?? "file";
+        const server = config.type === "local" && config.url ? config.url : config.server;
+        const formData = config.type === "local"
+            ? (config.credentials ?? {})
+            : getAdapter(config.type).buildFormData({
+                filePath: config.filePath,
+                fileName,
+                credentials: config.credentials,
+            });
+
+        return new Promise((resolve, reject) => {
+            uni.uploadFile({
+                url: server,
+                filePath: config.filePath,
+                name: "file",
+                formData: formData as unknown as UniNamespace.UploadFileOption["formData"],
+                header: config.header as Record<string, string>,
+                success: (res) => {
+                    if (res.statusCode < 200 || res.statusCode >= 300) {
+                        reject(new Error(`上传失败: ${res.statusCode}`));
+                        return;
+                    }
+
+                    try {
+                        const body = JSON.parse(res.data);
+                        resolve({
+                            code: body.code ?? 1,
+                            msg: body.msg ?? body.message ?? "上传成功",
+                            data: body.data ?? "",
+                        });
+                    } catch {
+                        resolve({ code: 1, msg: "上传成功", data: res.data });
+                    }
+                },
+                fail: (err) => reject(new Error(err.errMsg || "上传失败")),
+            });
+        });
+    }
+
+    resolveServiceUrl(namespace: string, url: string, servicePrefix = ""): string {
+        if (isAbsolute(url)) return url;
+
+        const ns = namespace.replace(/^\/+|\/+$/g, "").replace(/\//g, ".");
+        const prefixValue = servicePrefix.replace(/^\/+|\/+$/g, "");
+        const path = url.startsWith("/") ? url : `/${url}`;
+        const prefix = [prefixValue, ns].filter(Boolean).join("/");
+
+        return prefix ? `/${prefix}${path}` : path;
+    }
+
+    private resolveUrl(url: string): string {
+        if (isAbsolute(url)) return url;
+        return `${this.baseURL}${url}`;
+    }
+
+    private send<T>(url: string, cfg: RequestConfig): Promise<ApiResponse<T>> {
+        return new Promise((resolve, reject) => {
+            uni.request({
+                url,
+                method: cfg.method,
+                data: cfg.data as UniNamespace.RequestOptions["data"],
+                header: cfg.headers as Record<string, string>,
+                timeout: cfg.timeout,
+                success: (res) => {
+                    if (res.statusCode >= 200 && res.statusCode < 300) {
+                        resolve(res.data as ApiResponse<T>);
+                        return;
+                    }
+
+                    const body = res.data as Record<string, unknown> | undefined;
+                    reject(new Error(String(body?.info ?? body?.message ?? `请求失败: ${res.statusCode}`)));
+                },
+                fail: (err) => reject(new Error(err.errMsg || "网络请求失败")),
+            });
+        });
+    }
+
+    private remove<T>(items: T[], item: T): void {
+        const index = items.indexOf(item);
+        if (index > -1) items.splice(index, 1);
+    }
+}
+
+function isAbsolute(url: string): boolean {
+    return /^(https?:)?\/\//.test(url) || url.startsWith("file://");
+}
+
+const requestClient = new UniRequestClient();
+
+export function useRequest(): RequestClient {
+    return requestClient;
+}
+
+export function useUpload() {
+    const uploading = ref(false);
+
+    async function upload(options: UploadConfig): Promise<UploadResult> {
+        uploading.value = true;
+        try {
+            return await requestClient.upload(options);
+        } finally {
+            uploading.value = false;
+        }
+    }
+
+    return { uploading, upload };
+}

package/src/composables/request/index.ts

@@ -0,0 +1,15 @@
+export { useRequest, useUpload } from "./client";
+export { BaseService, ServiceNamespace, ServicePrefix } from "./service";
+export type { RequestClient } from "./client";
+export type {
+    ApiResponse,
+    PageResult,
+    RequestConfig,
+    RequestInterceptor,
+    ResponseInterceptor,
+    ErrorInterceptor,
+    UploadConfig,
+    UploadResult,
+} from "./types";
+export type { ServiceNamespaceOptions, ServicePrefixOptions, ServiceRequestConfig } from "./service";
+export * from "./adapters";

package/src/composables/request/service.ts

@@ -0,0 +1,54 @@
+import { useRequest } from "./client";
+import type { ApiResponse, RequestConfig } from "./types";
+
+export type ServiceRequestConfig = Omit<RequestConfig, "url"> & {
+    url: string;
+};
+
+export interface ServiceNamespaceOptions {
+    namespace: string;
+}
+
+export interface ServicePrefixOptions {
+    prefix: string;
+}
+
+export class BaseService {
+    declare namespace: string;
+    declare servicePrefix: string;
+
+    request<T = unknown>(options: ServiceRequestConfig): Promise<ApiResponse<T>> {
+        return useRequest().request<T>({
+            ...options,
+            url: useRequest().resolveServiceUrl(this.namespace ?? "", options.url, this.servicePrefix ?? ""),
+        });
+    }
+
+    get<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "GET", data });
+    }
+
+    post<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "POST", data });
+    }
+
+    put<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "PUT", data });
+    }
+
+    del<T = unknown>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+        return this.request<T>({ url, method: "DELETE", data });
+    }
+}
+
+export function ServiceNamespace(value: string | ServiceNamespaceOptions) {
+    return function (target: { prototype: { namespace?: string } }) {
+        target.prototype.namespace = typeof value === "string" ? value : value.namespace;
+    };
+}
+
+export function ServicePrefix(value: string | ServicePrefixOptions) {
+    return function (target: { prototype: { servicePrefix?: string } }) {
+        target.prototype.servicePrefix = typeof value === "string" ? value : value.prefix;
+    };
+}

package/src/composables/{http → request}/types.ts

@@ -1,7 +1,3 @@
-/**
- * HTTP 类型定义
- */
-
 /** API 统一响应格式 */
 export interface ApiResponse<T = unknown> {
     code: number;

package/src/composables/share/README.md

@@ -0,0 +1,53 @@
+# share 调用文档
+
+`useShare` 注册微信小程序分享给好友和分享到朋友圈，并尝试打开分享菜单。
+
+## 引入
+
+```ts
+import { useShare } from "@hlw-uni/mp-vue";
+```
+
+## 基础用法
+
+```ts
+useShare({
+    title: "好用的小程序",
+    path: "/pages/index/index?from=share",
+    imageUrl: "https://example.com/share.png",
+});
+```
+
+## 动态分享内容
+
+```ts
+const share = useShare(() => ({
+    title: detail.value.title,
+    path: `/pages/detail/index?id=${detail.value.id}`,
+    imageUrl: detail.value.cover,
+}));
+
+share.onShareAppMessage({
+    title: "覆盖好友分享标题",
+});
+```
+
+## API
+
+| 方法 | 说明 |
+| --- | --- |
+| `onShareAppMessage(config?)` | 注册好友分享 |
+| `onShareTimeline(config?)` | 注册朋友圈分享 |
+| `showShareMenu()` | 主动显示分享菜单 |
+
+同一个 `useShare` 实例中，好友分享和朋友圈分享各只注册一次。
+
+## ShareConfig
+
+```ts
+interface ShareConfig {
+    title?: string;
+    path?: string;
+    imageUrl?: string;
+}
+```