@tarojs/taro-h5 3.4.0-beta.2 → 3.4.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/api/ad/index.js +4 -0
- package/dist/api/ai/facial.js +5 -0
- package/dist/api/ai/index.js +2 -0
- package/dist/api/ai/visual.js +3 -0
- package/dist/api/alipay/index.js +3 -0
- package/dist/api/base/crypto.js +3 -0
- package/dist/api/base/debug.js +4 -0
- package/dist/api/base/index.js +17 -0
- package/dist/api/base/performance.js +4 -0
- package/dist/api/base/system/index.js +2 -0
- package/dist/api/base/system/info.js +57 -0
- package/dist/api/base/system/network.js +63 -0
- package/dist/api/base/update.js +4 -0
- package/dist/api/base/weapp/app-event.js +18 -0
- package/dist/api/base/weapp/life-cycle.js +4 -0
- package/dist/api/canvas/CanvasContext.js +191 -0
- package/dist/api/canvas/canvasGetImageData.js +25 -0
- package/dist/api/canvas/canvasPutImageData.js +22 -0
- package/dist/api/canvas/canvasToTempFilePath.js +22 -0
- package/dist/api/canvas/createCanvasContext.js +16 -0
- package/dist/api/canvas/index.js +8 -0
- package/dist/api/cloud/index.js +17 -0
- package/dist/api/data-analysis/index.js +5 -0
- package/dist/api/device/accelerometer.js +83 -0
- package/dist/api/device/accessibility.js +3 -0
- package/dist/api/device/battery.js +4 -0
- package/dist/api/device/bluetooth-ble.js +18 -0
- package/dist/api/device/bluetooth-peripheral.js +5 -0
- package/dist/api/device/bluetooth.js +15 -0
- package/dist/api/device/calendar.js +4 -0
- package/dist/api/device/clipboard.js +65 -0
- package/dist/api/device/compass.js +64 -0
- package/dist/api/device/contact.js +4 -0
- package/dist/api/device/crypto.js +3 -0
- package/dist/api/device/gyroscope.js +6 -0
- package/dist/api/device/iBeacon.js +9 -0
- package/dist/api/device/index.js +22 -0
- package/dist/api/device/keyboard.js +6 -0
- package/dist/api/device/memory.js +4 -0
- package/dist/api/device/motion.js +81 -0
- package/dist/api/device/nfc.js +9 -0
- package/dist/api/device/phone.js +24 -0
- package/dist/api/device/scan.js +6 -0
- package/dist/api/device/screen.js +8 -0
- package/dist/api/device/vibrate.js +35 -0
- package/dist/api/device/wifi.js +12 -0
- package/dist/api/ext/index.js +4 -0
- package/dist/api/files/index.js +10 -0
- package/dist/api/framework/index.js +7 -0
- package/dist/api/index.js +24 -0
- package/dist/api/location/chooseLocation.js +93 -0
- package/dist/api/location/index.js +13 -0
- package/dist/api/location/style.css +79 -0
- package/dist/api/media/audio/index.js +88 -0
- package/dist/api/media/background-audio.js +11 -0
- package/dist/api/media/camera.js +3 -0
- package/dist/api/media/editor.js +18 -0
- package/dist/api/media/image/chooseImage.js +74 -0
- package/dist/api/media/image/getImageInfo.js +31 -0
- package/dist/api/media/image/index.js +9 -0
- package/dist/api/media/image/previewImage.js +67 -0
- package/dist/api/media/index.js +13 -0
- package/dist/api/media/live.js +4 -0
- package/dist/api/media/map.js +3 -0
- package/dist/api/media/media-recorder.js +3 -0
- package/dist/api/media/recorder.js +5 -0
- package/dist/api/media/video/index.js +74 -0
- package/dist/api/media/video-decoder.js +3 -0
- package/dist/api/media/video-processing.js +3 -0
- package/dist/api/media/voip.js +16 -0
- package/dist/api/navigate/index.js +6 -0
- package/dist/api/network/download.js +124 -0
- package/dist/api/network/index.js +7 -0
- package/dist/api/network/mdns.js +12 -0
- package/dist/api/network/request/index.js +125 -0
- package/dist/api/network/tcp.js +3 -0
- package/dist/api/network/udp.js +3 -0
- package/dist/api/network/upload.js +151 -0
- package/dist/api/network/utils.js +65 -0
- package/dist/api/network/websocket/index.js +70 -0
- package/dist/api/network/websocket/socketTask.js +63 -0
- package/dist/api/open-api/account.js +3 -0
- package/dist/api/open-api/address.js +3 -0
- package/dist/api/open-api/authorize.js +4 -0
- package/dist/api/open-api/card.js +4 -0
- package/dist/api/open-api/channels-live.js +8 -0
- package/dist/api/open-api/customer-service.js +3 -0
- package/dist/api/open-api/facial.js +6 -0
- package/dist/api/open-api/favorites.js +4 -0
- package/dist/api/open-api/group.js +3 -0
- package/dist/api/open-api/index.js +18 -0
- package/dist/api/open-api/invoice.js +4 -0
- package/dist/api/open-api/license-plate.js +3 -0
- package/dist/api/open-api/login.js +5 -0
- package/dist/api/open-api/red-package.js +3 -0
- package/dist/api/open-api/settings.js +4 -0
- package/dist/api/open-api/soter.js +5 -0
- package/dist/api/open-api/subscribe-message.js +3 -0
- package/dist/api/open-api/user-info.js +4 -0
- package/dist/api/open-api/werun.js +4 -0
- package/dist/api/payment/index.js +4 -0
- package/dist/api/route/index.js +3 -0
- package/dist/api/share/index.js +12 -0
- package/dist/api/storage/background-fetch.js +6 -0
- package/dist/api/storage/index.js +157 -0
- package/dist/api/swan/index.js +26 -0
- package/dist/api/taro.js +47 -0
- package/dist/api/ui/animation/index.js +284 -0
- package/dist/api/ui/background.js +4 -0
- package/dist/api/ui/custom-component.js +3 -0
- package/dist/api/ui/fonts.js +3 -0
- package/dist/api/ui/index.js +12 -0
- package/dist/api/ui/interaction/actionSheet.js +188 -0
- package/dist/api/ui/interaction/index.js +268 -0
- package/dist/api/ui/interaction/modal.js +207 -0
- package/dist/api/ui/interaction/toast.js +195 -0
- package/dist/api/ui/menu.js +3 -0
- package/dist/api/ui/navigation-bar/index.js +42 -0
- package/dist/api/ui/pull-down-refresh.js +26 -0
- package/dist/api/ui/scroll/index.js +83 -0
- package/dist/api/ui/sticky.js +3 -0
- package/dist/api/ui/tab-bar.js +282 -0
- package/dist/api/ui/window.js +31 -0
- package/dist/api/utils/handler.js +80 -0
- package/dist/api/utils/index.js +148 -0
- package/dist/api/worker/index.js +3 -0
- package/dist/api/wxml/index.js +6 -0
- package/dist/api/wxml/nodesRef.js +42 -0
- package/dist/api/wxml/selectorQuery.js +201 -0
- package/dist/index.cjs.js +4626 -6915
- package/dist/index.js +4 -10767
- package/dist/types/type.js +2 -0
- package/package.json +10 -13
- package/src/api/canvas/CanvasContext.ts +35 -32
- package/src/api/canvas/createCanvasContext.ts +2 -2
- package/src/api/location/chooseLocation.ts +2 -2
- package/src/api/media/audio/index.ts +16 -16
- package/src/api/media/image/previewImage.ts +4 -25
- package/src/api/network/download.ts +5 -5
- package/src/api/network/upload.ts +5 -5
- package/src/api/network/websocket/index.ts +1 -1
- package/src/api/ui/animation/index.ts +1 -6
- package/src/api/ui/interaction/index.ts +6 -4
- package/src/api/ui/navigation-bar/index.ts +1 -1
- package/src/api/wxml/nodesRef.ts +10 -3
- package/src/api/wxml/selectorQuery.ts +68 -23
- package/src/index.ts +2 -2
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { shouldBeObject, getParameterError, temporarilyNotSupport } from '../utils';
|
|
2
|
+
import { MethodHandler } from '../utils/handler';
|
|
3
|
+
function getItem(key) {
|
|
4
|
+
let item;
|
|
5
|
+
try {
|
|
6
|
+
item = JSON.parse(localStorage.getItem(key) || '');
|
|
7
|
+
}
|
|
8
|
+
catch (e) { }
|
|
9
|
+
// 只返回使用 Taro.setStorage API 存储的数据
|
|
10
|
+
if (item && typeof item === 'object' && item.hasOwnProperty('data')) {
|
|
11
|
+
return { result: true, data: item.data };
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
return { result: false };
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
// 数据缓存
|
|
18
|
+
export const setStorageSync = (key, data = '') => {
|
|
19
|
+
if (typeof key !== 'string') {
|
|
20
|
+
console.error(getParameterError({
|
|
21
|
+
name: 'setStorage',
|
|
22
|
+
correct: 'String',
|
|
23
|
+
wrong: key
|
|
24
|
+
}));
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const type = typeof data;
|
|
28
|
+
let obj = {};
|
|
29
|
+
if (type === 'symbol') {
|
|
30
|
+
obj = { data: '' };
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
obj = { data };
|
|
34
|
+
}
|
|
35
|
+
localStorage.setItem(key, JSON.stringify(obj));
|
|
36
|
+
};
|
|
37
|
+
export const setStorage = (options) => {
|
|
38
|
+
// options must be an Object
|
|
39
|
+
const isObject = shouldBeObject(options);
|
|
40
|
+
if (!isObject.flag) {
|
|
41
|
+
const res = { errMsg: `setStorage:fail ${isObject.msg}` };
|
|
42
|
+
console.error(res.errMsg);
|
|
43
|
+
return Promise.reject(res);
|
|
44
|
+
}
|
|
45
|
+
const { key, data, success, fail, complete } = options;
|
|
46
|
+
const handle = new MethodHandler({ name: 'setStorage', success, fail, complete });
|
|
47
|
+
if (typeof key !== 'string') {
|
|
48
|
+
return handle.fail({
|
|
49
|
+
errMsg: getParameterError({
|
|
50
|
+
para: 'key',
|
|
51
|
+
correct: 'String',
|
|
52
|
+
wrong: key
|
|
53
|
+
})
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
setStorageSync(key, data);
|
|
57
|
+
return handle.success();
|
|
58
|
+
};
|
|
59
|
+
export const revokeBufferURL = temporarilyNotSupport('revokeBufferURL');
|
|
60
|
+
export const removeStorageSync = (key) => {
|
|
61
|
+
if (typeof key !== 'string') {
|
|
62
|
+
console.error(getParameterError({
|
|
63
|
+
name: 'removeStorage',
|
|
64
|
+
correct: 'String',
|
|
65
|
+
wrong: key
|
|
66
|
+
}));
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
localStorage.removeItem(key);
|
|
70
|
+
};
|
|
71
|
+
export const removeStorage = (options) => {
|
|
72
|
+
// options must be an Object
|
|
73
|
+
const isObject = shouldBeObject(options);
|
|
74
|
+
if (!isObject.flag) {
|
|
75
|
+
const res = { errMsg: `removeStorage:fail ${isObject.msg}` };
|
|
76
|
+
console.error(res.errMsg);
|
|
77
|
+
return Promise.reject(res);
|
|
78
|
+
}
|
|
79
|
+
const { key, success, fail, complete } = options;
|
|
80
|
+
const handle = new MethodHandler({ name: 'removeStorage', success, fail, complete });
|
|
81
|
+
if (typeof key !== 'string') {
|
|
82
|
+
return handle.fail({
|
|
83
|
+
errMsg: getParameterError({
|
|
84
|
+
para: 'key',
|
|
85
|
+
correct: 'String',
|
|
86
|
+
wrong: key
|
|
87
|
+
})
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
removeStorageSync(key);
|
|
91
|
+
return handle.success();
|
|
92
|
+
};
|
|
93
|
+
export const getStorageSync = (key) => {
|
|
94
|
+
if (typeof key !== 'string') {
|
|
95
|
+
console.error(getParameterError({
|
|
96
|
+
name: 'getStorageSync',
|
|
97
|
+
correct: 'String',
|
|
98
|
+
wrong: key
|
|
99
|
+
}));
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
const res = getItem(key);
|
|
103
|
+
if (res.result)
|
|
104
|
+
return res.data;
|
|
105
|
+
return '';
|
|
106
|
+
};
|
|
107
|
+
export const getStorageInfoSync = () => {
|
|
108
|
+
const res = {
|
|
109
|
+
keys: Object.keys(localStorage),
|
|
110
|
+
limitSize: NaN,
|
|
111
|
+
currentSize: NaN
|
|
112
|
+
};
|
|
113
|
+
return res;
|
|
114
|
+
};
|
|
115
|
+
export const getStorageInfo = ({ success, fail, complete } = {}) => {
|
|
116
|
+
const handle = new MethodHandler({ name: 'getStorageInfo', success, fail, complete });
|
|
117
|
+
return handle.success(getStorageInfoSync());
|
|
118
|
+
};
|
|
119
|
+
export const getStorage = (options) => {
|
|
120
|
+
// options must be an Object
|
|
121
|
+
const isObject = shouldBeObject(options);
|
|
122
|
+
if (!isObject.flag) {
|
|
123
|
+
const res = { errMsg: `getStorage:fail ${isObject.msg}` };
|
|
124
|
+
console.error(res.errMsg);
|
|
125
|
+
return Promise.reject(res);
|
|
126
|
+
}
|
|
127
|
+
const { key, success, fail, complete } = options;
|
|
128
|
+
const handle = new MethodHandler({ name: 'getStorage', success, fail, complete });
|
|
129
|
+
if (typeof key !== 'string') {
|
|
130
|
+
return handle.fail({
|
|
131
|
+
errMsg: getParameterError({
|
|
132
|
+
para: 'key',
|
|
133
|
+
correct: 'String',
|
|
134
|
+
wrong: key
|
|
135
|
+
})
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
const { result, data } = getItem(key);
|
|
139
|
+
if (result) {
|
|
140
|
+
return handle.success({ data });
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
return handle.fail({
|
|
144
|
+
errMsg: 'data not found'
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
export const createBufferURL = temporarilyNotSupport('createBufferURL');
|
|
149
|
+
export const clearStorageSync = () => {
|
|
150
|
+
localStorage.clear();
|
|
151
|
+
};
|
|
152
|
+
export const clearStorage = ({ success, fail, complete } = {}) => {
|
|
153
|
+
const handle = new MethodHandler({ name: 'clearStorage', success, fail, complete });
|
|
154
|
+
clearStorageSync();
|
|
155
|
+
return handle.success();
|
|
156
|
+
};
|
|
157
|
+
export * from './background-fetch';
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { temporarilyNotSupport } from '../utils';
|
|
2
|
+
export const setPageInfo = temporarilyNotSupport('setPageInfo');
|
|
3
|
+
// 百度小程序 AI 相关
|
|
4
|
+
export const ocrIdCard = temporarilyNotSupport('ocrIdCard');
|
|
5
|
+
export const ocrBankCard = temporarilyNotSupport('ocrBankCard');
|
|
6
|
+
export const ocrDrivingLicense = temporarilyNotSupport('ocrDrivingLicense');
|
|
7
|
+
export const ocrVehicleLicense = temporarilyNotSupport('ocrVehicleLicense');
|
|
8
|
+
export const textReview = temporarilyNotSupport('textReview');
|
|
9
|
+
export const textToAudio = temporarilyNotSupport('textToAudio');
|
|
10
|
+
export const imageAudit = temporarilyNotSupport('imageAudit');
|
|
11
|
+
export const advancedGeneralIdentify = temporarilyNotSupport('advancedGeneralIdentify');
|
|
12
|
+
export const objectDetectIdentify = temporarilyNotSupport('objectDetectIdentify');
|
|
13
|
+
export const carClassify = temporarilyNotSupport('carClassify');
|
|
14
|
+
export const dishClassify = temporarilyNotSupport('dishClassify');
|
|
15
|
+
export const logoClassify = temporarilyNotSupport('logoClassify');
|
|
16
|
+
export const animalClassify = temporarilyNotSupport('animalClassify');
|
|
17
|
+
export const plantClassify = temporarilyNotSupport('plantClassify');
|
|
18
|
+
// 用户信息
|
|
19
|
+
export const getSwanId = temporarilyNotSupport('getSwanId');
|
|
20
|
+
// 百度收银台支付
|
|
21
|
+
export const requestPolymerPayment = temporarilyNotSupport('requestPolymerPayment');
|
|
22
|
+
// 打开小程序
|
|
23
|
+
export const navigateToSmartGameProgram = temporarilyNotSupport('navigateToSmartGameProgram');
|
|
24
|
+
export const navigateToSmartProgram = temporarilyNotSupport('navigateToSmartProgram');
|
|
25
|
+
export const navigateBackSmartProgram = temporarilyNotSupport('navigateBackSmartProgram');
|
|
26
|
+
export const preloadSubPackage = temporarilyNotSupport('preloadSubPackage');
|
package/dist/api/taro.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import Taro from '@tarojs/api';
|
|
2
|
+
import { history, createRouter } from '@tarojs/router';
|
|
3
|
+
import { getApp, getCurrentInstance, getCurrentPages, nextTick, navigateBack, navigateTo, reLaunch, redirectTo, switchTab } from '../api';
|
|
4
|
+
import { permanentlyNotSupport } from '../api/utils';
|
|
5
|
+
const { Behavior, getEnv, ENV_TYPE, Link, interceptors, getInitPxTransform, Current, options, eventCenter, Events, preload } = Taro;
|
|
6
|
+
const taro = {
|
|
7
|
+
// @ts-ignore
|
|
8
|
+
Behavior,
|
|
9
|
+
getEnv,
|
|
10
|
+
ENV_TYPE,
|
|
11
|
+
Link,
|
|
12
|
+
interceptors,
|
|
13
|
+
Current,
|
|
14
|
+
getCurrentInstance,
|
|
15
|
+
options,
|
|
16
|
+
nextTick,
|
|
17
|
+
eventCenter,
|
|
18
|
+
Events,
|
|
19
|
+
preload,
|
|
20
|
+
history,
|
|
21
|
+
createRouter,
|
|
22
|
+
navigateBack,
|
|
23
|
+
navigateTo,
|
|
24
|
+
reLaunch,
|
|
25
|
+
redirectTo,
|
|
26
|
+
getCurrentPages,
|
|
27
|
+
switchTab
|
|
28
|
+
};
|
|
29
|
+
const initPxTransform = getInitPxTransform(taro);
|
|
30
|
+
const requirePlugin = permanentlyNotSupport('requirePlugin');
|
|
31
|
+
const pxTransform = function (size) {
|
|
32
|
+
// @ts-ignore
|
|
33
|
+
const { designWidth } = taro.config;
|
|
34
|
+
return Math.ceil((((parseInt(size, 10) / 40) * 640) / designWidth) * 10000) / 10000 + 'rem';
|
|
35
|
+
};
|
|
36
|
+
const canIUseWebp = function () {
|
|
37
|
+
const canvas = document.createElement('canvas');
|
|
38
|
+
return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
|
|
39
|
+
};
|
|
40
|
+
taro.requirePlugin = requirePlugin;
|
|
41
|
+
taro.getApp = getApp;
|
|
42
|
+
taro.pxTransform = pxTransform;
|
|
43
|
+
taro.initPxTransform = initPxTransform;
|
|
44
|
+
// @ts-ignore
|
|
45
|
+
taro.canIUseWebp = canIUseWebp;
|
|
46
|
+
export default taro;
|
|
47
|
+
export { Behavior, getEnv, ENV_TYPE, Link, interceptors, initPxTransform, Current, options, eventCenter, Events, preload, requirePlugin, pxTransform, canIUseWebp, history, createRouter };
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* H5 下的 styleSheet 操作
|
|
3
|
+
* @author leeenx
|
|
4
|
+
*/
|
|
5
|
+
class StyleSheet {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.appendStyleSheet = () => {
|
|
8
|
+
var _a, _b, _c;
|
|
9
|
+
(_a = this.$style) === null || _a === void 0 ? void 0 : _a.setAttribute('type', 'text/css');
|
|
10
|
+
(_b = this.$style) === null || _b === void 0 ? void 0 : _b.setAttribute('data-type', 'Taro');
|
|
11
|
+
document.getElementsByTagName('head')[0].appendChild(this.$style);
|
|
12
|
+
this.sheet = (_c = this.$style) === null || _c === void 0 ? void 0 : _c.sheet;
|
|
13
|
+
if (this.sheet && !('insertRule' in this.sheet)) {
|
|
14
|
+
console.warn('当前浏览器不支持 stylesheet.insertRule 接口');
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
// 添加样式命令
|
|
18
|
+
this.add = (cssText, index = 0) => {
|
|
19
|
+
var _a;
|
|
20
|
+
if (this.sheet === null) {
|
|
21
|
+
// $style 未插入到 DOM
|
|
22
|
+
this.appendStyleSheet();
|
|
23
|
+
}
|
|
24
|
+
(_a = this.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(cssText, index);
|
|
25
|
+
};
|
|
26
|
+
this.$style = document.createElement('style');
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
const styleSheet = new StyleSheet();
|
|
30
|
+
// 监听事件
|
|
31
|
+
let TRANSITION_END = 'transitionend';
|
|
32
|
+
let TRANSFORM = 'transform';
|
|
33
|
+
const $detect = document.createElement('div');
|
|
34
|
+
$detect.style.cssText = '-webkit-animation-name:webkit;-moz-animation-name:moz;-ms-animation-name:ms;animation-name:standard;';
|
|
35
|
+
if ($detect.style['animation-name'] === 'standard') {
|
|
36
|
+
// 支持标准写法
|
|
37
|
+
TRANSITION_END = 'transitionend';
|
|
38
|
+
TRANSFORM = 'transform';
|
|
39
|
+
}
|
|
40
|
+
else if ($detect.style['-webkit-animation-name'] === 'webkit') {
|
|
41
|
+
// webkit 前缀
|
|
42
|
+
TRANSITION_END = 'webkitTransitionEnd';
|
|
43
|
+
TRANSFORM = '-webkit-transform';
|
|
44
|
+
}
|
|
45
|
+
else if ($detect.style['-moz-animation-name'] === 'moz') {
|
|
46
|
+
// moz 前缀
|
|
47
|
+
TRANSITION_END = 'mozTransitionEnd';
|
|
48
|
+
TRANSFORM = '-moz-transform';
|
|
49
|
+
}
|
|
50
|
+
else if ($detect.style['-ms-animation-name'] === 'ms') {
|
|
51
|
+
// ms 前缀
|
|
52
|
+
TRANSITION_END = 'msTransitionEnd';
|
|
53
|
+
TRANSFORM = '-ms-transform';
|
|
54
|
+
}
|
|
55
|
+
let animId = 0;
|
|
56
|
+
class Animation {
|
|
57
|
+
constructor({ duration = 400, delay = 0, timingFunction = 'linear', transformOrigin = '50% 50% 0', unit = 'px' } = {}) {
|
|
58
|
+
// 属性组合
|
|
59
|
+
this.rules = [];
|
|
60
|
+
// transform 对象
|
|
61
|
+
this.transform = [`${TRANSFORM}:`];
|
|
62
|
+
// 组合动画
|
|
63
|
+
this.steps = [];
|
|
64
|
+
// 动画 map ----- 永久保留
|
|
65
|
+
this.animationMap = {};
|
|
66
|
+
// animationMap 的长度
|
|
67
|
+
this.animationMapCount = 0;
|
|
68
|
+
// 默认值
|
|
69
|
+
this.setDefault(duration, delay, timingFunction, transformOrigin);
|
|
70
|
+
this.unit = unit;
|
|
71
|
+
// atom 环境下,animation 属性不会显示,所以要改成 data-animation
|
|
72
|
+
let animAttr = 'animation';
|
|
73
|
+
// 动画 id
|
|
74
|
+
this.id = ++animId;
|
|
75
|
+
// 监听事件
|
|
76
|
+
document.body.addEventListener(TRANSITION_END, (e) => {
|
|
77
|
+
const target = e.target;
|
|
78
|
+
if (target.getAttribute(animAttr) === null) {
|
|
79
|
+
animAttr = 'data-animation';
|
|
80
|
+
}
|
|
81
|
+
const animData = target.getAttribute(animAttr);
|
|
82
|
+
// 没有动画存在
|
|
83
|
+
if (animData === null)
|
|
84
|
+
return;
|
|
85
|
+
const [animName, animPath] = animData.split('__');
|
|
86
|
+
if (animName === `taro-h5-poly-fill/${this.id}/create-animation`) {
|
|
87
|
+
const [animIndex, __stepIndex = 0] = animPath.split('--');
|
|
88
|
+
const stepIndex = Number(__stepIndex);
|
|
89
|
+
// 动画总的关键帧
|
|
90
|
+
const animStepsCount = this.animationMap[`${animName}__${animIndex}`];
|
|
91
|
+
const animStepsMaxIndex = animStepsCount - 1;
|
|
92
|
+
if (stepIndex < animStepsMaxIndex) {
|
|
93
|
+
// 播放下一个关键帧(因为 nerv 和 react 有差异所以 animation & data-animation 都需要写)
|
|
94
|
+
target.setAttribute(animAttr, `${animName}__${animIndex}--${stepIndex + 1}`);
|
|
95
|
+
if (animAttr === 'animation') {
|
|
96
|
+
// Nerv 环境,animation & data-animation 双重保险
|
|
97
|
+
target.setAttribute('data-animation', `${animName}__${animIndex}--${stepIndex + 1}`);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
transformUnit(...args) {
|
|
104
|
+
const ret = [];
|
|
105
|
+
args.forEach(each => {
|
|
106
|
+
ret.push(isNaN(each) ? each : `${each}${this.unit}`);
|
|
107
|
+
});
|
|
108
|
+
return ret;
|
|
109
|
+
}
|
|
110
|
+
// 设置默认值
|
|
111
|
+
setDefault(duration, delay, timingFunction, transformOrigin) {
|
|
112
|
+
this.DEFAULT = { duration, delay, timingFunction, transformOrigin };
|
|
113
|
+
}
|
|
114
|
+
matrix(a, b, c, d, tx, ty) {
|
|
115
|
+
this.transform.push(`matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`);
|
|
116
|
+
return this;
|
|
117
|
+
}
|
|
118
|
+
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
|
|
119
|
+
this.transform.push(`matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`);
|
|
120
|
+
return this;
|
|
121
|
+
}
|
|
122
|
+
rotate(angle) {
|
|
123
|
+
this.transform.push(`rotate(${angle}deg)`);
|
|
124
|
+
return this;
|
|
125
|
+
}
|
|
126
|
+
rotate3d(x, y, z, angle) {
|
|
127
|
+
if (typeof y !== 'number') {
|
|
128
|
+
this.transform.push(`rotate3d(${x})`);
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
this.transform.push(`rotate3d(${x}, ${y || 0}, ${z || 0}, ${angle || 0}deg)`);
|
|
132
|
+
}
|
|
133
|
+
return this;
|
|
134
|
+
}
|
|
135
|
+
rotateX(angle) {
|
|
136
|
+
this.transform.push(`rotateX(${angle}deg)`);
|
|
137
|
+
return this;
|
|
138
|
+
}
|
|
139
|
+
rotateY(angle) {
|
|
140
|
+
this.transform.push(`rotateY(${angle}deg)`);
|
|
141
|
+
return this;
|
|
142
|
+
}
|
|
143
|
+
rotateZ(angle) {
|
|
144
|
+
this.transform.push(`rotateZ(${angle}deg)`);
|
|
145
|
+
return this;
|
|
146
|
+
}
|
|
147
|
+
scale(x, y) {
|
|
148
|
+
this.transform.push(`scale(${x}, ${y})`);
|
|
149
|
+
return this;
|
|
150
|
+
}
|
|
151
|
+
scale3d(x, y, z) {
|
|
152
|
+
this.transform.push(`scale3d(${x}, ${y}, ${z})`);
|
|
153
|
+
return this;
|
|
154
|
+
}
|
|
155
|
+
scaleX(scale) {
|
|
156
|
+
this.transform.push(`scaleX(${scale})`);
|
|
157
|
+
return this;
|
|
158
|
+
}
|
|
159
|
+
scaleY(scale) {
|
|
160
|
+
this.transform.push(`scaleY(${scale})`);
|
|
161
|
+
return this;
|
|
162
|
+
}
|
|
163
|
+
scaleZ(scale) {
|
|
164
|
+
this.transform.push(`scaleZ(${scale})`);
|
|
165
|
+
return this;
|
|
166
|
+
}
|
|
167
|
+
skew(x, y) {
|
|
168
|
+
this.transform.push(`skew(${x}, ${y})`);
|
|
169
|
+
return this;
|
|
170
|
+
}
|
|
171
|
+
skewX(angle) {
|
|
172
|
+
this.transform.push(`skewX(${angle})`);
|
|
173
|
+
return this;
|
|
174
|
+
}
|
|
175
|
+
skewY(angle) {
|
|
176
|
+
this.transform.push(`skewY(${angle})`);
|
|
177
|
+
return this;
|
|
178
|
+
}
|
|
179
|
+
translate(x, y) {
|
|
180
|
+
[x, y] = this.transformUnit(x, y);
|
|
181
|
+
this.transform.push(`translate(${x}, ${y})`);
|
|
182
|
+
return this;
|
|
183
|
+
}
|
|
184
|
+
translate3d(x, y, z) {
|
|
185
|
+
[x, y, z] = this.transformUnit(x, y, z);
|
|
186
|
+
this.transform.push(`translate3d(${x}, ${y}, ${z})`);
|
|
187
|
+
return this;
|
|
188
|
+
}
|
|
189
|
+
translateX(translate) {
|
|
190
|
+
[translate] = this.transformUnit(translate);
|
|
191
|
+
this.transform.push(`translateX(${translate})`);
|
|
192
|
+
return this;
|
|
193
|
+
}
|
|
194
|
+
translateY(translate) {
|
|
195
|
+
[translate] = this.transformUnit(translate);
|
|
196
|
+
this.transform.push(`translateY(${translate})`);
|
|
197
|
+
return this;
|
|
198
|
+
}
|
|
199
|
+
translateZ(translate) {
|
|
200
|
+
[translate] = this.transformUnit(translate);
|
|
201
|
+
this.transform.push(`translateZ(${translate})`);
|
|
202
|
+
return this;
|
|
203
|
+
}
|
|
204
|
+
opacity(value) {
|
|
205
|
+
this.rules.push(`opacity: ${value}`);
|
|
206
|
+
return this;
|
|
207
|
+
}
|
|
208
|
+
backgroundColor(value) {
|
|
209
|
+
this.rules.push(`background-color: ${value}`);
|
|
210
|
+
return this;
|
|
211
|
+
}
|
|
212
|
+
width(value) {
|
|
213
|
+
[value] = this.transformUnit(value);
|
|
214
|
+
this.rules.push(`width: ${value}`);
|
|
215
|
+
return this;
|
|
216
|
+
}
|
|
217
|
+
height(value) {
|
|
218
|
+
[value] = this.transformUnit(value);
|
|
219
|
+
this.rules.push(`height: ${value}`);
|
|
220
|
+
return this;
|
|
221
|
+
}
|
|
222
|
+
top(value) {
|
|
223
|
+
[value] = this.transformUnit(value);
|
|
224
|
+
this.rules.push(`top: ${value}`);
|
|
225
|
+
return this;
|
|
226
|
+
}
|
|
227
|
+
right(value) {
|
|
228
|
+
[value] = this.transformUnit(value);
|
|
229
|
+
this.rules.push(`right: ${value}`);
|
|
230
|
+
return this;
|
|
231
|
+
}
|
|
232
|
+
bottom(value) {
|
|
233
|
+
[value] = this.transformUnit(value);
|
|
234
|
+
this.rules.push(`bottom: ${value}`);
|
|
235
|
+
return this;
|
|
236
|
+
}
|
|
237
|
+
left(value) {
|
|
238
|
+
[value] = this.transformUnit(value);
|
|
239
|
+
this.rules.push(`left: ${value}`);
|
|
240
|
+
return this;
|
|
241
|
+
}
|
|
242
|
+
// 关键帧载入
|
|
243
|
+
step(arg = {}) {
|
|
244
|
+
const { DEFAULT } = this;
|
|
245
|
+
const { duration = DEFAULT.duration, delay = DEFAULT.delay, timingFunction = DEFAULT.timingFunction, transformOrigin = DEFAULT.transformOrigin } = arg;
|
|
246
|
+
// 生成一条 transition 动画
|
|
247
|
+
this.steps.push([
|
|
248
|
+
this.rules.map(rule => `${rule}!important`).join(';'),
|
|
249
|
+
`${this.transform.join(' ')}!important`,
|
|
250
|
+
`${TRANSFORM}-origin: ${transformOrigin}`,
|
|
251
|
+
`transition: all ${duration}ms ${timingFunction} ${delay}ms`
|
|
252
|
+
]
|
|
253
|
+
.filter(item => item !== '' && item !== `${TRANSFORM}:`)
|
|
254
|
+
.join(';'));
|
|
255
|
+
// 清空 rules 和 transform
|
|
256
|
+
this.rules = [];
|
|
257
|
+
this.transform = [`${TRANSFORM}:`];
|
|
258
|
+
return this;
|
|
259
|
+
}
|
|
260
|
+
// 创建底层数据
|
|
261
|
+
createAnimationData() {
|
|
262
|
+
const animIndex = `taro-h5-poly-fill/${this.id}/create-animation__${this.animationMapCount++}`;
|
|
263
|
+
// 记录动画分几个 step
|
|
264
|
+
this.animationMap[animIndex] = this.steps.length;
|
|
265
|
+
// 吐出 step
|
|
266
|
+
this.steps.forEach((step, index) => {
|
|
267
|
+
const selector = index === 0
|
|
268
|
+
? `[animation="${animIndex}"], [data-animation="${animIndex}"]`
|
|
269
|
+
: `[animation="${animIndex}--${index}"], [data-animation="${animIndex}--${index}"]`;
|
|
270
|
+
styleSheet.add(`${selector} { ${step} }`);
|
|
271
|
+
});
|
|
272
|
+
// 清空 steps
|
|
273
|
+
this.steps = [];
|
|
274
|
+
return animIndex;
|
|
275
|
+
}
|
|
276
|
+
// 动画数据产出
|
|
277
|
+
export() {
|
|
278
|
+
return this.createAnimationData();
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
// h5 的 createAnimation
|
|
282
|
+
export const createAnimation = (option) => {
|
|
283
|
+
return new Animation(option);
|
|
284
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export * from './animation';
|
|
2
|
+
export * from './background';
|
|
3
|
+
export * from './custom-component';
|
|
4
|
+
export * from './fonts';
|
|
5
|
+
export * from './menu';
|
|
6
|
+
export * from './navigation-bar';
|
|
7
|
+
export * from './pull-down-refresh';
|
|
8
|
+
export * from './scroll';
|
|
9
|
+
export * from './sticky';
|
|
10
|
+
export * from './tab-bar';
|
|
11
|
+
export * from './window';
|
|
12
|
+
export * from './interaction';
|