@tarojs/taro-h5 3.4.0-beta.2 → 3.4.2

package/dist/api/ui/navigation-bar/index.js

@@ -0,0 +1,42 @@
+import { MethodHandler } from '../../utils/handler';
+import { getParameterError, shouldBeObject, temporarilyNotSupport } from '../../utils';
+// 导航栏
+export const showNavigationBarLoading = temporarilyNotSupport('showNavigationBarLoading');
+export function setNavigationBarTitle(options) {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `setNavigationBarTitle:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { title, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'setNavigationBarTitle', success, fail, complete });
+    if (!title || typeof title !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'title',
+                correct: 'String',
+                wrong: title
+            })
+        });
+    }
+    if (document.title !== title) {
+        document.title = title;
+    }
+    return handle.success();
+}
+/**
+ * 设置页面导航条颜色
+ */
+export const setNavigationBarColor = (options) => {
+    const { backgroundColor, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'setNavigationBarColor', success, fail, complete });
+    const meta = document.createElement('meta');
+    meta.setAttribute('name', 'theme-color');
+    meta.setAttribute('content', backgroundColor);
+    document.head.appendChild(meta);
+    return handle.success();
+};
+export const hideNavigationBarLoading = temporarilyNotSupport('hideNavigationBarLoading');
+export const hideHomeButton = temporarilyNotSupport('hideHomeButton');

package/dist/api/ui/pull-down-refresh.js

@@ -0,0 +1,26 @@
+import Taro from '@tarojs/api';
+import { MethodHandler } from '../utils/handler';
+/**
+ * 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
+ */
+export const startPullDownRefresh = function ({ success, fail, complete } = {}) {
+    const handle = new MethodHandler({ name: 'startPullDownRefresh', success, fail, complete });
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroStartPullDownRefresh', {
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 停止当前页面下拉刷新。
+ */
+export const stopPullDownRefresh = function ({ success, fail, complete } = {}) {
+    const handle = new MethodHandler({ name: 'stopPullDownRefresh', success, fail, complete });
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroStopPullDownRefresh', {
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};

package/dist/api/ui/scroll/index.js

@@ -0,0 +1,83 @@
+import { Current } from '@tarojs/runtime';
+import { MethodHandler } from '../../utils/handler';
+import { getTimingFunc, easeInOut } from '../../utils';
+let timer;
+const FRAME_DURATION = 17;
+/**
+ * 将页面滚动到目标位置
+ */
+export const pageScrollTo = ({ scrollTop, selector = '', duration = 300, success, fail, complete }) => {
+    let scrollFunc;
+    const handle = new MethodHandler({ name: 'pageScrollTo', success, fail, complete });
+    return new Promise((resolve, reject) => {
+        var _a, _b;
+        try {
+            if (scrollTop === undefined && !selector) {
+                return handle.fail({
+                    errMsg: 'scrollTop" 或 "selector" 需要其之一'
+                }, reject);
+            }
+            const id = (_b = (_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1');
+            const el = (id
+                ? document.querySelector(`.taro_page#${id}`)
+                : document.querySelector('.taro_page') ||
+                    document.querySelector('.taro_router'));
+            if (!scrollFunc) {
+                if (!el) {
+                    scrollFunc = pos => {
+                        if (pos === undefined) {
+                            return window.pageYOffset;
+                        }
+                        else {
+                            window.scrollTo(0, pos);
+                        }
+                    };
+                }
+                else {
+                    scrollFunc = pos => {
+                        if (pos === undefined) {
+                            return el.scrollTop;
+                        }
+                        else {
+                            el.scrollTop = pos;
+                        }
+                    };
+                }
+            }
+            if (scrollTop && selector) {
+                console.warn('"scrollTop" 或 "selector" 建议只设一个值，全部设置会忽略selector');
+            }
+            const from = scrollFunc();
+            let to;
+            if (typeof scrollTop === 'number') {
+                to = scrollTop;
+            }
+            else {
+                const el = document.querySelector(selector);
+                to = (el === null || el === void 0 ? void 0 : el.offsetTop) || 0;
+            }
+            const delta = to - from;
+            const frameCnt = duration / FRAME_DURATION;
+            const easeFunc = getTimingFunc(easeInOut, frameCnt);
+            const scroll = (frame = 0) => {
+                const dest = from + delta * easeFunc(frame);
+                scrollFunc(dest);
+                if (frame < frameCnt) {
+                    timer && clearTimeout(timer);
+                    timer = setTimeout(() => {
+                        scroll(frame + 1);
+                    }, FRAME_DURATION);
+                }
+                else {
+                    return handle.success({}, resolve);
+                }
+            };
+            scroll();
+        }
+        catch (e) {
+            return handle.fail({
+                errMsg: e.message
+            }, reject);
+        }
+    });
+};

package/dist/api/ui/sticky.js

@@ -0,0 +1,3 @@
+import { temporarilyNotSupport } from '../utils';
+// 置顶
+export const setTopBarText = temporarilyNotSupport('setTopBarText');

package/dist/api/ui/tab-bar.js

@@ -0,0 +1,282 @@
+import Taro from '@tarojs/api';
+import { shouldBeObject, getParameterError, isValidColor } from '../utils';
+import { MethodHandler } from '../utils/handler';
+let tabConf;
+export function initTabBarApis(config = {}) {
+    tabConf = config.tabBar;
+}
+/**
+ * 显示 tabBar 某一项的右上角的红点
+ */
+export const showTabBarRedDot = (options) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `showTabBarRedDot:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { index, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showTabBarRedDot', success, fail, complete });
+    if (typeof index !== 'number') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'index',
+                correct: 'Number',
+                wrong: index
+            })
+        });
+    }
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroShowTabBarRedDotHandler', {
+            index,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 显示 tabBar
+ */
+export const showTabBar = (options = {}) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `showTabBar:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { animation, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showTabBar', success, fail, complete });
+    if (options.hasOwnProperty('animation') && typeof animation !== 'boolean') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'animation',
+                correct: 'Boolean',
+                wrong: animation
+            })
+        });
+    }
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroShowTabBar', {
+            animation,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 动态设置 tabBar 的整体样式
+ */
+export const setTabBarStyle = (options = {}) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `setTabBarStyle:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { color, selectedColor, backgroundColor, borderStyle, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'setTabBarStyle', success, fail, complete });
+    let errMsg;
+    if (color && !isValidColor(color)) {
+        errMsg = 'color';
+    }
+    else if (selectedColor && !isValidColor(selectedColor)) {
+        errMsg = 'selectedColor';
+    }
+    else if (backgroundColor && !isValidColor(backgroundColor)) {
+        errMsg = 'backgroundColor';
+    }
+    else if (borderStyle && !/^(black|white)$/.test(borderStyle)) {
+        errMsg = 'borderStyle';
+    }
+    if (errMsg) {
+        return handle.fail({ errMsg: `invalid ${errMsg}` });
+    }
+    if (!tabConf) {
+        return handle.fail();
+    }
+    const obj = {};
+    if (color)
+        obj.color = color;
+    if (selectedColor)
+        obj.selectedColor = selectedColor;
+    if (backgroundColor)
+        obj.backgroundColor = backgroundColor;
+    if (borderStyle)
+        obj.borderStyle = borderStyle;
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroSetTabBarStyle', {
+            color,
+            selectedColor,
+            backgroundColor,
+            borderStyle,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 动态设置 tabBar 某一项的内容
+ */
+export const setTabBarItem = (options) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `setTabBarItem:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { index, text, iconPath, selectedIconPath, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'setTabBarItem', success, fail, complete });
+    if (typeof index !== 'number') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'index',
+                correct: 'Number',
+                wrong: index
+            })
+        });
+    }
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroSetTabBarItem', {
+            index,
+            text,
+            iconPath,
+            selectedIconPath,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 为 tabBar 某一项的右上角添加文本
+ */
+export const setTabBarBadge = (options) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `setTabBarBadge:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { index, text, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'setTabBarBadge', success, fail, complete });
+    if (typeof index !== 'number') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'index',
+                correct: 'Number',
+                wrong: index
+            })
+        });
+    }
+    if (typeof text !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'text',
+                correct: 'String',
+                wrong: text
+            })
+        });
+    }
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroSetTabBarBadge', {
+            index,
+            text,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 移除 tabBar 某一项右上角的文本
+ */
+export const removeTabBarBadge = (options) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `removeTabBarBadge:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { index, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'removeTabBarBadge', success, fail, complete });
+    if (typeof index !== 'number') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'index',
+                correct: 'Number',
+                wrong: index
+            })
+        });
+    }
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroRemoveTabBarBadge', {
+            index,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 隐藏 tabBar 某一项的右上角的红点
+ */
+export const hideTabBarRedDot = (options) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `hideTabBarRedDot:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { index, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'hideTabBarRedDot', success, fail, complete });
+    if (typeof index !== 'number') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'index',
+                correct: 'Number',
+                wrong: index
+            })
+        });
+    }
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroHideTabBarRedDotHandler', {
+            index,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};
+/**
+ * 隐藏 tabBar
+ */
+export const hideTabBar = (options = {}) => {
+    // options must be an Object
+    const isObject = shouldBeObject(options);
+    if (!isObject.flag) {
+        const res = { errMsg: `hideTabBar:fail ${isObject.msg}` };
+        console.error(res.errMsg);
+        return Promise.reject(res);
+    }
+    const { animation, success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'hideTabBar', success, fail, complete });
+    if (options.hasOwnProperty('animation') && typeof animation !== 'boolean') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'animation',
+                correct: 'Boolean',
+                wrong: animation
+            })
+        });
+    }
+    return new Promise((resolve, reject) => {
+        Taro.eventCenter.trigger('__taroHideTabBar', {
+            animation,
+            successHandler: (res = {}) => handle.success(res, resolve),
+            errorHandler: (res = {}) => handle.fail(res, reject)
+        });
+    });
+};

package/dist/api/ui/window.js

@@ -0,0 +1,31 @@
+import { temporarilyNotSupport } from '../utils';
+import { CallbackManager } from '../utils/handler';
+const callbackManager = new CallbackManager();
+const resizeListener = () => {
+    callbackManager.trigger({
+        windowWidth: window.screen.width,
+        windowHeight: window.screen.height
+    });
+};
+/**
+ * 设置窗口大小，该接口仅适用于 PC 平台，使用细则请参见指南
+ */
+export const setWindowSize = temporarilyNotSupport('setWindowSize');
+/**
+ * 监听窗口尺寸变化事件
+ */
+export const onWindowResize = callback => {
+    callbackManager.add(callback);
+    if (callbackManager.count() === 1) {
+        window.addEventListener('resize', resizeListener);
+    }
+};
+/**
+ * 取消监听窗口尺寸变化事件
+ */
+export const offWindowResize = callback => {
+    callbackManager.remove(callback);
+    if (callbackManager.count() === 0) {
+        window.removeEventListener('resize', resizeListener);
+    }
+};

package/dist/api/utils/handler.js

@@ -0,0 +1,80 @@
+export class MethodHandler {
+    constructor({ name, success, fail, complete }) {
+        this.methodName = name;
+        this.__success = success;
+        this.__fail = fail;
+        this.__complete = complete;
+    }
+    success(res = {}, resolve = Promise.resolve.bind(Promise)) {
+        if (!res.errMsg) {
+            res.errMsg = `${this.methodName}:ok`;
+        }
+        typeof this.__success === 'function' && this.__success(res);
+        typeof this.__complete === 'function' && this.__complete(res);
+        return resolve(res);
+    }
+    fail(res = {}, reject = Promise.reject.bind(Promise)) {
+        if (!res.errMsg) {
+            res.errMsg = `${this.methodName}:fail`;
+        }
+        else {
+            res.errMsg = `${this.methodName}:fail ${res.errMsg}`;
+        }
+        console.error(res.errMsg);
+        typeof this.__fail === 'function' && this.__fail(res);
+        typeof this.__complete === 'function' && this.__complete(res);
+        return reject(res);
+    }
+}
+export class CallbackManager {
+    constructor() {
+        this.callbacks = [];
+        /**
+         * 添加回调
+         * @param {{ callback: function, ctx: any } | function} opt
+         */
+        this.add = (opt) => {
+            if (opt)
+                this.callbacks.push(opt);
+        };
+        /**
+         * 移除回调
+         * @param {{ callback: function, ctx: any } | function} opt
+         */
+        this.remove = (opt) => {
+            if (opt) {
+                let pos = -1;
+                this.callbacks.forEach((callback, k) => {
+                    if (callback === opt) {
+                        pos = k;
+                    }
+                });
+                if (pos > -1) {
+                    this.callbacks.splice(pos, 1);
+                }
+            }
+        };
+        /**
+         * 获取回调函数数量
+         * @return {number}
+         */
+        this.count = () => {
+            return this.callbacks.length;
+        };
+        /**
+         * 触发回调
+         * @param  {...any} args 回调的调用参数
+         */
+        this.trigger = (...args) => {
+            this.callbacks.forEach(opt => {
+                if (typeof opt === 'function') {
+                    opt(...args);
+                }
+                else {
+                    const { callback, ctx } = opt;
+                    typeof callback === 'function' && callback.call(ctx, ...args);
+                }
+            });
+        };
+    }
+}