diff --git a/.eslintrc.js b/.eslintrc.js index 2adc439e07c..e235012d909 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,8 +5,7 @@ module.exports = { 'import', 'jest', 'react', - 'simple-import-sort', - 'prettier' + 'simple-import-sort' ], extends: [ 'eslint:recommended', @@ -14,7 +13,6 @@ module.exports = { 'plugin:@typescript-eslint/recommended', 'plugin:react/jsx-runtime', 'plugin:react/recommended', - 'prettier' ], rules: { '@typescript-eslint/ban-ts-comment': 0, @@ -31,6 +29,10 @@ module.exports = { '@typescript-eslint/no-use-before-define': [1, { functions: false, classes: false }], '@typescript-eslint/no-var-requires': 0, camelcase: 0, + 'eol-last': 0, + 'comma-dangle': 0, + 'no-mixed-operators': 0, + 'no-multiple-empty-lines': 0, 'import/first': 2, 'import/newline-after-import': 2, 'import/no-duplicates': 2, diff --git a/.github/workflows/build-rust-binding.yml b/.github/workflows/build-rust-binding.yml index c1e319397f4..e092c415b12 100644 --- a/.github/workflows/build-rust-binding.yml +++ b/.github/workflows/build-rust-binding.yml @@ -46,7 +46,7 @@ jobs: - name: Checkout uses: actions/checkout@v4 - name: Setup pnpm - uses: pnpm/action-setup@v2.4.0 + uses: pnpm/action-setup@v3.0.0 with: version: 7 - name: Setup Node.js ${{ matrix.node-version }} diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 82a398b1573..ce148e64171 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -44,7 +44,7 @@ jobs: - name: Checkout uses: actions/checkout@v4 - name: Setup pnpm - uses: pnpm/action-setup@v2.4.0 + uses: pnpm/action-setup@v3.0.0 with: version: 7 - name: Setup Node.js ${{ matrix.node-version }} @@ -102,7 +102,7 @@ jobs: # 以下 coverage 流程通过 artifact 拆分文件作为单独 job 上传时间损耗过长，因此在在 node test 后直接继续执行 - name: Upload [taro-cli] coverage to Codecov - uses: codecov/codecov-action@v3 + uses: codecov/codecov-action@v4 if: ${{ matrix.settings.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true @@ -110,7 +110,7 @@ jobs: files: ./packages/taro-cli/coverage/clover.xml token: ${{ secrets.CODECOV_TOKEN }} - name: Upload runner coverage to Codecov - uses: codecov/codecov-action@v3 + uses: codecov/codecov-action@v4 if: ${{ matrix.settings.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true @@ -118,7 +118,7 @@ jobs: files: ./packages/taro-webpack5-runner/coverage/clover.xml,./packages/taro-webpack-runner/coverage/clover.xml,./packages/taro-mini-runner/coverage/clover.xml token: ${{ secrets.CODECOV_TOKEN }} - name: Upload [taro-runtime] coverage to Codecov - uses: codecov/codecov-action@v3 + uses: codecov/codecov-action@v4 if: ${{ matrix.settings.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true @@ -126,7 +126,7 @@ jobs: files: ./packages/taro-runtime/coverage/clover.xml token: ${{ secrets.CODECOV_TOKEN }} - name: Upload [taro-web] coverage to Codecov - uses: codecov/codecov-action@v3 + uses: codecov/codecov-action@v4 if: ${{ matrix.settings.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true @@ -134,7 +134,7 @@ jobs: files: ./packages/taro-components/coverage/clover.xml,./packages/taro-h5/coverage/clover.xml,./packages/taro-router/coverage/clover.xml token: ${{ secrets.CODECOV_TOKEN }} - name: Upload rest coverage to Codecov - uses: codecov/codecov-action@v3 + uses: codecov/codecov-action@v4 if: ${{ matrix.settings.host == 'ubuntu-latest' }} with: token: ${{ secrets.CODECOV_TOKEN }} diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 8feaeda923e..93cb33d8f64 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -82,7 +82,7 @@ jobs: - name: Checkout uses: actions/checkout@v4 - name: Setup pnpm - uses: pnpm/action-setup@v2.4.0 + uses: pnpm/action-setup@v3.0.0 with: version: 7 - name: Setup Node 16 diff --git a/.github/workflows/sync-components-types.yml b/.github/workflows/sync-components-types.yml index b437f3c9ab0..a5597c8187e 100644 --- a/.github/workflows/sync-components-types.yml +++ b/.github/workflows/sync-components-types.yml @@ -34,7 +34,7 @@ jobs: ${{ runner.os }}- - name: install - uses: pnpm/action-setup@v2.4.0 + uses: pnpm/action-setup@v3.0.0 with: version: 7 run_install: | diff --git a/.gitignore b/.gitignore index 6a1460ae0b3..1e103109c87 100644 --- a/.gitignore +++ b/.gitignore @@ -76,6 +76,7 @@ common/autoinstallers/*/.npmrc target/ debug/ +!packages/taro-platform-harmony-hybrid/src/api/apis/base/debug # Binding artifacts artifacts @@ -84,4 +85,4 @@ artifacts *.node # harmony-hybrid extend-h5-apis file -packages/taro-platform-harmony-hybrid/src/api/apis/extend-h5-apis.ts \ No newline at end of file +packages/taro-platform-harmony-hybrid/src/api/apis/extend-h5-apis.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 40629da47a9..14c42a2afc8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,16 +1,4 @@ { - "eslint.validate": [ - "javascript", - "javascriptreact", - { - "language": "typescript", - "autoFix": true - }, - { - "language": "typescriptreact", - "autoFix": true - } - ], "search.exclude": { "**/.git": true, "**/node_modules": true, diff --git a/crates/native_binding/package.json b/crates/native_binding/package.json index 2ddde1a807d..64b74ec3256 100644 --- a/crates/native_binding/package.json +++ b/crates/native_binding/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/binding", - "version": "3.6.25", + "version": "3.6.29", "description": "Node binding for taro", "main": "binding.js", "typings": "binding.d.ts", diff --git a/crates/swc_plugin_compile_mode/src/tests/attributes.rs b/crates/swc_plugin_compile_mode/src/tests/attributes.rs index bfeab582ee2..ddc9de82f4f 100644 --- a/crates/swc_plugin_compile_mode/src/tests/attributes.rs +++ b/crates/swc_plugin_compile_mode/src/tests/attributes.rs @@ -27,7 +27,7 @@ test!( - + diff --git a/crates/swc_plugin_compile_mode/src/transform.rs b/crates/swc_plugin_compile_mode/src/transform.rs index 523d9ffa857..e17c62a3fa5 100644 --- a/crates/swc_plugin_compile_mode/src/transform.rs +++ b/crates/swc_plugin_compile_mode/src/transform.rs @@ -376,7 +376,9 @@ impl TransformVisitor { } // 小程序组件标准属性 -> 取 @tarojs/shared 传递过来的属性值；非标准属性 -> 取属性名 - let value: &str = attrs_map.get(&miniapp_attr_name).unwrap_or(&jsx_attr_name); + let value: &str = attrs_map.get(&miniapp_attr_name) + .map(|res| res.as_str()) + .unwrap_or(if miniapp_attr_name == "id" { "uid" } else { &jsx_attr_name }); // 按当前节点在节点树中的位置换算路径 node_path.push('.'); let value = if value.contains(TMPL_DATA_ROOT) { diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_handle_events.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_handle_events.js index ce536eb00b8..2a9fea02d0b 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_handle_events.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_handle_events.js @@ -1,4 +1,4 @@ -const TARO_TEMPLATES_f0t0 = ''; +const TARO_TEMPLATES_f0t0 = ''; function Index() { return diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_turn_dynamic_attrs.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_turn_dynamic_attrs.js index 846b9f5233a..236b82458a1 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_turn_dynamic_attrs.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_turn_dynamic_attrs.js @@ -1,10 +1,10 @@ -const TARO_TEMPLATES_f0t0 = ''; +const TARO_TEMPLATES_f0t0 = ''; function Index() { return - + ; diff --git a/examples/blended-taro-component-vue3/h5/package.json b/examples/blended-taro-component-vue3/h5/package.json index ef0b47f7035..6a5bda64775 100644 --- a/examples/blended-taro-component-vue3/h5/package.json +++ b/examples/blended-taro-component-vue3/h5/package.json @@ -60,7 +60,7 @@ "style-loader": "1.3.0", "stylelint": "^14.4.0", "typescript": "^4.1.0", - "vue-loader": "^17.0.0", + "vue-loader": "^17.1.0", "webpack": "5.78.0" } } diff --git a/examples/blended-taro-component-vue3/taro-project/package.json b/examples/blended-taro-component-vue3/taro-project/package.json index dff3abdd5cc..e034a17ec9f 100644 --- a/examples/blended-taro-component-vue3/taro-project/package.json +++ b/examples/blended-taro-component-vue3/taro-project/package.json @@ -68,7 +68,7 @@ "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "^4.1.0", "typescript": "^5.1.0", - "vue-loader": "^17.0.0", + "vue-loader": "^17.1.0", "webpack": "5.78.0" } } diff --git a/examples/mini-program-example/.editorconfig b/examples/mini-program-example/.editorconfig new file mode 100644 index 00000000000..5760be58369 --- /dev/null +++ b/examples/mini-program-example/.editorconfig @@ -0,0 +1,12 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/examples/mini-program-example/.eslintrc b/examples/mini-program-example/.eslintrc new file mode 100644 index 00000000000..c9c31c176f5 --- /dev/null +++ b/examples/mini-program-example/.eslintrc @@ -0,0 +1,13 @@ +{ + "extends": ["taro/react"], + "rules": { + "react/jsx-uses-react": "off", + "react/react-in-jsx-scope": "off", + "@typescript-eslint/no-unused-expressions": "off", + "import/first": "off", + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-shadow": "off", + "react/forbid-elements": "off" + } +} diff --git a/examples/mini-program-example/.gitignore b/examples/mini-program-example/.gitignore new file mode 100644 index 00000000000..331e8f6f4da --- /dev/null +++ b/examples/mini-program-example/.gitignore @@ -0,0 +1,7 @@ +dist/ +deploy_versions/ +.temp/ +.rn_temp/ +node_modules/ +.DS_Store +.swc \ No newline at end of file diff --git a/examples/mini-program-example/.prettierrc b/examples/mini-program-example/.prettierrc new file mode 100644 index 00000000000..0b9ec4ffff8 --- /dev/null +++ b/examples/mini-program-example/.prettierrc @@ -0,0 +1,14 @@ +{ + "printWidth": 120, + "singleQuote": true, + "useTabs": false, + "tabWidth": 2, + "semi": false, + "quoteProps": "as-needed", + "trailingComma": "es5", + "bracketSpacing": true, + "jsxSingleQuote": true, + "jsxBracketSameLine": false, + "arrowParens": "always", + "endOfLine": "auto" +} \ No newline at end of file diff --git a/examples/mini-program-example/babel.config.js b/examples/mini-program-example/babel.config.js new file mode 100644 index 00000000000..f3acb812f5a --- /dev/null +++ b/examples/mini-program-example/babel.config.js @@ -0,0 +1,10 @@ +// babel-preset-taro 更多选项和默认值： +// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md +module.exports = { + presets: [ + ['taro', { + framework: 'react', + ts: true + }] + ] +} diff --git a/examples/mini-program-example/config/dev.js b/examples/mini-program-example/config/dev.js new file mode 100644 index 00000000000..6821bf8e47d --- /dev/null +++ b/examples/mini-program-example/config/dev.js @@ -0,0 +1,9 @@ +module.exports = { + env: { + NODE_ENV: '"development"' + }, + defineConstants: { + }, + mini: {}, + h5: {} +} diff --git a/examples/mini-program-example/config/index.js b/examples/mini-program-example/config/index.js new file mode 100644 index 00000000000..03f52196110 --- /dev/null +++ b/examples/mini-program-example/config/index.js @@ -0,0 +1,96 @@ +const path = require('path') + +const config = { + projectName: 'mini-program-example', + date: '2023-6-15', + designWidth: 750, + deviceRatio: { + 640: 2.34 / 2, + 750: 1, + 828: 1.81 / 2 + }, + sourceRoot: 'src', + outputRoot: `dist/spa/main`, + plugins: [], + alias: { + '@/util': path.resolve(__dirname, '..', 'src/util'), + '@/styles': path.resolve(__dirname, '..', 'src/styles'), + '@/assets': path.resolve(__dirname, '..', 'src/assets'), + '@/components': path.resolve(__dirname, '..', 'src/components'), + }, + defineConstants: { + }, + copy: { + patterns: [ + ], + options: { + } + }, + framework: 'react', + compiler: 'webpack5', + cache: { + enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache + }, + mini: { + postcss: { + pxtransform: { + enable: true, + config: { + + } + }, + url: { + enable: true, + config: { + limit: 1024 // 设定转换尺寸上限 + } + }, + cssModules: { + enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true + config: { + namingPattern: 'module', // 转换模式，取值为 global/module + generateScopedName: '[name]__[local]___[hash:base64:5]' + } + } + }, + imageUrlLoaderOption:{ + limit:8192 + } + }, + h5: { + publicPath: '/spa/main/', + staticDirectory: 'static', + postcss: { + autoprefixer: { + enable: true, + config: { + } + }, + cssModules: { + enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true + config: { + namingPattern: 'module', // 转换模式，取值为 global/module + generateScopedName: '[name]__[local]___[hash:base64:5]' + } + } + }, + imageUrlLoaderOption:{ + limit:8192 + } + }, + rn: { + appName: 'taroDemo', + postcss: { + cssModules: { + enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true + } + } + } +} + +module.exports = function (merge) { + if (process.env.NODE_ENV === 'development') { + return merge({}, config, require('./dev')) + } + return merge({}, config, require('./prod')) +} diff --git a/examples/mini-program-example/config/prod.js b/examples/mini-program-example/config/prod.js new file mode 100644 index 00000000000..e1486661d96 --- /dev/null +++ b/examples/mini-program-example/config/prod.js @@ -0,0 +1,37 @@ +module.exports = { + env: { + NODE_ENV: '"production"' + }, + defineConstants: { + }, + mini: {}, + h5: { + /** + * WebpackChain 插件配置 + * @docs https://github.com/neutrinojs/webpack-chain + */ + // webpackChain (chain) { + // /** + // * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。 + // * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer + // */ + // chain.plugin('analyzer') + // .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []) + + // /** + // * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。 + // * @docs https://github.com/chrisvfritz/prerender-spa-plugin + // */ + // const path = require('path') + // const Prerender = require('prerender-spa-plugin') + // const staticDir = path.join(__dirname, '..', 'dist') + // chain + // .plugin('prerender') + // .use(new Prerender({ + // staticDir, + // routes: [ '/pages/index/index' ], + // postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') }) + // })) + // } + } +} diff --git a/examples/mini-program-example/package.json b/examples/mini-program-example/package.json new file mode 100644 index 00000000000..018d091f750 --- /dev/null +++ b/examples/mini-program-example/package.json @@ -0,0 +1,86 @@ +{ + "name": "mini-program-example", + "version": "1.0.0", + "private": true, + "description": "小程序demo", + "templateInfo": { + "name": "default", + "typescript": true, + "css": "sass" + }, + "scripts": { + "lint": "eslint src --ext .js --ext .jsx --ext .ts --ext .tsx", + "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\" && eslint src --ext .js --ext .jsx --ext .ts --ext .tsx --fix", + "build:weapp": "taro build --type weapp", + "build:swan": "taro build --type swan", + "build:alipay": "taro build --type alipay", + "build:tt": "taro build --type tt", + "build:h5": "taro build --type h5", + "build:rn": "taro build --type rn", + "build:qq": "taro build --type qq", + "build:jd": "taro build --type jd", + "build:quickapp": "taro build --type quickapp", + "build:harmony-hybrid": "taro build --type harmony-hybrid", + "dev:weapp": "npm run build:weapp -- --watch", + "dev:swan": "npm run build:swan -- --watch", + "dev:alipay": "npm run build:alipay -- --watch", + "dev:tt": "npm run build:tt -- --watch", + "dev:h5": "npm run build:h5 -- --watch", + "dev:rn": "npm run build:rn -- --watch", + "dev:qq": "npm run build:qq -- --watch", + "dev:jd": "npm run build:jd -- --watch", + "dev:quickapp": "npm run build:quickapp -- --watch", + "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch", + "clear:harmony-hybrid": "rm -rf node_modules/.taro/harmony-hybrid && npm run dev:harmony-hybrid", + "rebuild": "cd ../../packages/%npm_config_package% && pnpm build && cd ../../examples/mini-program-example && rimraf node_modules && pnpm install" + }, + "browserslist": [ + "last 3 versions", + "Android >= 4.1", + "ios >= 8" + ], + "author": "", + "dependencies": { + "@babel/runtime": "^7.14.5", + "@tarojs/components": "workspace:*", + "@tarojs/helper": "workspace:*", + "@tarojs/plugin-platform-weapp": "workspace:*", + "@tarojs/plugin-platform-alipay": "workspace:*", + "@tarojs/plugin-platform-tt": "workspace:*", + "@tarojs/plugin-platform-swan": "workspace:*", + "@tarojs/plugin-platform-jd": "workspace:*", + "@tarojs/plugin-platform-qq": "workspace:*", + "@tarojs/plugin-platform-h5": "workspace:*", + "@tarojs/plugin-platform-harmony-hybrid": "workspace:*", + "@tarojs/runtime": "workspace:*", + "@tarojs/shared": "workspace:*", + "@tarojs/taro": "workspace:*", + "@tarojs/plugin-framework-react": "workspace:*", + "@tarojs/react": "workspace:*", + "react-dom": "^18.2.0", + "react": "^18.2.0" + }, + "devDependencies": { + "@babel/core": "^7.8.0", + "@tarojs/cli": "workspace:*", + "@types/webpack-env": "^1.13.6", + "@types/react": "^18.2.0", + "webpack": "5.78.0", + "@tarojs/webpack5-runner": "workspace:*", + "babel-preset-taro": "workspace:*", + "eslint-config-taro": "workspace:*", + "eslint": "^8.12.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", + "react-refresh": "^0.11.0", + "eslint-plugin-react": "^7.8.2", + "eslint-plugin-import": "^2.12.0", + "eslint-plugin-react-hooks": "^4.2.0", + "stylelint": "^14.4.0", + "@typescript-eslint/parser": "^5.20.0", + "@typescript-eslint/eslint-plugin": "^5.20.0", + "typescript": "^4.1.0", + "postcss": "^8.4.18", + "ts-node": "^10.9.1", + "@types/node": "^18.15.11" + } +} diff --git a/examples/mini-program-example/project.config.json b/examples/mini-program-example/project.config.json new file mode 100644 index 00000000000..8f6409b7da1 --- /dev/null +++ b/examples/mini-program-example/project.config.json @@ -0,0 +1,32 @@ +{ + "miniprogramRoot": "dist/", + "projectname": "mini-program-example", + "description": "小程序demo", + "appid": "wx16ae4838cf116f8f", + "setting": { + "urlCheck": true, + "es6": false, + "enhance": false, + "compileHotReLoad": false, + "postcss": false, + "minified": false, + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "condition": false + }, + "compileType": "miniprogram", + "libVersion": "3.0.0", + "srcMiniprogramRoot": "dist/", + "packOptions": { + "ignore": [], + "include": [] + }, + "condition": {}, + "editorSetting": { + "tabIndent": "insertSpaces", + "tabSize": 2 + } +} diff --git a/examples/mini-program-example/project.private.config.json b/examples/mini-program-example/project.private.config.json new file mode 100644 index 00000000000..76705881346 --- /dev/null +++ b/examples/mini-program-example/project.private.config.json @@ -0,0 +1,7 @@ +{ + "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "projectname": "mini-program-example", + "setting": { + "compileHotReLoad": true + } +} diff --git a/examples/mini-program-example/project.tt.json b/examples/mini-program-example/project.tt.json new file mode 100644 index 00000000000..72f4fc57910 --- /dev/null +++ b/examples/mini-program-example/project.tt.json @@ -0,0 +1,9 @@ +{ + "miniprogramRoot": "./", + "projectname": "mini-program-example", + "appid": "testAppId", + "setting": { + "es6": false, + "minified": false + } +} diff --git a/examples/mini-program-example/src/app.config.ts b/examples/mini-program-example/src/app.config.ts new file mode 100644 index 00000000000..847d1653cc3 --- /dev/null +++ b/examples/mini-program-example/src/app.config.ts @@ -0,0 +1,185 @@ +export default defineAppConfig({ + pages: [ + 'pages/index/index', + 'pages/error/index', + 'pages/component/index/index', + 'pages/component/cover-image/cover-image', + 'pages/component/cover-view/cover-view', + 'pages/component/view/view', + 'pages/component/scroll-view/scroll-view', + 'pages/component/swiper/swiper', + 'pages/component/text/text', + 'pages/component/icon/icon', + 'pages/component/progress/progress', + 'pages/component/button/button', + 'pages/component/checkbox/checkbox', + 'pages/component/form/form', + 'pages/component/input/input', + 'pages/component/label/label', + 'pages/component/picker/picker', + 'pages/component/picker-view/picker-view', + 'pages/component/radio/radio', + 'pages/component/switch/switch', + 'pages/component/textarea/textarea', + 'pages/component/navigator/navigator', + 'pages/component/audio/audio', + 'pages/component/camera/camera', + 'pages/component/image/image', + 'pages/component/video/video', + 'pages/component/live-player/live-player', + 'pages/component/map/map', + 'pages/component/canvas/canvas', + 'pages/component/slider/slider', + 'pages/component/grid-view/grid-view', + 'pages/component/grid-view/demo1', + 'pages/component/grid-view/demo2', + 'pages/component/list-view/list-view', + 'pages/component/page-container/page-container', + 'pages/component/radio-group/radio-group', + 'pages/component/checkbox-group/checkbox-group', + 'pages/component/match-media/match-media', + 'pages/component/movable-view/movable-view', + 'pages/component/sticky-header/sticky-header', + 'pages/component/root-portal/root-portal', + 'pages/component/editor/editor', + 'pages/component/share-element/share-element', + 'pages/api/index/index', + 'pages/api/advertising/index', + 'pages/api/ai/inference/index', + 'pages/api/ai/visionAlgorithms/index', + 'pages/api/ai/faceRecognition/index', + 'pages/api/alipay/index', + 'pages/api/analysis/index', + 'pages/api/basics/basics/index', + 'pages/api/basics/nativeDebug/index', + 'pages/api/basics/encryption/index', + 'pages/api/basics/miniProgram/index', + 'pages/api/basics/performance/index', + 'pages/api/basics/system/index', + 'pages/api/basics/update/index', + 'pages/api/cache/index', + 'pages/api/canvas/index', + 'pages/api/cloudServices/index', + 'pages/api/device/bluetoothGeneral/index', + 'pages/api/device/bluetoothLowCenter/index', + 'pages/api/device/bluetoothLowPerpherals/index', + 'pages/api/device/bluetoothBeacon/index', + 'pages/api/device/nfc/index', + 'pages/api/device/wifi/index', + 'pages/api/device/calendar/index', + 'pages/api/device/contact/index', + 'pages/api/device/accessibility/index', + 'pages/api/device/bettery/index', + 'pages/api/device/clipBoard/index', + 'pages/api/device/network/index', + 'pages/api/device/screen/index', + 'pages/api/device/keyboard/index', + 'pages/api/device/phoneCall/index', + 'pages/api/device/accelerometer/index', + 'pages/api/device/compass/index', + 'pages/api/device/deviceOrientation/index', + 'pages/api/device/gyroscope/index', + 'pages/api/device/memory/index', + 'pages/api/device/scan/index', + 'pages/api/device/sms/index', + 'pages/api/device/vibration/index', + 'pages/api/file/index', + 'pages/api/forward/index', + 'pages/api/framework/index', + 'pages/api/interface/interaction/index', + 'pages/api/interface/navigationBar/index', + 'pages/api/interface/background/index', + 'pages/api/interface/font/index', + 'pages/api/interface/pullDownRefresh/index', + 'pages/api/interface/scroll/index', + 'pages/api/interface/animation/index', + 'pages/api/interface/setTop/index', + 'pages/api/interface/customizedComponents/index', + 'pages/api/interface/menu/index', + 'pages/api/interface/windows/index', + 'pages/api/location/index', + 'pages/api/media/map/index', + 'pages/api/media/image/index', + 'pages/api/media/video/index', + 'pages/api/media/audio/index', + 'pages/api/media/backgroundAudio/index', + 'pages/api/media/realtimeAudioAndVideo/index', + 'pages/api/media/recording/index', + 'pages/api/media/camera/index', + 'pages/api/media/richText/index', + 'pages/api/media/audioOrVideoCompose/index', + 'pages/api/media/realtimeVoice/index', + 'pages/api/media/screenRecorder/index', + 'pages/api/media/videoDecoder/index', + 'pages/api/network/request/index', + 'pages/api/network/download/index', + 'pages/api/network/upload/index', + 'pages/api/network/webSocket/index', + 'pages/api/network/mDNS/index', + 'pages/api/network/TCPCommunications/index', + 'pages/api/network/UDPCommunications/index', + 'pages/api/openAPIS/login/index', + 'pages/api/openAPIS/accountInfomation/index', + 'pages/api/openAPIS/userInfomation/index', + 'pages/api/openAPIS/authorization/index', + 'pages/api/openAPIS/setting/index', + 'pages/api/openAPIS/recipientAddress/index', + 'pages/api/openAPIS/cardsAndOffers/index', + 'pages/api/openAPIS/invoice/index', + 'pages/api/openAPIS/biometricAuthorization/index', + 'pages/api/openAPIS/weRun/index', + 'pages/api/openAPIS/subscribeNews/index', + 'pages/api/openAPIS/wechatRedRacket/index', + 'pages/api/openAPIS/collection/index', + 'pages/api/openAPIS/mineMiniProgram/index', + 'pages/api/openAPIS/licensePlate/index', + 'pages/api/openAPIS/wechatVideoChannel/index', + 'pages/api/openAPIS/deviceVoip/index', + 'pages/api/openAPIS/wechatGroup/index', + 'pages/api/openAPIS/wechatCustomerService/index', + 'pages/api/payment/index', + 'pages/api/qq/index', + 'pages/api/redirection/index', + 'pages/api/routing/index', + 'pages/api/routing/routeA/index', + 'pages/api/swan/index', + 'pages/api/taro/expand/index', + 'pages/api/taro/hooks/index', + 'pages/api/thirdParty/index', + 'pages/api/worker/index', + 'pages/api/wxml/index', + 'pages/performance/index/index' + ], + tabBar: { + color: '#7A7E83', + selectedColor: '#1F69FF', + borderStyle: 'black', + backgroundColor: 'F7F7F7', + list: [ + { + pagePath: 'pages/component/index/index', + iconPath: 'assets/tab/component.png', + selectedIconPath: 'assets/tab/component_select.png', + text: '组件', + }, + { + pagePath: 'pages/index/index', + iconPath: 'assets/tab/home.png', + selectedIconPath: 'assets/tab/home_select.png', + text: '首页', + }, + { + pagePath: 'pages/api/index/index', + iconPath: 'assets/tab/api.png', + selectedIconPath: 'assets/tab/api_select.png', + text: '接口', + }, + ], + }, + window: { + backgroundTextStyle: 'light', + navigationBarBackgroundColor: '#F7F7F7', + navigationBarTitleText: 'Harmony', + navigationBarTextStyle: 'black', + }, +}) diff --git a/examples/mini-program-example/src/app.scss b/examples/mini-program-example/src/app.scss new file mode 100644 index 00000000000..f170d325e90 --- /dev/null +++ b/examples/mini-program-example/src/app.scss @@ -0,0 +1,37 @@ +@import '@/styles/variables.scss'; + +.api-page { + box-sizing: border-box; + padding: 40px; + height: 100%; +} + +.test-style { + color: #f5f5f5; + background-color: $color-success; +} + +.tag { + display: inline-block; + text-align: center; + width: 120px; + padding: 5px 5px; + border: 1px solid red; + border-radius: 5px; + color: red; + font-size: 20px; + margin: 5px; +} + +.navigator { + padding: 20px 30px; + position: relative; + display: flex; + align-items: center; + transition: 0.3s; + } + +.navigator:active { + background-color: $color-grey-5; + opacity: 0.2; +} \ No newline at end of file diff --git a/examples/mini-program-example/src/app.ts b/examples/mini-program-example/src/app.ts new file mode 100644 index 00000000000..2c34853faba --- /dev/null +++ b/examples/mini-program-example/src/app.ts @@ -0,0 +1,55 @@ +import React from 'react' +import Taro from '@tarojs/taro' +import { TestConsole } from '@/util/util' +import './app.scss' + +class App extends React.Component { + onLaunch(res) { + if (res) { + Taro.setStorageSync('onLaunch', res) + } else { + Taro.setStorageSync('onLaunch', 'Triggered') + } + TestConsole.consoleNormal('onLaunch', res) + } + + onError(error) { + if (error) { + Taro.setStorageSync('onError', error) + } else { + Taro.setStorageSync('onError', 'Triggered') + } + TestConsole.consoleNormal('onError', error) + Taro.showToast({ + title: 'onError', + icon: 'error', + }) + } + + onPageNotFound(res) { + if (res) { + Taro.setStorageSync('onPageNotFound', res) + } else { + Taro.setStorageSync('onPageNotFound', 'Triggered') + } + TestConsole.consoleNormal('onPageNotFound', res) + Taro.navigateTo({ + url: 'pages/error/index', + }) + } + + componentDidShow(res) { + TestConsole.consoleNormal('App componentDidShow', res) + } + + componentDidHide() { + TestConsole.consoleNormal('App componentDidHide') + } + + render() { + // this.props.children 是将要会渲染的页面 + return this.props.children + } +} + +export default App diff --git a/examples/mini-program-example/src/assets/api/AI.png b/examples/mini-program-example/src/assets/api/AI.png new file mode 100644 index 00000000000..9fd4b8d15ac Binary files /dev/null and b/examples/mini-program-example/src/assets/api/AI.png differ diff --git a/examples/mini-program-example/src/assets/api/advertising.png b/examples/mini-program-example/src/assets/api/advertising.png new file mode 100644 index 00000000000..b5b0826a168 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/advertising.png differ diff --git a/examples/mini-program-example/src/assets/api/alipay.png b/examples/mini-program-example/src/assets/api/alipay.png new file mode 100644 index 00000000000..fa8e5181a94 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/alipay.png differ diff --git a/examples/mini-program-example/src/assets/api/analysis.png b/examples/mini-program-example/src/assets/api/analysis.png new file mode 100644 index 00000000000..5f824d64ab8 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/analysis.png differ diff --git a/examples/mini-program-example/src/assets/api/cache.png b/examples/mini-program-example/src/assets/api/cache.png new file mode 100644 index 00000000000..e716cf187e8 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/cache.png differ diff --git a/examples/mini-program-example/src/assets/api/canvas.png b/examples/mini-program-example/src/assets/api/canvas.png new file mode 100644 index 00000000000..a9a11d7a66a Binary files /dev/null and b/examples/mini-program-example/src/assets/api/canvas.png differ diff --git a/examples/mini-program-example/src/assets/api/cloud.png b/examples/mini-program-example/src/assets/api/cloud.png new file mode 100644 index 00000000000..53a4e5c14f4 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/cloud.png differ diff --git a/examples/mini-program-example/src/assets/api/devices.png b/examples/mini-program-example/src/assets/api/devices.png new file mode 100644 index 00000000000..827aee51e43 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/devices.png differ diff --git a/examples/mini-program-example/src/assets/api/file.png b/examples/mini-program-example/src/assets/api/file.png new file mode 100644 index 00000000000..8bf29fca2f1 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/file.png differ diff --git a/examples/mini-program-example/src/assets/api/forward.png b/examples/mini-program-example/src/assets/api/forward.png new file mode 100644 index 00000000000..84b41f2950c Binary files /dev/null and b/examples/mini-program-example/src/assets/api/forward.png differ diff --git a/examples/mini-program-example/src/assets/api/frame.png b/examples/mini-program-example/src/assets/api/frame.png new file mode 100644 index 00000000000..cabe80db3a8 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/frame.png differ diff --git a/examples/mini-program-example/src/assets/api/interface.png b/examples/mini-program-example/src/assets/api/interface.png new file mode 100644 index 00000000000..f461ad371a9 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/interface.png differ diff --git a/examples/mini-program-example/src/assets/api/iphone.png b/examples/mini-program-example/src/assets/api/iphone.png new file mode 100644 index 00000000000..288291a3086 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/iphone.png differ diff --git a/examples/mini-program-example/src/assets/api/local.png b/examples/mini-program-example/src/assets/api/local.png new file mode 100644 index 00000000000..cf8cc40fa04 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/local.png differ diff --git a/examples/mini-program-example/src/assets/api/logo.png b/examples/mini-program-example/src/assets/api/logo.png new file mode 100644 index 00000000000..3a26136014c Binary files /dev/null and b/examples/mini-program-example/src/assets/api/logo.png differ diff --git a/examples/mini-program-example/src/assets/api/media.png b/examples/mini-program-example/src/assets/api/media.png new file mode 100644 index 00000000000..0d82eb31d4e Binary files /dev/null and b/examples/mini-program-example/src/assets/api/media.png differ diff --git a/examples/mini-program-example/src/assets/api/network.png b/examples/mini-program-example/src/assets/api/network.png new file mode 100644 index 00000000000..d7313b12c47 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/network.png differ diff --git a/examples/mini-program-example/src/assets/api/openapi.png b/examples/mini-program-example/src/assets/api/openapi.png new file mode 100644 index 00000000000..da04b5702e8 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/openapi.png differ diff --git a/examples/mini-program-example/src/assets/api/payment.png b/examples/mini-program-example/src/assets/api/payment.png new file mode 100644 index 00000000000..e6ecf00625e Binary files /dev/null and b/examples/mini-program-example/src/assets/api/payment.png differ diff --git a/examples/mini-program-example/src/assets/api/qq.png b/examples/mini-program-example/src/assets/api/qq.png new file mode 100644 index 00000000000..cc5700df4bd Binary files /dev/null and b/examples/mini-program-example/src/assets/api/qq.png differ diff --git a/examples/mini-program-example/src/assets/api/redirection.png b/examples/mini-program-example/src/assets/api/redirection.png new file mode 100644 index 00000000000..b67780ef2f0 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/redirection.png differ diff --git a/examples/mini-program-example/src/assets/api/routing.png b/examples/mini-program-example/src/assets/api/routing.png new file mode 100644 index 00000000000..0ba0b529be5 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/routing.png differ diff --git a/examples/mini-program-example/src/assets/api/swan.png b/examples/mini-program-example/src/assets/api/swan.png new file mode 100644 index 00000000000..c8917b87cea Binary files /dev/null and b/examples/mini-program-example/src/assets/api/swan.png differ diff --git a/examples/mini-program-example/src/assets/api/taro.png b/examples/mini-program-example/src/assets/api/taro.png new file mode 100644 index 00000000000..85e79b551f5 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/taro.png differ diff --git a/examples/mini-program-example/src/assets/api/thirdparty.png b/examples/mini-program-example/src/assets/api/thirdparty.png new file mode 100644 index 00000000000..c2157b54bac Binary files /dev/null and b/examples/mini-program-example/src/assets/api/thirdparty.png differ diff --git a/examples/mini-program-example/src/assets/api/worker.png b/examples/mini-program-example/src/assets/api/worker.png new file mode 100644 index 00000000000..8b32e0df841 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/worker.png differ diff --git a/examples/mini-program-example/src/assets/api/wxml.png b/examples/mini-program-example/src/assets/api/wxml.png new file mode 100644 index 00000000000..7eb4b9fcfb4 Binary files /dev/null and b/examples/mini-program-example/src/assets/api/wxml.png differ diff --git a/examples/mini-program-example/src/assets/component/canvas.png b/examples/mini-program-example/src/assets/component/canvas.png new file mode 100644 index 00000000000..21b38cb5814 Binary files /dev/null and b/examples/mini-program-example/src/assets/component/canvas.png differ diff --git a/examples/mini-program-example/src/assets/component/content.png b/examples/mini-program-example/src/assets/component/content.png new file mode 100644 index 00000000000..817fa6993d5 Binary files /dev/null and b/examples/mini-program-example/src/assets/component/content.png differ diff --git a/examples/mini-program-example/src/assets/component/form.png b/examples/mini-program-example/src/assets/component/form.png new file mode 100644 index 00000000000..a47bd243b6b Binary files /dev/null and b/examples/mini-program-example/src/assets/component/form.png differ diff --git a/examples/mini-program-example/src/assets/component/logo.png b/examples/mini-program-example/src/assets/component/logo.png new file mode 100644 index 00000000000..c77866090d8 Binary files /dev/null and b/examples/mini-program-example/src/assets/component/logo.png differ diff --git a/examples/mini-program-example/src/assets/component/map.png b/examples/mini-program-example/src/assets/component/map.png new file mode 100644 index 00000000000..e205568ba8c Binary files /dev/null and b/examples/mini-program-example/src/assets/component/map.png differ diff --git a/examples/mini-program-example/src/assets/component/media.png b/examples/mini-program-example/src/assets/component/media.png new file mode 100644 index 00000000000..62e54cdc1eb Binary files /dev/null and b/examples/mini-program-example/src/assets/component/media.png differ diff --git a/examples/mini-program-example/src/assets/component/nav.png b/examples/mini-program-example/src/assets/component/nav.png new file mode 100644 index 00000000000..24e15b307d4 Binary files /dev/null and b/examples/mini-program-example/src/assets/component/nav.png differ diff --git a/examples/mini-program-example/src/assets/component/nav_red.png b/examples/mini-program-example/src/assets/component/nav_red.png new file mode 100644 index 00000000000..4f3879faeaa Binary files /dev/null and b/examples/mini-program-example/src/assets/component/nav_red.png differ diff --git a/examples/mini-program-example/src/assets/component/view.png b/examples/mini-program-example/src/assets/component/view.png new file mode 100644 index 00000000000..03c900331da Binary files /dev/null and b/examples/mini-program-example/src/assets/component/view.png differ diff --git a/examples/mini-program-example/src/assets/component/view_red.png b/examples/mini-program-example/src/assets/component/view_red.png new file mode 100644 index 00000000000..4fd0acd72a9 Binary files /dev/null and b/examples/mini-program-example/src/assets/component/view_red.png differ diff --git a/examples/mini-program-example/src/assets/tab/api.png b/examples/mini-program-example/src/assets/tab/api.png new file mode 100644 index 00000000000..ba12ce45ba4 Binary files /dev/null and b/examples/mini-program-example/src/assets/tab/api.png differ diff --git a/examples/mini-program-example/src/assets/tab/api_select.png b/examples/mini-program-example/src/assets/tab/api_select.png new file mode 100644 index 00000000000..269d726af8a Binary files /dev/null and b/examples/mini-program-example/src/assets/tab/api_select.png differ diff --git a/examples/mini-program-example/src/assets/tab/component.png b/examples/mini-program-example/src/assets/tab/component.png new file mode 100644 index 00000000000..b5917ae7a60 Binary files /dev/null and b/examples/mini-program-example/src/assets/tab/component.png differ diff --git a/examples/mini-program-example/src/assets/tab/component_select.png b/examples/mini-program-example/src/assets/tab/component_select.png new file mode 100644 index 00000000000..f79d9954bc1 Binary files /dev/null and b/examples/mini-program-example/src/assets/tab/component_select.png differ diff --git a/examples/mini-program-example/src/assets/tab/home.png b/examples/mini-program-example/src/assets/tab/home.png new file mode 100644 index 00000000000..5450f8384b3 Binary files /dev/null and b/examples/mini-program-example/src/assets/tab/home.png differ diff --git a/examples/mini-program-example/src/assets/tab/home_select.png b/examples/mini-program-example/src/assets/tab/home_select.png new file mode 100644 index 00000000000..57d426fe492 Binary files /dev/null and b/examples/mini-program-example/src/assets/tab/home_select.png differ diff --git a/examples/mini-program-example/src/components/buttonList/index.scss b/examples/mini-program-example/src/components/buttonList/index.scss new file mode 100644 index 00000000000..dc703b6b99f --- /dev/null +++ b/examples/mini-program-example/src/components/buttonList/index.scss @@ -0,0 +1,127 @@ +@import "@/styles/variables.scss"; + +.button-list { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.hidden-control { + width: 90%; + font-size: 32px; + display: flex; + align-items: center; +} + +.stepper { + width: 24%; + height: 60px; + display: flex; + justify-content: space-around; + margin: 0 20px; + align-items: center; + border: 4px solid #ccc; + border-radius: 10px; +} + +.stepper .stepper-num { + display: block; + width: 36%; + text-align: center; + border-left: 4px solid #ccc; + border-right: 4px solid #ccc; +} + +.stepper .normal { + font-size: 42px; + padding: 0; + display: block; + width: 32%; + text-align: center; +} + +.api-page-btn-area { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + transition: 0.3s; +} + +.api-page-btn-area-hidden { + opacity: 0; + height: 0; +} + +.api-textarea-area { + width: 100%; + position: relative; +} + +.api-input-area { + width: 90%; + height: 200px; + margin: 20px auto; + border: $color-grey-0 solid 4px; + border-radius: 10px; + overflow: hidden; + transition: 0.3s; + resize: none; +} + +.api-input-area-hidden { + height: 0; + margin: 0 auto; + border: $color-grey-0 solid 0px; +} + +.textarea-control { + position: absolute; + right: 50px; + top: 36px; + height: 40px; + width: 40px; + border: 2px solid $color-grey-0; + background-color: $color-success; + border-radius: 100%; + opacity: $opacity-active; + text-align: center; + line-height: 40px; + z-index: 99; +} + +.taro-textarea { + resize: none; +} + +textarea { + resize: none; +} + +.api-page-btn { + color: $color-grey-6; + white-space: nowrap; + display: flex; + margin: 20px 50%; + padding: 15px 25px; + border-radius: 40px; + box-shadow: 5px 5px 5px 2px $color-grey-1, 0 0 0 0 $color-grey-1 inset; + background-color: $color-success; + transition: 0.3s; +} + +.api-page-btn-uncreate { + opacity: $opacity-disabled; + pointer-events: none; +} + +.api-page-btn-advanced { + background-color: $color-advanced; +} + +.api-page-btn:active { + color: $color-success; + background-color: $color-grey-6; + box-shadow: 0 0 0 0 $color-grey-1, 5px 5px 5px 2px $color-grey-1 inset; +} diff --git a/examples/mini-program-example/src/components/buttonList/index.tsx b/examples/mini-program-example/src/components/buttonList/index.tsx new file mode 100644 index 00000000000..9de2aa696b3 --- /dev/null +++ b/examples/mini-program-example/src/components/buttonList/index.tsx @@ -0,0 +1,178 @@ +import React from 'react' +import Taro from '@tarojs/taro' +import { View, Text, Textarea } from '@tarojs/components' +import CallbackContents from '@/components/callbackContents' +import './index.scss' + +/** + * 按钮列表 + * @returns + */ + +interface Props { + buttonList: any +} + +interface States { + inputData: Array + textareaControl: Array + hiddenNum: Number +} + +export default class Index extends React.Component { + state = { + inputData: [], + textareaControl: [], + hiddenNum: 0, + } + componentDidMount(): void { + const buttonList = this.props.buttonList + const inputData: Array = [] + const textareaControl: Array = [] + buttonList.forEach((item) => { + if (item['inputData']) { + inputData.push(item.inputData) + } else { + inputData.push(undefined) + } + textareaControl.push(true) + }) + this.setState({ + inputData, + }) + } + changeData = (e, apiIndex) => { + const { inputData } = this.state + try { + inputData[apiIndex] = JSON.parse(e.detail.value) + } catch (err) { + inputData[apiIndex] = e.detail.value + } + this.setState({ + inputData, + }) + } + submitData = (data, apiItem, apiIndex) => { + if (apiItem.func != null) { + if (typeof data == 'string') { + Taro.showToast({ + icon: 'error', + title: '请检查参数格式', + }) + } else if (data == undefined) { + apiItem.func(apiIndex) + } else { + apiItem.func(apiIndex, data) + } + } + } + minusHidden = () => { + const { hiddenNum } = this.state + if (hiddenNum > 0) { + this.setState({ + hiddenNum: hiddenNum - 1, + }) + } else { + Taro.showToast({ + title: '已全部显示', + }) + } + } + addHidden = () => { + const { hiddenNum } = this.state + const btnLength = this.props.buttonList.length + if (hiddenNum < btnLength) { + this.setState({ + hiddenNum: hiddenNum + 1, + }) + } else { + Taro.showToast({ + title: '已全部隐藏', + }) + } + } + hideTextarea = (apiIndex: Number) => { + const { textareaControl } = this.state + textareaControl[apiIndex] = !textareaControl[apiIndex] + this.setState({ + textareaControl, + }) + } + + isAdvancedAPI = (APIName) => { + try { + // @ts-ignore + return asAPIMap.get(APIName) + } catch (err) { + return false + } + } + render() { + const { buttonList } = this.props + const { inputData, textareaControl, hiddenNum } = this.state + return ( + + + 隐藏按钮 + + + - + + {hiddenNum} + + + + + + + {buttonList.map((item, apiIndex) => { + return ( + + {inputData[apiIndex] != undefined ? ( + + + polyline: + + circles: + + polygons: + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/map/map.scss b/examples/mini-program-example/src/pages/component/map/map.scss new file mode 100644 index 00000000000..6ff0008d547 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/map/map.scss @@ -0,0 +1,27 @@ +.flex-wrp { + margin-top: 60px; + display: flex; +} +.flex-item { + width: 200px; + height: 300px; + font-size: 26px; +} +.flex-item-V { + margin: 0 auto; + width: 300px; + height: 200px; +} + +.page-section-title { + text-align: center; +} + +.taro-map-container { + display: inline-block; + position: relative; + left: 0; + top: 0; + width: 100%; + object-position: inherit; +} diff --git a/examples/mini-program-example/src/pages/component/match-media/match-media.config.ts b/examples/mini-program-example/src/pages/component/match-media/match-media.config.ts new file mode 100644 index 00000000000..1399075dd43 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/match-media/match-media.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面', +}) diff --git a/examples/mini-program-example/src/pages/component/match-media/match-media.scss b/examples/mini-program-example/src/pages/component/match-media/match-media.scss new file mode 100644 index 00000000000..461be2c9702 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/match-media/match-media.scss @@ -0,0 +1,19 @@ +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/component/match-media/match-media.tsx b/examples/mini-program-example/src/pages/component/match-media/match-media.tsx new file mode 100644 index 00000000000..603f6d7d004 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/match-media/match-media.tsx @@ -0,0 +1,28 @@ +import { View, Image, MatchMedia } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './match-media.scss' +import React from 'react' +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default function PageView() { + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + +
+ + {' '} + + + + + + + + + ) +} diff --git a/examples/mini-program-example/src/pages/component/movable-view/movable-view.config.js b/examples/mini-program-example/src/pages/component/movable-view/movable-view.config.js new file mode 100644 index 00000000000..a80e22fff91 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/movable-view/movable-view.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'MovableView和MovableArea组件', +} diff --git a/examples/mini-program-example/src/pages/component/movable-view/movable-view.js b/examples/mini-program-example/src/pages/component/movable-view/movable-view.js new file mode 100644 index 00000000000..9e204b3f3b4 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/movable-view/movable-view.js @@ -0,0 +1,133 @@ +import './movable-view.scss' + +import React from 'react' +import { Button, MovableArea, MovableView, View } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageView extends React.Component { + state = { + x: 0, + y: 0, + scale: 2, + } + + tap = () => { + this.setState({ + x: 30, + y: 30, + }) + } + + tap2 = () => { + this.setState({ + scale: 3, + }) + } + + onChange(e) { + console.log(e.detail) + } + + onScale(e) { + console.log(e.detail) + } + + render() { + return ( + + +
+ + {' '} + + + + + movable-view区域小于movable-area + + + text + + + + + + + + + movable-view区域大于movable-area + + + text + + + + + + 只可以横向移动 + + + text + + + + + + 只可以纵向移动 + + + text + + + + + + 可超出边界 + + + text + + + + + + 带有惯性 + + + text + + + + + + 可放缩 + + + text + + + + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/movable-view/movable-view.scss b/examples/mini-program-example/src/pages/component/movable-view/movable-view.scss new file mode 100644 index 00000000000..ced1f46b0ac --- /dev/null +++ b/examples/mini-program-example/src/pages/component/movable-view/movable-view.scss @@ -0,0 +1,46 @@ +.example-body{ + text-align: center; +} + +.movable-view { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + width: 50px; + background: #1AAD19; + color: #fff; +} + +.movable-area { + height: 200px; + width: 200px; + margin: 25px 0px 0 25px; + background-color: #ccc; + overflow: hidden; +} +.max { + width: 300px; + height: 300px; +} +.page-section { + width: 100%; + margin-bottom: 10px; +} + +.page-section-title { + margin-top: 25px; + font-size: 14px; + color: #999999; + margin-bottom: 5px; + padding-left: 15px; + padding-right: 15px; +} + +.page-section-title.first { + margin-top: 0; +} +.btn-area { + margin-top: 10px; + padding-bottom: 50px; +} diff --git a/examples/mini-program-example/src/pages/component/navigator/navigator.config.js b/examples/mini-program-example/src/pages/component/navigator/navigator.config.js new file mode 100644 index 00000000000..dcd052c2f04 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/navigator/navigator.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Navigator组件', +} diff --git a/examples/mini-program-example/src/pages/component/navigator/navigator.js b/examples/mini-program-example/src/pages/component/navigator/navigator.js new file mode 100644 index 00000000000..daa1b96778f --- /dev/null +++ b/examples/mini-program-example/src/pages/component/navigator/navigator.js @@ -0,0 +1,51 @@ +import './navigator.scss' + +import Taro from '@tarojs/taro' +import React from 'react' + +import { View, Navigator, Text } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageSwitch extends React.Component { + state = {} + + render() { + return ( + + +
+ + {' '} + + + + + + {Taro.getEnv() != Taro.ENV_TYPE.WEB && Taro.getEnv() != Taro.ENV_TYPE.HARMONYHYBRID ? ( + + + 跳转到新页面 + + + 在当前页打开 + + + ) : ( + 暂未支持，请使用Taro API + )} + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/navigator/navigator.scss b/examples/mini-program-example/src/pages/component/navigator/navigator.scss new file mode 100644 index 00000000000..dd98af4c271 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/navigator/navigator.scss @@ -0,0 +1,11 @@ +.example-body{ + text-align: center; +} + +.example-body__navigators-item { + height: 80px; + line-height: 80px; + margin: 20px 100px 0; + text-align: center; + border: 1px solid #ccc; +} diff --git a/examples/mini-program-example/src/pages/component/page-container/page-container.config.ts b/examples/mini-program-example/src/pages/component/page-container/page-container.config.ts new file mode 100644 index 00000000000..1399075dd43 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/page-container/page-container.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面', +}) diff --git a/examples/mini-program-example/src/pages/component/page-container/page-container.scss b/examples/mini-program-example/src/pages/component/page-container/page-container.scss new file mode 100644 index 00000000000..461be2c9702 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/page-container/page-container.scss @@ -0,0 +1,19 @@ +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/component/page-container/page-container.tsx b/examples/mini-program-example/src/pages/component/page-container/page-container.tsx new file mode 100644 index 00000000000..1110e9488cf --- /dev/null +++ b/examples/mini-program-example/src/pages/component/page-container/page-container.tsx @@ -0,0 +1,153 @@ +import { View, Text, Button, PageContainer } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './page-container.scss' +import React, { useState } from 'react' +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default function PageView() { + const [container_show, setContainerShow] = useState(false) + const [position, setTransitionPosition] = useState('bottom') + const [round, setRound] = useState(false) + const [overlay, setOverlay] = useState(false) + const [overlayStyle, setOverlayStyle] = useState('overlay_black') + + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + +
+ + {' '} + + + + setContainerShow(false)} + bindbeforeenter={() => { + console.log('==bindbeforeenter==') + }} + bindenter={() => { + console.log('==bindenter==') + }} + bindafterenter={() => { + console.log('==bindafterenter==') + }} + bindbeforeleave={() => { + console.log('==bindbeforeleave==') + }} + bindleave={() => { + console.log('==bindleave==') + }} + bindafterleave={() => { + console.log('==bindafterleave==') + }} + duration={2000} + zIndex={20} + customStyle='customStyle' + > + Hello world! + Hello world! + Hello world! + Hello world! + + + + + 弹出位置 + + + + + + + + + 弹出圆角 + + + + 遮罩层 + + + + + + + + + + ) +} diff --git a/examples/mini-program-example/src/pages/component/picker-view/picker-view.config.js b/examples/mini-program-example/src/pages/component/picker-view/picker-view.config.js new file mode 100644 index 00000000000..03270f5b0d6 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/picker-view/picker-view.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'PickerView组件', +} diff --git a/examples/mini-program-example/src/pages/component/picker-view/picker-view.js b/examples/mini-program-example/src/pages/component/picker-view/picker-view.js new file mode 100644 index 00000000000..527ecc79548 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/picker-view/picker-view.js @@ -0,0 +1,82 @@ +import Taro, { Component } from '@tarojs/taro' +import React from 'react' + +import { View, PickerView, PickerViewColumn } from '@tarojs/components' +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class Picks extends React.Component { + constructor() { + super(...arguments) + const date = new Date() + const years = [] + const months = [] + const days = [] + for (let i = 1990; i <= date.getFullYear(); i++) { + years.push(i) + } + for (let i = 1; i <= 12; i++) { + months.push(i) + } + for (let i = 1; i <= 31; i++) { + days.push(i) + } + this.state = { + years: years, + year: date.getFullYear(), + months: months, + month: 2, + days: days, + day: 2, + value: [9999, 1, 1], + } + } + + onChange = (e) => { + const val = e.detail.value + this.setState({ + year: this.state.years[val[0]], + month: this.state.months[val[1]], + day: this.state.days[val[2]], + value: val, + }) + } + + render() { + return ( + + +
+ + {' '} + + + + {this.state.year}年{this.state.month}月{this.state.day}日 + + + + {this.state.years.map((item) => { + return {item}年 + })} + + + {this.state.months.map((item) => { + return {item}月 + })} + + + {this.state.days.map((item) => { + return {item}日 + })} + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/picker/picker.config.js b/examples/mini-program-example/src/pages/component/picker/picker.config.js new file mode 100644 index 00000000000..00fadb61918 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/picker/picker.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Picker组件', +} diff --git a/examples/mini-program-example/src/pages/component/picker/picker.js b/examples/mini-program-example/src/pages/component/picker/picker.js new file mode 100644 index 00000000000..0d6caa05c13 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/picker/picker.js @@ -0,0 +1,125 @@ +import './picker.scss' + +import Taro from '@tarojs/taro' +import React from 'react' +import { View, Text, Picker } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PagePicker extends React.Component { + state = { + timeSel: '12:01', + dateSel: '2018-04-22', + selectorValue: 1, + mulitSelectorValues: [0, 0], + selector: ['美国', '中国', '巴西', '日本'], + multiSelector: [ + ['饭', '粥', '粉'], + ['猪肉', '牛肉'], + ], + } + + handleChange = (e) => { + this.setState({ + selectorValue: e.detail.value, + }) + } + + handleMulitChange = (e) => { + const values = e.detail.value.map((item, index) => { + return this.state.multiSelector[index][item] + }) + this.setState({ + mulitSelectorValues: e.detail.value, + }) + } + + handleColumnchange = (e) => { + console.log(e.detail) + } + + handleTimeChange = (e) => { + this.setState({ + timeSel: e.detail.value, + }) + } + + handleDateChange = (e) => { + const val = e.detail.value + const dateSel = Array.isArray(val) ? val.join('-') : val + this.setState({ dateSel }) + } + + render() { + const { selector, multiSelector, selectorValue, mulitSelectorValues, timeSel, dateSel } = this.state + return ( + +
+ + {' '} + + + + + 普通选择器 + + + + 当前选择：{selector[selectorValue]} + + + + {Taro.getEnv() !== Taro.ENV_TYPE.ALIPAY ? ( + + + 多行选择器 + + + + + 当前选择：{' '} + {`${this.state.multiSelector[0][mulitSelectorValues[0]]}, ${ + this.state.multiSelector[1][mulitSelectorValues[1]] + }`} + + + + + ) : ( + + + 支付宝小程序暂不支持多列选择器 + + + )} + + + 时间选择器 + + + + 当前选择：{timeSel} + + + + + + 日期选择器 + + + + 当前选择：{dateSel} + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/picker/picker.scss b/examples/mini-program-example/src/pages/component/picker/picker.scss new file mode 100644 index 00000000000..953c842a08d --- /dev/null +++ b/examples/mini-program-example/src/pages/component/picker/picker.scss @@ -0,0 +1,5 @@ +.picker{ + position: relative; + padding: 15px 30px; + background-color: #FFFFFF; +} \ No newline at end of file diff --git a/examples/mini-program-example/src/pages/component/progress/progress.config.js b/examples/mini-program-example/src/pages/component/progress/progress.config.js new file mode 100644 index 00000000000..a05dc9d8175 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/progress/progress.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Progress组件', +} diff --git a/examples/mini-program-example/src/pages/component/progress/progress.js b/examples/mini-program-example/src/pages/component/progress/progress.js new file mode 100644 index 00000000000..eb2531b98e5 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/progress/progress.js @@ -0,0 +1,84 @@ +import './progress.scss' +import React from 'react' +import { View, Progress, Button } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageView extends React.Component { + constructor() { + super(...arguments) + this._timmer = null + } + + state = { + progress: 0, + } + + handleStart = () => { + if (this._timmer || this.state.progress > 100) return + this._timmer = setInterval(() => { + const value = this.state.progress + 2 + if (value > 100) { + return this.handleStop() + } + this.setState({ + progress: value, + }) + }, 100) + } + + handleStop = () => { + if (this._timmer) { + clearInterval(this._timmer) + this._timmer = null + } + } + + handleReset = () => { + this.handleStop() + this.setState({ + progress: 0, + }) + } + + render() { + const { progress } = this.state + return ( + + +
+ + {' '} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/progress/progress.scss b/examples/mini-program-example/src/pages/component/progress/progress.scss new file mode 100644 index 00000000000..e33741f4ecd --- /dev/null +++ b/examples/mini-program-example/src/pages/component/progress/progress.scss @@ -0,0 +1,5 @@ +.example-progress { + font-size: 32px; + position: relative; + margin-bottom: 80px; +} \ No newline at end of file diff --git a/examples/mini-program-example/src/pages/component/radio-group/radio-group.config.ts b/examples/mini-program-example/src/pages/component/radio-group/radio-group.config.ts new file mode 100644 index 00000000000..1399075dd43 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/radio-group/radio-group.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面', +}) diff --git a/examples/mini-program-example/src/pages/component/radio-group/radio-group.scss b/examples/mini-program-example/src/pages/component/radio-group/radio-group.scss new file mode 100644 index 00000000000..198f1bcdd14 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/radio-group/radio-group.scss @@ -0,0 +1,46 @@ + +.furit-multiple-selected { + left: 3px; + top: 3px; + width: 14px; + height: 14px; + background: #1aad19; +} + +.furit-multiple-normal { + left: 3px; + top: 3px; + width: 12px; + height: 12px; + stroke-width: 2; + border-color:#1aad19; + fill: #fcfff4; + border-style: solid; +} + +.furit-selected { + left: 3px; + top: 3px; + width: 14px; + height: 14px; + background: #1aad19; + border-radius: 50%; +} + +.furit-normal { + left: 3px; + top: 3px; + width: 12px; + height: 12px; + stroke-width: 2; + border-color:#1aad19; + fill: #fcfff4; + border-radius: 50%; + border-style:solid; +} + +.furit-item { + display: flex; + flex-direction: row; + align-content: center; +} diff --git a/examples/mini-program-example/src/pages/component/radio-group/radio-group.tsx b/examples/mini-program-example/src/pages/component/radio-group/radio-group.tsx new file mode 100644 index 00000000000..0a1f45bd27e --- /dev/null +++ b/examples/mini-program-example/src/pages/component/radio-group/radio-group.tsx @@ -0,0 +1,59 @@ +import { View, Image, Text, RadioGroup, Radio, Label } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './radio-group.scss' +import React, { useState } from 'react' +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +const furits = [ + { + key: 'apple', + name: '苹果', + }, + { + key: 'banana', + name: '香蕉', + }, + { + key: 'peach', + name: '桃子', + }, +] +export default function PageView() { + useLoad(() => { + console.log('Page loaded.') + }) + + let [singleSelectedFurits, setSingleSelectedFurits] = useState(null) + + return ( + + +
+ + {' '} + + + + { + setSingleSelectedFurits(event.detail.value) + }} + > +

单选：

+ {furits.map((item) => { + let checked = singleSelectedFurits == item.key + return ( +
+ +
+ +
+ ) + })} + + + + ) +} diff --git a/examples/mini-program-example/src/pages/component/radio/radio.config.js b/examples/mini-program-example/src/pages/component/radio/radio.config.js new file mode 100644 index 00000000000..d4cfe62ecba --- /dev/null +++ b/examples/mini-program-example/src/pages/component/radio/radio.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Radio组件', +} diff --git a/examples/mini-program-example/src/pages/component/radio/radio.js b/examples/mini-program-example/src/pages/component/radio/radio.js new file mode 100644 index 00000000000..0e8eaad9864 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/radio/radio.js @@ -0,0 +1,106 @@ +import './radio.scss' +import React from 'react' +import { Component } from '@tarojs/taro' +import { View, Text, Radio, Label, RadioGroup } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageRadio extends React.Component { + state = { + isChecked: false, + selectValue: '中国', + list: [ + { + value: '美国', + text: '美国', + checked: false, + }, + { + value: '中国', + text: '中国', + checked: true, + }, + { + value: '巴西', + text: '巴西', + checked: false, + }, + { + value: '日本', + text: '日本', + checked: false, + }, + { + value: '英国', + text: '英国', + checked: false, + }, + { + value: '法国', + text: '法国', + checked: false, + }, + ], + } + + radioChange = (e) => { + const list = this.state.list.map((item) => { + item.checked = item.value == e.detail.value + return item + }) + this.setState({ + list, + selectValue: e.detail.value, + }) + } + + render() { + return ( + + +
+ + {' '} + + + + + + 默认样式 + + + + 选中 + + + 未选中 + + + + + + 推荐展示样式 + + + 选中的值是: {this.state.selectValue} + + + {this.state.list.map((item, i) => { + return ( + + ) + })} + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/radio/radio.scss b/examples/mini-program-example/src/pages/component/radio/radio.scss new file mode 100644 index 00000000000..f991fd1ffcc --- /dev/null +++ b/examples/mini-program-example/src/pages/component/radio/radio.scss @@ -0,0 +1,54 @@ +.components-page__body { + padding: 0; + .example-body{ + text-align: center; + } +} + +.example-body__radios { + position: relative; + padding: 0px 15px; + background-color: #FFFFFF; + &::before { + content: " "; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 1px; + border-top: 1px solid #e5e5e5; + color: #e5e5e5; + } + &::after { + content: " "; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 1px; + border-top: 1px solid #e5e5e5; + color: #e5e5e5; + } + &-item { + position: relative; + display: flex; + padding: 20px 15px; + &:not(:first-child) { + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 1px; + border-top: 1px solid #e5e5e5; + color: #e5e5e5; + left: 15px; + } + } + } +} + +.example-body__select-box { + margin: 20px 0; +} \ No newline at end of file diff --git a/examples/mini-program-example/src/pages/component/root-portal/root-portal.config.ts b/examples/mini-program-example/src/pages/component/root-portal/root-portal.config.ts new file mode 100644 index 00000000000..1399075dd43 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/root-portal/root-portal.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面', +}) diff --git a/examples/mini-program-example/src/pages/component/root-portal/root-portal.scss b/examples/mini-program-example/src/pages/component/root-portal/root-portal.scss new file mode 100644 index 00000000000..461be2c9702 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/root-portal/root-portal.scss @@ -0,0 +1,19 @@ +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/component/root-portal/root-portal.tsx b/examples/mini-program-example/src/pages/component/root-portal/root-portal.tsx new file mode 100644 index 00000000000..7a1406c892a --- /dev/null +++ b/examples/mini-program-example/src/pages/component/root-portal/root-portal.tsx @@ -0,0 +1,39 @@ +import { View, Text, RootPortal } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './root-portal.scss' +import React from 'react' +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default function PageView() { + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + +
+ + {' '} + + + + Hello RootPortal! + Hello RootPortal! + + + ) +} diff --git a/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.config.js b/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.config.js new file mode 100644 index 00000000000..7e4aebdeed1 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'ScrollView组件', +} diff --git a/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.js b/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.js new file mode 100644 index 00000000000..455fd617fe6 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.js @@ -0,0 +1,52 @@ +import './scroll-view.scss' +import React from 'react' +import { View, Text, ScrollView, Button } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageView extends React.Component { + render() { + return ( + + +
+ + {' '} + + + + + + Horizontal 横向滚动 + + + + + + + + + + + + + Vertical 纵向滚动 + + + + + + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.scss b/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.scss new file mode 100644 index 00000000000..7e2431248cb --- /dev/null +++ b/examples/mini-program-example/src/pages/component/scroll-view/scroll-view.scss @@ -0,0 +1,24 @@ +/*postcss-pxtransform rn eject enable*/ +.scroll-view { + .example-body__scroll-view { + &--H { + white-space: nowrap; + .example-body__scroll-view-item { + display: inline-block; + width: 100%; + background-color: #0bb20c; + margin: 5px; + } + } + &--V { + height: 300px; + } + .example-body__scroll-view-item { + height: 300px; + background-color: #0bb20c; + margin: 5px; + } + } +} + +/*postcss-pxtransform rn eject disable*/ diff --git a/examples/mini-program-example/src/pages/component/share-element/share-element.config.ts b/examples/mini-program-example/src/pages/component/share-element/share-element.config.ts new file mode 100644 index 00000000000..e9d3a5c067a --- /dev/null +++ b/examples/mini-program-example/src/pages/component/share-element/share-element.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: 'ShareElement', +}) diff --git a/examples/mini-program-example/src/pages/component/share-element/share-element.scss b/examples/mini-program-example/src/pages/component/share-element/share-element.scss new file mode 100644 index 00000000000..461be2c9702 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/share-element/share-element.scss @@ -0,0 +1,19 @@ +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/component/share-element/share-element.tsx b/examples/mini-program-example/src/pages/component/share-element/share-element.tsx new file mode 100644 index 00000000000..1f947390b63 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/share-element/share-element.tsx @@ -0,0 +1,32 @@ +import { View, Text, Button, PageContainer, ShareElement } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './share-element.scss' +import React, { useState } from 'react' +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default function PageView() { + const [container_show, setContainerShow] = useState(false) + const [position, setTransitionPosition] = useState('bottom') + const [round, setRound] = useState(false) + const [overlay, setOverlay] = useState(false) + const [overlayStyle, setOverlayStyle] = useState('overlay_black') + + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + +
+ + {' '} + + + + ShareElement动画正在开发中…… + + + ) +} diff --git a/examples/mini-program-example/src/pages/component/slider/slider.config.js b/examples/mini-program-example/src/pages/component/slider/slider.config.js new file mode 100644 index 00000000000..05231456964 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/slider/slider.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Slider组件', +} diff --git a/examples/mini-program-example/src/pages/component/slider/slider.js b/examples/mini-program-example/src/pages/component/slider/slider.js new file mode 100644 index 00000000000..86a9734fe42 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/slider/slider.js @@ -0,0 +1,98 @@ +import React from 'react' +import { View, Button, Text, Slider } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageSlider extends React.Component { + state = { + value: 50, + } + + setValue = () => { + const value = Math.floor(Math.random() * 100) + console.log(value) + this.setState({ + value, + }) + } + + handleChaning = (e) => {} + + handleChange = (e) => {} + + render() { + return ( + + +
+ + {' '} + + + + + + 设置step + + + + + + + + + 显示当前的value + + + + + + + + + 设置最小/最大值 + + + + + + + + + UI设置 + + + + + + + + + 数据绑定 + + + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.config.ts b/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.config.ts new file mode 100644 index 00000000000..1399075dd43 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面', +}) diff --git a/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.scss b/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.scss new file mode 100644 index 00000000000..461be2c9702 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.scss @@ -0,0 +1,19 @@ +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.tsx b/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.tsx new file mode 100644 index 00000000000..0f064cfb820 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/sticky-header/sticky-header.tsx @@ -0,0 +1,46 @@ +import { View, StickyHeader, StickySection, CoverImage } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './sticky-header.scss' +import React from 'react' +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default function PageView() { + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + +
+ + {' '} + + + + 我是吸顶容器 + + + + + + + + ) +} diff --git a/examples/mini-program-example/src/pages/component/swiper/swiper.config.js b/examples/mini-program-example/src/pages/component/swiper/swiper.config.js new file mode 100644 index 00000000000..476ffe05dba --- /dev/null +++ b/examples/mini-program-example/src/pages/component/swiper/swiper.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Swiper组件', +} diff --git a/examples/mini-program-example/src/pages/component/swiper/swiper.js b/examples/mini-program-example/src/pages/component/swiper/swiper.js new file mode 100644 index 00000000000..c378ef66ae5 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/swiper/swiper.js @@ -0,0 +1,217 @@ +import './swiper.scss' +import React from 'react' + +import { Component } from '@tarojs/taro' +import { View, Text, Swiper, SwiperItem, Switch, Slider } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageView extends React.Component { + constructor() { + super(...arguments) + this.state = { + current: 1, + duration: 500, + interval: 5000, + isCircular: true, + verticalIsCircular: true, + isAutoplay: false, + verticalIsAutoplay: false, + hasIndicatorDots: true, + verticalHasIndicatorDots: true, + } + } + + setAutoPlay = (e) => { + this.setState({ + isAutoplay: e.detail.value, + }) + } + + setVerticalAutoPlay = (e) => { + this.setState({ + verticalIsAutoplay: e.detail.value, + }) + } + + setCircular = (e) => { + this.setState({ + isCircular: e.detail.value, + }) + } + + setVerticalCircular = (e) => { + this.setState({ + verticalIsCircular: e.detail.value, + }) + } + + setIndicatorDots = (e) => { + this.setState({ + hasIndicatorDots: e.detail.value, + }) + } + + setVerticalIndicatorDots = (e) => { + this.setState({ + verticalHasIndicatorDots: e.detail.value, + }) + } + + setInterval = (e) => { + this.setState({ + interval: e.detail.value, + }) + } + + setDuration = (e) => { + console.log(this) + this.setState({ + duration: e.detail.value, + }) + } + + render() { + const { + current, + isAutoplay, + duration, + isCircular, + interval, + hasIndicatorDots, + verticalIsCircular, + verticalHasIndicatorDots, + verticalIsAutoplay, + } = this.state + return ( + + +
+ + {' '} + + + + + + Swiper 横向滑动 + + + + + + + + + + + + + + + + 指示点 + + + + 自动播放 + + + + 循环播放 + + + + + + + 幻灯片切换时长(ms) + + + + + + + + 自动播放间隔时长(ms) + + + + + + + + + + + Swiper 纵向滑动 + + + + + + + + + + + + + + + + + 指示点 + + + + 自动播放 + + + + 循环播放 + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/swiper/swiper.scss b/examples/mini-program-example/src/pages/component/swiper/swiper.scss new file mode 100644 index 00000000000..7005b674a24 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/swiper/swiper.scss @@ -0,0 +1,62 @@ +.components-page__body { + &.swiper { + padding: 0; + } + .switch-list { + position: relative; + padding: 0 15px; + font-size: 30px; + background-color: #FFFFFF; + &__item { + position: relative; + display: flex; + padding: 10px 0; + &:not(:first-child) { + &::before { + content: ""; + position: absolute; + left: 15px; + right: -15px; + top: 0; + height: 1px; + border-top: 1px solid #e5e5e5; + color: #e5e5e5; + } + } + } + &__text { + display: flex; + flex: 1; + align-items: center; + padding-left: 15px; + } + } + .slider-list { + margin-top: 80px; + padding: 0 40px; + &__item { + margin-bottom: 40px; + &-header { + font-size: 28px; + color: #999999; + text-align: center; + margin-bottom: 15px; + } + &-body {} + } + } +} +.demo-text { + &-1 { + height: 150PX; + background-color: #0bb20c; + } + &-2 { + height: 150PX; + background-color: #4F7DE2; + } + &-3 { + height: 150PX; + background-color: #ce3c39; + } +} diff --git a/examples/mini-program-example/src/pages/component/switch/switch.config.js b/examples/mini-program-example/src/pages/component/switch/switch.config.js new file mode 100644 index 00000000000..306ffb24a2f --- /dev/null +++ b/examples/mini-program-example/src/pages/component/switch/switch.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Switch组件', +} diff --git a/examples/mini-program-example/src/pages/component/switch/switch.js b/examples/mini-program-example/src/pages/component/switch/switch.js new file mode 100644 index 00000000000..3255bed58be --- /dev/null +++ b/examples/mini-program-example/src/pages/component/switch/switch.js @@ -0,0 +1,66 @@ +import './switch.scss' +import React from 'react' +import { View, Text, Switch } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageSwitch extends React.Component { + state = { + isChecked: true, + } + + setIsChecked = (e) => { + const { detail } = e + this.setState({ + isChecked: detail.value, + }) + } + + render() { + return ( + +
+ + {' '} + + + + + 静态展示 + + + + 关闭 + + + + 开启中 + + + + 更换颜色 + + + + CheckBox形式 + + + + + + + 数据绑定 + + + + {this.state.isChecked ? '开启' : '关闭'} + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/switch/switch.scss b/examples/mini-program-example/src/pages/component/switch/switch.scss new file mode 100644 index 00000000000..ec6cd7ad0db --- /dev/null +++ b/examples/mini-program-example/src/pages/component/switch/switch.scss @@ -0,0 +1,28 @@ +.switch-list { + position: relative; + padding: 0 15px; + background-color: #FFFFFF; + &__item { + position: relative; + display: flex; + padding: 10px 0; + &:not(:first-child) { + &::before { + content: ""; + position: absolute; + left: 15px; + right: -15px; + top: 0; + height: 1px; + border-top: 1px solid #e5e5e5; + color: #e5e5e5; + } + } + } + &__text { + display: flex; + flex: 1; + align-items: center; + padding-left: 15px; + } +} \ No newline at end of file diff --git a/examples/mini-program-example/src/pages/component/text/text.config.js b/examples/mini-program-example/src/pages/component/text/text.config.js new file mode 100644 index 00000000000..d00c6ad73a1 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/text/text.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Text组件', +} diff --git a/examples/mini-program-example/src/pages/component/text/text.js b/examples/mini-program-example/src/pages/component/text/text.js new file mode 100644 index 00000000000..8fdeacf2180 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/text/text.js @@ -0,0 +1,62 @@ +import './text.scss' +import React from 'react' +import { View, Text } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageView extends React.Component { + constructor() { + super(...arguments) + } + + render() { + return ( + + +
+ + {' '} + + + + + + H5、小程序通用 + + + + 可选择的文字 + + + 不可选择的文字 + + + + + + 仅工作在小程序 + + + + 不支持多 空格文字 + + + 多 空格文字(ensp) + + + 多 空格文字(nbsp) + + + 不解码文字> + + + 解码文字> + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/text/text.scss b/examples/mini-program-example/src/pages/component/text/text.scss new file mode 100644 index 00000000000..23089cff12c --- /dev/null +++ b/examples/mini-program-example/src/pages/component/text/text.scss @@ -0,0 +1,7 @@ +.example-body{ + &__text{ + font-size: 36px; + text-align: center; + margin-bottom: 20px; + } +} \ No newline at end of file diff --git a/examples/mini-program-example/src/pages/component/textarea/textarea.config.js b/examples/mini-program-example/src/pages/component/textarea/textarea.config.js new file mode 100644 index 00000000000..f15fe74db5d --- /dev/null +++ b/examples/mini-program-example/src/pages/component/textarea/textarea.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Textare组件', +} diff --git a/examples/mini-program-example/src/pages/component/textarea/textarea.js b/examples/mini-program-example/src/pages/component/textarea/textarea.js new file mode 100644 index 00000000000..4d6a1d0ea43 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/textarea/textarea.js @@ -0,0 +1,78 @@ +import './textarea.scss' + +import React from 'react' +import { View, Text, Textarea, Button } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageTextarea extends React.Component { + state = { + value: '初始值', + } + + handleClick = () => { + this.setState({ + value: '点击了按钮', + }) + } + + blur = () => { + console.log('blur') + } + + focus = () => { + console.log('focus') + } + + input = (e) => { + console.log(e) + this.setState({ + value: e.target.value, + }) + } + + render() { + return ( + + +
+ + {' '} + + + + + + 输入区域高度自适应，不会出现滚动条 + + + + + + + + + + + + 这是一个可以自动聚焦的textarea + + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/textarea/textarea.scss b/examples/mini-program-example/src/pages/component/textarea/textarea.scss new file mode 100644 index 00000000000..1aac714778d --- /dev/null +++ b/examples/mini-program-example/src/pages/component/textarea/textarea.scss @@ -0,0 +1,6 @@ +.components-page__body{ + padding: 0; + .example-body__button { + text-align: center; +} +} \ No newline at end of file diff --git a/examples/mini-program-example/src/pages/component/video/video.config.js b/examples/mini-program-example/src/pages/component/video/video.config.js new file mode 100644 index 00000000000..eebc80b4b8c --- /dev/null +++ b/examples/mini-program-example/src/pages/component/video/video.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'Video组件', +} diff --git a/examples/mini-program-example/src/pages/component/video/video.js b/examples/mini-program-example/src/pages/component/video/video.js new file mode 100644 index 00000000000..ce535a5bfca --- /dev/null +++ b/examples/mini-program-example/src/pages/component/video/video.js @@ -0,0 +1,37 @@ +import './video.scss' +import React from 'react' +import { View, Video } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageView extends React.Component { + render() { + return ( + + +
+ + {' '} + + + + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/video/video.scss b/examples/mini-program-example/src/pages/component/video/video.scss new file mode 100644 index 00000000000..dc354861f09 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/video/video.scss @@ -0,0 +1,3 @@ +.example-body{ + text-align: center; +} \ No newline at end of file diff --git a/examples/mini-program-example/src/pages/component/view/view.config.js b/examples/mini-program-example/src/pages/component/view/view.config.js new file mode 100644 index 00000000000..17cd1b0a9c2 --- /dev/null +++ b/examples/mini-program-example/src/pages/component/view/view.config.js @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'View组件', +} diff --git a/examples/mini-program-example/src/pages/component/view/view.js b/examples/mini-program-example/src/pages/component/view/view.js new file mode 100644 index 00000000000..4f1641f038a --- /dev/null +++ b/examples/mini-program-example/src/pages/component/view/view.js @@ -0,0 +1,48 @@ +import './view.scss' + +import React from 'react' +import { View, Text } from '@tarojs/components' + +import Header from '../../../components/head/head' +import ComponentState from '../../../components/component_state/component_state' + +export default class PageView extends React.Component { + render() { + return ( + + +
+ + {' '} + + + + + + flex-direction: row 横向布局 + + + + + + + + + + + + flex-direction: column 纵向布局 + + + + + + + + + + + + ) + } +} diff --git a/examples/mini-program-example/src/pages/component/view/view.scss b/examples/mini-program-example/src/pages/component/view/view.scss new file mode 100644 index 00000000000..e4dbdd328fa --- /dev/null +++ b/examples/mini-program-example/src/pages/component/view/view.scss @@ -0,0 +1,23 @@ +.example{ + margin-bottom: 60px; + &-body{ + &__list{ + display: flex; + &-item{ + flex: auto; + height: 300px; + background-color: #0bb20c; + margin: 5px; + } + } + &__list--vertical{ + width: 200px; + flex-direction: column; + margin-left: auto; + margin-right: auto; + .example-body__list-item{ + flex: 1 1 200px; + } + } + } +} diff --git a/examples/mini-program-example/src/pages/error/index.config.ts b/examples/mini-program-example/src/pages/error/index.config.ts new file mode 100644 index 00000000000..8e4792d0aa4 --- /dev/null +++ b/examples/mini-program-example/src/pages/error/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '页面未找到', +} diff --git a/examples/mini-program-example/src/pages/error/index.scss b/examples/mini-program-example/src/pages/error/index.scss new file mode 100644 index 00000000000..a282368e2e5 --- /dev/null +++ b/examples/mini-program-example/src/pages/error/index.scss @@ -0,0 +1,7 @@ +.error-page { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/examples/mini-program-example/src/pages/error/index.tsx b/examples/mini-program-example/src/pages/error/index.tsx new file mode 100644 index 00000000000..22cadb13615 --- /dev/null +++ b/examples/mini-program-example/src/pages/error/index.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { View } from '@tarojs/components' +import './index.scss' + +/** + * 页面未找到 + * @returns + */ + +export default class Index extends React.Component { + render() { + return 页面未找到啦 + } +} diff --git a/examples/mini-program-example/src/pages/index/index.config.ts b/examples/mini-program-example/src/pages/index/index.config.ts new file mode 100644 index 00000000000..a7c25c75b76 --- /dev/null +++ b/examples/mini-program-example/src/pages/index/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '首页', +}) diff --git a/examples/mini-program-example/src/pages/index/index.scss b/examples/mini-program-example/src/pages/index/index.scss new file mode 100644 index 00000000000..20fe3a04711 --- /dev/null +++ b/examples/mini-program-example/src/pages/index/index.scss @@ -0,0 +1,24 @@ +//@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + +.buttonStyle { + width: 200px; + margin-top: 100px; +} diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx new file mode 100644 index 00000000000..135869ac3e7 --- /dev/null +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -0,0 +1,70 @@ +import { View, Button } from '@tarojs/components' +import Taro, { useLoad, useDidShow } from '@tarojs/taro' +import './index.scss' +import { TestConsole } from '@/util/util' +import nativeApi from "@/util/nativeApi"; + +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + useDidShow(() => { + if (Taro.getCurrentInstance().preloadData) { + TestConsole.consoleSuccess( + '接收来至pages/api/basics/index页面 Taro。preload传递的参数：' + + JSON.stringify(Taro.getCurrentInstance().preloadData) + ) + } + }) + return ( + + + + + + + + ) +} diff --git a/examples/mini-program-example/src/pages/performance/index/index.config.ts b/examples/mini-program-example/src/pages/performance/index/index.config.ts new file mode 100644 index 00000000000..bb4e054d12d --- /dev/null +++ b/examples/mini-program-example/src/pages/performance/index/index.config.ts @@ -0,0 +1,7 @@ +export default { + navigationBarTitleText: '性能压测', + enablePullDownRefresh: true, + backgroundTextStyle: 'dark', + onReachBottomDistance: 50, + pageOrientation: 'auto', +} diff --git a/examples/mini-program-example/src/pages/performance/index/index.scss b/examples/mini-program-example/src/pages/performance/index/index.scss new file mode 100644 index 00000000000..42bb2fbda5e --- /dev/null +++ b/examples/mini-program-example/src/pages/performance/index/index.scss @@ -0,0 +1,15 @@ +@import "@/styles/variables.scss"; + +.test-style { + color: #f5f5f5; + background-color: $color-success; +} + +.callback-content { + display: none; +} + +.performance_result { + font-size: 20px; + margin-top: 5px; +} diff --git a/examples/mini-program-example/src/pages/performance/index/index.tsx b/examples/mini-program-example/src/pages/performance/index/index.tsx new file mode 100644 index 00000000000..84efe056439 --- /dev/null +++ b/examples/mini-program-example/src/pages/performance/index/index.tsx @@ -0,0 +1,548 @@ +import React from 'react' +import { View, Button, Text } from '@tarojs/components' +// import { TestConsole } from '@/util/util' +import './index.scss' +import Taro from "@tarojs/taro"; + +function methodTime(fun: (endFun: ()=>void)=>void): Promise { + return new Promise((resolve)=>{ + let startTimeTaro: number = Date.now() + fun(()=>{ + const excuteTime = Date.now() - startTimeTaro + resolve(excuteTime) + }) + }) +} + +function taroAndNativeMethodTime(methodName: string, taroFun: (endFun: ()=>void)=>void, nativeFun: (endFun:()=>void)=>void): Promise<{taroTime: number, nativeTime: number, excuteLog: string}>{ + const taroPromise = methodTime(taroFun) + const nativePromise = methodTime(nativeFun) + return Promise.all([taroPromise, nativePromise]).then((result)=>{ + const taroTime = result[0] + const nativeTime = result[1] + const excuteLog = `同步调用${methodName}() 耗时：Taro ${result[0]} ms, Native ${result[1]}ms` + return {taroTime, nativeTime, excuteLog} + }) +} + +function jsFetch(endFun: ()=>void){ + // 定义请求头 + const headers = new Headers(); + headers.append("Content-Type", "application/x-www-form-urlencoded,application/json"); // 替换为实际的访问令牌 + headers.append("scene", '1001'); + headers.append("appCode", '0'); + headers.append("thirdKey", "UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH"); + headers.append("cateCode", ""); + headers.append("version", "2.2"); + headers.append("wxsysinfo", "eyJicmFuZCI6IkhVQVdFSSIsIm1vZGVsIjoiTk9ILUFOMDAiLCJwaXhlbFJhdGlvIjozLjUsInNjcmVlbldpZHRoIjozODQsInNjcmVlbkhlaWdodCI6NzkyLCJ3aW5kb3dXaWR0aCI6Mzg0LCJ3aW5kb3dIZWlnaHQiOjc5Miwic3RhdHVzQmFySGVpZ2h0IjozOSwibGFuZ3VhZ2UiOiJ6aC1IYW5zIiwidmVyc2lvbiI6IjQuMC4xMC4xMCIsInN5c3RlbSI6Ik9wZW5IYXJtb255LTQuMC4xMC4xMCIsInBsYXRmb3JtIjoiT3Blbkhhcm1vbnkiLCJmb250U2l6ZVNldHRpbmciOjE2LCJTREtWZXJzaW9uIjoiMTAiLCJiZW5jaG1hcmtMZXZlbCI6LTEsImFsYnVtQXV0aG9yaXplZCI6ZmFsc2UsImNhbWVyYUF1dGhvcmaserwefsdgesryhcvbiOmZhbHNlLCJtaWNyb3Bob25lQXV0aG9yaXplZCI6ZmFsc2UsIm5vdGlmaWNhdGlvbkF1dGhvcml6ZWQiOnRydWUsInBob25lQ2FsZW5kYXJBdXRob3JpemVkIjpmYWxzZSwiYmx1ZXRvb3RoRW5hYmxlZCI6dHJ1ZSwibG9jYXRpb25FbmFibGVkIjpmYWxzZSwid2lmaUVuYWJsZerteyrbdfdserytrhbdfgdLCJoZWlnaHQiOjc1MywibGVmdCI6MCwicmlnaHQiOjM4NCwidG9wIjozOSwid2lkdGgiOjM4NH0sImxvY2F0aW9uUmVkdWNlZEFjY3VyYWN5Ijp0cnVlLCJ0aGVtZSI6ImxpZ2h0IiwiaG9zdCI6eyJhcHBJZCI6ImNvbS53dWJhLmxpZmVfQkxQYzZzTlIyNFhpSGFmZExXako4UnErbS9rckNxVXdwV3Bqam1jRGZTRkZKMkNDQlNZTHFOUlBiZmdCeXFlYkl2emw0Q0tKZ2ZQbnBjaTN3VE9leElZPSJ9LCJlbmFibGVEZWJ1ZyI6dHJ1ZSwiZGV2aWNlT3JpZW50YXRpb24iOiJxx3J0cmFpdCJ9"); + headers.append("listName", "bj"); + headers.append("content-type", "application/json"); + headers.append("idxx", "B41CF5FA70F3DD19B1D87389CF045C8A1614CBEE645A9174BDDFDF1265A56129"); + headers.append("Cookie", "PPU=\"\";idxx=sdfergdshrthfbscaswqr;sessionid=sdddgerhfgjntfyjvzserweagergsderty;"); + headers.append("accuracy", ""); + headers.append("geo", ""); + headers.append("abtest", ""); + + // 发起GET请求 + fetch('http://10.253.108.182:9999/api/pressure/feed?app=sdfwef&lon=&lat=&session=sdfwefwefsgrhrjgjtyjkyukyuksdfxsddr×tamp=170442018xx28&mediauid=dfghrhgfjyukhmgertdfbvdfhrtyrtdfg&devidmd5=IMEI&utm_source=xxun&spm=u-2h6kyt1yf988m1ww31.wx_mjh_feed_zhaogongzuo&brand=HUAWEI&os=OpenHarmony&model=NOH-AN00&city=bj&cate=pugongjg&slot=lm_list_template&pn=1&ps=10&url=https%3A%2F%2Fwxzzmp.xx.com%2Flist.shtml%3F-15%3D20&sign=3ccfb781037ed655120d63c4b5e5c391&debug=1', { + method: 'GET', + headers: headers, + }) + .then(response => { + if (!response.ok) { + throw new Error(`Network response was not ok, status: ${response.status}`); + } + return response.json(); + }) + .then(data => { + endFun() + // 在这里处理返回的JSON数据 + // console.log(data); + }) + .catch(error => { + console.error('Error during fetch operation:', error); + }); +} + +export default class Index extends React.Component { + state = { + syncSingleResult: '', + requestSingleResult: '', + requestConcurrentResult: '', + requestHignConcurrentResult: '', + syncResult: '', + requestByJsResult: '' + } + syncSingleTest = ()=>{ + Promise.all([ + methodTime((endFun)=>{ + Taro.getWindowInfo() + endFun() + }), + methodTime((endFun)=>{ + // @ts-ignore + native.getWindowInfo() + endFun() + }), + methodTime((endFun)=>{ + Taro.getScreenBrightness({ + success: function () {endFun()}, + fail: function (){endFun()}, + complete: function () {} + }) + }), + methodTime((endFun)=>{ + // @ts-ignore + native.getScreenBrightness({ + success: function () {endFun()}, + fail: function (){endFun()}, + }) + }) + ]) + .then((result)=>{ + let totalExcuteLog: string[] = [] + totalExcuteLog.push(`同步调用getWindowInfo() 耗时：Taro ${result[0]} ms, Native ${result[1]}ms`) + totalExcuteLog.push(`异步调用getScreenBrightness() 耗时：Taro ${result[2]} ms, Native ${result[3]}ms`) + this.setState({ + syncSingleResult: totalExcuteLog.join('\n') + }) + }) + } + + syncPressureTest = ()=>{ + Promise.all([ + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getWindowInfo', (endFun)=>{Taro.getWindowInfo();endFun()}, (endFun)=>{native.getWindowInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemSetting', (endFun)=>{Taro.getSystemSetting();endFun()}, (endFun)=>{native.getSystemSetting();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppBaseInfo', (endFun)=>{Taro.getAppBaseInfo();endFun()}, (endFun)=>{native.getAppBaseInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppAuthorizeSetting', (endFun)=>{Taro.getAppAuthorizeSetting();endFun()}, (endFun)=>{native.getAppAuthorizeSetting();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getWindowInfo', (endFun)=>{Taro.getWindowInfo();endFun()}, (endFun)=>{native.getWindowInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppBaseInfo', (endFun)=>{Taro.getAppBaseInfo();endFun()}, (endFun)=>{native.getAppBaseInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppAuthorizeSetting', (endFun)=>{Taro.getAppAuthorizeSetting();endFun()}, (endFun)=>{native.getAppAuthorizeSetting();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getWindowInfo', (endFun)=>{Taro.getWindowInfo();endFun()}, (endFun)=>{native.getWindowInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemSetting', (endFun)=>{Taro.getSystemSetting();endFun()}, (endFun)=>{native.getSystemSetting();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppBaseInfo', (endFun)=>{Taro.getAppBaseInfo();endFun()}, (endFun)=>{native.getAppBaseInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppAuthorizeSetting', (endFun)=>{Taro.getAppAuthorizeSetting();endFun()}, (endFun)=>{native.getAppAuthorizeSetting();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getMenuButtonBoundingClientRect', (endFun)=>{Taro.getMenuButtonBoundingClientRect();endFun()}, (endFun)=>{native.getMenuButtonBoundingClientRect();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getWindowInfo', (endFun)=>{Taro.getWindowInfo();endFun()}, (endFun)=>{native.getWindowInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppBaseInfo', (endFun)=>{Taro.getAppBaseInfo();endFun()}, (endFun)=>{native.getAppBaseInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppAuthorizeSetting', (endFun)=>{Taro.getAppAuthorizeSetting();endFun()}, (endFun)=>{native.getAppAuthorizeSetting();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getWindowInfo', (endFun)=>{Taro.getWindowInfo();endFun()}, (endFun)=>{native.getWindowInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppBaseInfo', (endFun)=>{Taro.getAppBaseInfo();endFun()}, (endFun)=>{native.getAppBaseInfo();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getSystemInfoSync', (endFun)=>{Taro.getSystemInfoSync();endFun()}, (endFun)=>{native.getSystemInfoSync();endFun()}), + // @ts-ignore + taroAndNativeMethodTime('getAppAuthorizeSetting', (endFun)=>{Taro.getAppAuthorizeSetting();endFun()}, (endFun)=>{native.getAppAuthorizeSetting();endFun()}), + ]) + .then((result)=>{ + let totalElapsedTimeTaro = 0 + let totalElapsedTimeNative = 0 + const totalExcuteLog: string[] = [] + totalExcuteLog.push('同步方法压测：case构建：冷启动场景，28次同步调用') + result.forEach(({taroTime, nativeTime, excuteLog})=>{ + totalElapsedTimeTaro += taroTime + totalElapsedTimeNative += nativeTime + totalExcuteLog.push(excuteLog) + }) + totalExcuteLog.push(`总计调用 ${result.length}个方法 \n Taro执行总时间 ${totalElapsedTimeTaro} ms，Native执行总时间 ${totalElapsedTimeNative} ms`) + this.setState({ + syncResult: totalExcuteLog.join('\n') + }) + }) + } + requestSingleTest = ()=>{ + Promise.all([ + methodTime((endFun)=>{ + // 日志请求 + Taro.request({ + url: 'http://10.253.108.182:9999/api/pressure/tracklog?wxid=wlfkjwoejfjsdfjowie&uid=slkfjowejfkmofwe&loginUid=undefined&trackURL=%7B%22pagePath%22%3A%22%2Fpages%2Findex%2Findex%22%2C%22refPagePath%22%3A%22%2Fpages%2Fprivacy%2Findex%22%2C%22pageParam%22%3A%22stamp%253DAE%2526%252524taroTimestamp%253D1704420185161%22%2C%22pageType%22%3A%22index%22%2C%22pageName%22%3A%22index%22%2C%22pageInfo%22%3A%22%22%2C%22loadTime%22%3A0%2C%22cateCode%22%3A%22%22%2C%22cate%22%3A%22%22%2C%22xxx_id%22%3A%22%22%2C%22bendiicontype%22%3A%22%22%2C%22currInfoId%22%3A%22%22%2C%22currentCateCode%22%3A%22%22%2C%22scene%22%3A1001%2C%22thirdKey%22%3A%22UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH%22%2C%22area%22%3A%221%22%2C%22openId%22%3A%22B41CF5FA70F3DD19B1D87389CF045C8A1614CBEE645A9174BDDFDF1265A56129%22%2C%22unionId%22%3A%22C8684F4C3107AD7AA8B19B343D75DDF989D120311D18F9F41EB2320F6FFA66BE%22%2C%22pagetype%22%3A%22index%22%2C%22page%22%3A%22%22%2C%22qudao%22%3A%22weixin%22%2C%22url%22%3A%22%2Fpages%2Findex%2Findex%22%2C%22referrer%22%3A%22%2Fpages%2Fprivacy%2Findex%22%2C%22version%22%3A%222.12.12%22%2C%22spm%22%3A%22%22%2C%22utm_source%22%3A%22%22%2C%22launch_source%22%3A%22%22%2C%22from_userid%22%3A%22%22%2C%22hasuserid%22%3A0%7D&v=1.0.0&rand_id=0.9838634192853211&thirdKey=UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH&appCode=0&debug=1', + method: 'GET', + data: {}, + header: { + "Content-Type": "application/x-www-form-urlencoded,application/json", + "scene": 1001, + "appCode": "0", + "thirdKey": "sklfmowejfklsmfoijwfjlksdmgvioejrgkdmv;ojdspjrlmsdsvklnsoidjfpwk", + "cateCode": "", + "version": "2.12.12", + "wxsysinfo": "eyJicmFuZCI6IkhVQVdFSSIsIm1vZGVsIjoiTk9ILUFOMDAiLCJwaXhlbFJhdGlvIjozLjUsInNjcmVlbldpZHRoIjozODQsInNjcmVlbkhlaWdodCI6NzkyLCJ3aW5kb3dXaWR0aCI6Mzg0LCJ3aW5kb3dIZWlnaHQiOjc5Miwic3RhdHVzQmFySGVpZ2h0IjozOSwibGFuZ3VhZ2UiOiJ6aC1IYW5zIiwidmVyc2lvbiI6I23123113161RlbSI6Ik9wZW5IYXJtb255LTQuMC4xMC4xMCIsInBsYXRmb3JtIjoiT3Blbkhhcm1vbnkiLCJmb250U2l6ZVNldHRpbmciOjE2LCJTREtWZXJzaW9uIjoiMTAiLCJiZW5jaG1hcmtMZXZlbCI6LTEsImFsYnVtQXV0aG9yaXplZCI6ZmFsc2UsImNhbWVyYUF1dGhvcml6ZWQiOmZhbHNlLCJsb2NhdGlvbkF1dGhvcml6ZWQisdfwefsdgv3Bob25lQXV0aG9yaXplZCI6ZmFsgwegfwegwegsdgfkF1dGhvcml6ZWQiOnRydWUsInBob25lQ2FsZW5kYXJBdXRob3JpemVkIjpmYWxzZSwiYmx1ZXRvb3RoRW5hYmxlZCI6dHJ1ZSwqwrqwdasdafsdfgdfghergewvcxbcvxcvhdfydid2lmaUVuYWJsZWQiOnRydWUsInNhZmVBcmVhIjp7ImJvdHRvbSI6NzkyLCJoZWlnaHQiOjc1MywibGVmdCI6MCwicmlnaHQiOjM4NCwidG9wIjozOSwid2lkdGgiOjM4NH0sImxvY2F0aW9uUmVkdWNlZEFjY3VyYWN5Ijp0cnVlLCJ0aGVtZSI6ImxpZ2h0IiwisefkwoejfowfwecHBJZCI6ImNvbS53dWJhLmxpZmVfQkxQYzZzTlIyNFhpSGFmZExXako4UnErbS9rckNxVXdwV3Bqam1jRGZTRkZKMkNDQlNZTHFOUlBiZmdCeXFlYkl2emw0Q0tKZ2ZQbnBjaTN3VE9leElZPSJ9LCJlbmFibGVEZWJ1ZyI6dHJ1ZSwiZGV2aWNlT3JpZW50YXRpb24iOiJxx3J0cmFpdCJ9", + "listName": "bj" + }, + fail(res){ + console.log('request fail **** ', res) + endFun() + }, + success(res) { + console.log('request result ***** ', res.data) + endFun() + }, + }) + }), + methodTime((endFun)=>{ + // @ts-ignore 日志请求 + native.request({ + url: 'http://10.253.108.182:9999/api/pressure/tracklog?wxid=wlfkjwoejfjsdfjowie&uid=slkfjowejfkmofwe&loginUid=undefined&trackURL=%7B%22pagePath%22%3A%22%2Fpages%2Findex%2Findex%22%2C%22refPagePath%22%3A%22%2Fpages%2Fprivacy%2Findex%22%2C%22pageParam%22%3A%22stamp%253DAE%2526%252524taroTimestamp%253D1704420185161%22%2C%22pageType%22%3A%22index%22%2C%22pageName%22%3A%22index%22%2C%22pageInfo%22%3A%22%22%2C%22loadTime%22%3A0%2C%22cateCode%22%3A%22%22%2C%22cate%22%3A%22%22%2C%22xxx_id%22%3A%22%22%2C%22bendiicontype%22%3A%22%22%2C%22currInfoId%22%3A%22%22%2C%22currentCateCode%22%3A%22%22%2C%22scene%22%3A1001%2C%22thirdKey%22%3A%22UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH%22%2C%22area%22%3A%221%22%2C%22openId%22%3A%22B41CF5FA70F3DD19B1D87389CF045C8A1614CBEE645A9174BDDFDF1265A56129%22%2C%22unionId%22%3A%22C8684F4C3107AD7AA8B19B343D75DDF989D120311D18F9F41EB2320F6FFA66BE%22%2C%22pagetype%22%3A%22index%22%2C%22page%22%3A%22%22%2C%22qudao%22%3A%22weixin%22%2C%22url%22%3A%22%2Fpages%2Findex%2Findex%22%2C%22referrer%22%3A%22%2Fpages%2Fprivacy%2Findex%22%2C%22version%22%3A%222.12.12%22%2C%22spm%22%3A%22%22%2C%22utm_source%22%3A%22%22%2C%22launch_source%22%3A%22%22%2C%22from_userid%22%3A%22%22%2C%22hasuserid%22%3A0%7D&v=1.0.0&rand_id=0.9838634192853211&thirdKey=UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH&appCode=0&debug=1', + method: 'GET', + data: {}, + header: { + "Content-Type": "application/x-www-form-urlencoded,application/json", + "scene": 1001, + "appCode": "0", + "thirdKey": "sklfmowejfklsmfoijwfjlksdmgvioejrgkdmv;ojdspjrlmsdsvklnsoidjfpwk", + "cateCode": "", + "version": "2.12.12", + "wxsysinfo": "eyJicmFuZCI6IkhVQVdFSSIsIm1vZGVsIjoiTk9ILUFOMDAiLCJwaXhlbFJhdGlvIjozLjUsInNjcmVlbldpZHRoIjozODQsInNjcmVlbkhlaWdodCI6NzkyLCJ3aW5kb3dXaWR0aCI6Mzg0LCJ3aW5kb3dIZWlnaHQiOjc5Miwic3RhdHVzQmFySGVpZ2h0IjozOSwibGFuZ3VhZ2UiOiJ6aC1IYW5zIiwidmVyc2lvbiI6I23123113161RlbSI6Ik9wZW5IYXJtb255LTQuMC4xMC4xMCIsInBsYXRmb3JtIjoiT3Blbkhhcm1vbnkiLCJmb250U2l6ZVNldHRpbmciOjE2LCJTREtWZXJzaW9uIjoiMTAiLCJiZW5jaG1hcmtMZXZlbCI6LTEsImFsYnVtQXV0aG9yaXplZCI6ZmFsc2UsImNhbWVyYUF1dGhvcml6ZWQiOmZhbHNlLCJsb2NhdGlvbkF1dGhvcml6ZWQisdfwefsdgv3Bob25lQXV0aG9yaXplZCI6ZmFsgwegfwegwegsdgfkF1dGhvcml6ZWQiOnRydWUsInBob25lQ2FsZW5kYXJBdXRob3JpemVkIjpmYWxzZSwiYmx1ZXRvb3RoRW5hYmxlZCI6dHJ1ZSwqwrqwdasdafsdfgdfghergewvcxbcvxcvhdfydid2lmaUVuYWJsZWQiOnRydWUsInNhZmVBcmVhIjp7ImJvdHRvbSI6NzkyLCJoZWlnaHQiOjc1MywibGVmdCI6MCwicmlnaHQiOjM4NCwidG9wIjozOSwid2lkdGgiOjM4NH0sImxvY2F0aW9uUmVkdWNlZEFjY3VyYWN5Ijp0cnVlLCJ0aGVtZSI6ImxpZ2h0IiwisefkwoejfowfwecHBJZCI6ImNvbS53dWJhLmxpZmVfQkxQYzZzTlIyNFhpSGFmZExXako4UnErbS9rckNxVXdwV3Bqam1jRGZTRkZKMkNDQlNZTHFOUlBiZmdCeXFlYkl2emw0Q0tKZ2ZQbnBjaTN3VE9leElZPSJ9LCJlbmFibGVEZWJ1ZyI6dHJ1ZSwiZGV2aWNlT3JpZW50YXRpb24iOiJxx3J0cmFpdCJ9", + "listName": "bj" + }, + fail(res){ + console.log('request fail **** ', res) + endFun() + }, + success(res) { + console.log('request result ***** ', res.data) + endFun() + }, + }) + }), + methodTime((endFun)=>{ + // 日志请求 + Taro.request({ + url: 'http://10.253.108.182:9999/api/pressure/feed?app=sdfwef&lon=&lat=&session=sdfwefwefsgrhrjgjtyjkyukyuksdfxsddr×tamp=170442018xx28&mediauid=dfghrhgfjyukhmgertdfbvdfhrtyrtdfg&devidmd5=IMEI&utm_source=xxun&spm=u-2h6kyt1yf988m1ww31.wx_mjh_feed_zhaogongzuo&brand=HUAWEI&os=OpenHarmony&model=NOH-AN00&city=bj&cate=pugongjg&slot=lm_list_template&pn=1&ps=10&url=https%3A%2F%2Fwxzzmp.xx.com%2Flist.shtml%3F-15%3D20&sign=3ccfb781037ed655120d63c4b5e5c391&debug=1', + method: 'GET', + data: {}, + header: { + "Content-Type": "application/x-www-form-urlencoded,application/json", + "scene": 1001, + "appCode": "0", + "thirdKey": "UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH", + "cateCode": "", + "version": 2.2, + "wxsysinfo": "eyJicmFuZCI6IkhVQVdFSSIsIm1vZGVsIjoiTk9ILUFOMDAiLCJwaXhlbFJhdGlvIjozLjUsInNjcmVlbldpZHRoIjozODQsInNjcmVlbkhlaWdodCI6NzkyLCJ3aW5kb3dXaWR0aCI6Mzg0LCJ3aW5kb3dIZWlnaHQiOjc5Miwic3RhdHVzQmFySGVpZ2h0IjozOSwibGFuZ3VhZ2UiOiJ6aC1IYW5zIiwidmVyc2lvbiI6IjQuMC4xMC4xMCIsInN5c3RlbSI6Ik9wZW5IYXJtb255LTQuMC4xMC4xMCIsInBsYXRmb3JtIjoiT3Blbkhhcm1vbnkiLCJmb250U2l6ZVNldHRpbmciOjE2LCJTREtWZXJzaW9uIjoiMTAiLCJiZW5jaG1hcmtMZXZlbCI6LTEsImFsYnVtQXV0aG9yaXplZCI6ZmFsc2UsImNhbWVyYUF1dGhvcmaserwefsdgesryhcvbiOmZhbHNlLCJtaWNyb3Bob25lQXV0aG9yaXplZCI6ZmFsc2UsIm5vdGlmaWNhdGlvbkF1dGhvcml6ZWQiOnRydWUsInBob25lQ2FsZW5kYXJBdXRob3JpemVkIjpmYWxzZSwiYmx1ZXRvb3RoRW5hYmxlZCI6dHJ1ZSwibG9jYXRpb25FbmFibGVkIjpmYWxzZSwid2lmaUVuYWJsZerteyrbdfdserytrhbdfgdLCJoZWlnaHQiOjc1MywibGVmdCI6MCwicmlnaHQiOjM4NCwidG9wIjozOSwid2lkdGgiOjM4NH0sImxvY2F0aW9uUmVkdWNlZEFjY3VyYWN5Ijp0cnVlLCJ0aGVtZSI6ImxpZ2h0IiwiaG9zdCI6eyJhcHBJZCI6ImNvbS53dWJhLmxpZmVfQkxQYzZzTlIyNFhpSGFmZExXako4UnErbS9rckNxVXdwV3Bqam1jRGZTRkZKMkNDQlNZTHFOUlBiZmdCeXFlYkl2emw0Q0tKZ2ZQbnBjaTN3VE9leElZPSJ9LCJlbmFibGVEZWJ1ZyI6dHJ1ZSwiZGV2aWNlT3JpZW50YXRpb24iOiJxx3J0cmFpdCJ9", + "listName": "bj", + "content-type": "application/json", + "idxx": "B41CF5FA70F3DD19B1D87389CF045C8A1614CBEE645A9174BDDFDF1265A56129", + "Cookie": "PPU=\"\";idxx=sdfergdshrthfbscaswqr;sessionid=sdddgerhfgjntfyjvzserweagergsderty;", + "accuracy": "", + "geo": "", + "abtest": "" + }, + fail(res){ + console.log('request fail **** ', res) + endFun() + }, + success(res) { + console.log('request result ***** ', JSON.stringify(res.data)) + endFun() + }, + }) + }), + methodTime((endFun)=>{ + // @ts-ignore 日志请求 + native.request({ + url: 'http://10.253.108.182:9999/api/pressure/feed?app=sdfwef&lon=&lat=&session=sdfwefwefsgrhrjgjtyjkyukyuksdfxsddr×tamp=170442018xx28&mediauid=dfghrhgfjyukhmgertdfbvdfhrtyrtdfg&devidmd5=IMEI&utm_source=xxun&spm=u-2h6kyt1yf988m1ww31.wx_mjh_feed_zhaogongzuo&brand=HUAWEI&os=OpenHarmony&model=NOH-AN00&city=bj&cate=pugongjg&slot=lm_list_template&pn=1&ps=10&url=https%3A%2F%2Fwxzzmp.xx.com%2Flist.shtml%3F-15%3D20&sign=3ccfb781037ed655120d63c4b5e5c391&debug=1', + method: 'GET', + data: {}, + header: { + "Content-Type": "application/x-www-form-urlencoded,application/json", + "scene": 1001, + "appCode": "0", + "thirdKey": "UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH", + "cateCode": "", + "version": 2.2, + "wxsysinfo": "eyJicmFuZCI6IkhVQVdFSSIsIm1vZGVsIjoiTk9ILUFOMDAiLCJwaXhlbFJhdGlvIjozLjUsInNjcmVlbldpZHRoIjozODQsInNjcmVlbkhlaWdodCI6NzkyLCJ3aW5kb3dXaWR0aCI6Mzg0LCJ3aW5kb3dIZWlnaHQiOjc5Miwic3RhdHVzQmFySGVpZ2h0IjozOSwibGFuZ3VhZ2UiOiJ6aC1IYW5zIiwidmVyc2lvbiI6IjQuMC4xMC4xMCIsInN5c3RlbSI6Ik9wZW5IYXJtb255LTQuMC4xMC4xMCIsInBsYXRmb3JtIjoiT3Blbkhhcm1vbnkiLCJmb250U2l6ZVNldHRpbmciOjE2LCJTREtWZXJzaW9uIjoiMTAiLCJiZW5jaG1hcmtMZXZlbCI6LTEsImFsYnVtQXV0aG9yaXplZCI6ZmFsc2UsImNhbWVyYUF1dGhvcmaserwefsdgesryhcvbiOmZhbHNlLCJtaWNyb3Bob25lQXV0aG9yaXplZCI6ZmFsc2UsIm5vdGlmaWNhdGlvbkF1dGhvcml6ZWQiOnRydWUsInBob25lQ2FsZW5kYXJBdXRob3JpemVkIjpmYWxzZSwiYmx1ZXRvb3RoRW5hYmxlZCI6dHJ1ZSwibG9jYXRpb25FbmFibGVkIjpmYWxzZSwid2lmaUVuYWJsZerteyrbdfdserytrhbdfgdLCJoZWlnaHQiOjc1MywibGVmdCI6MCwicmlnaHQiOjM4NCwidG9wIjozOSwid2lkdGgiOjM4NH0sImxvY2F0aW9uUmVkdWNlZEFjY3VyYWN5Ijp0cnVlLCJ0aGVtZSI6ImxpZ2h0IiwiaG9zdCI6eyJhcHBJZCI6ImNvbS53dWJhLmxpZmVfQkxQYzZzTlIyNFhpSGFmZExXako4UnErbS9rckNxVXdwV3Bqam1jRGZTRkZKMkNDQlNZTHFOUlBiZmdCeXFlYkl2emw0Q0tKZ2ZQbnBjaTN3VE9leElZPSJ9LCJlbmFibGVEZWJ1ZyI6dHJ1ZSwiZGV2aWNlT3JpZW50YXRpb24iOiJxx3J0cmFpdCJ9", + "listName": "bj", + "content-type": "application/json", + "idxx": "B41CF5FA70F3DD19B1D87389CF045C8A1614CBEE645A9174BDDFDF1265A56129", + "Cookie": "PPU=\"\";idxx=sdfergdshrthfbscaswqr;sessionid=sdddgerhfgjntfyjvzserweagergsderty;", + "accuracy": "", + "geo": "", + "abtest": "" + }, + fail(res){ + console.log('request fail **** ', res) + endFun() + }, + success(res) { + console.log('request result ***** ', JSON.stringify(res.data)) + endFun() + }, + }) + }) + ]) + .then((result)=>{ + const logs: string[] = [] + logs.push(`tracklog请求耗时：Taro ${result[0]} ms, Native ${result[1]} ms`) + logs.push(`Feed请求耗时：Taro ${result[2]} ms, Native ${result[3]} ms`) + this.setState({ + requestSingleResult: logs.join('\n') + }) + }) + } + requestConcurentTest = ()=>{ + const startTime = Date.now() + const promiseArray:Promise[] = [] + for (let i=1; i <= 5; i++) { + promiseArray.push(methodTime((endFun)=>{ + // 日志请求 + Taro.request({ + url: 'http://10.253.108.182:9999/api/pressure/tracklog?wxid=wlfkjwoejfjsdfjowie&uid=slkfjowejfkmofwe&loginUid=undefined&trackURL=%7B%22pagePath%22%3A%22%2Fpages%2Findex%2Findex%22%2C%22refPagePath%22%3A%22%2Fpages%2Fprivacy%2Findex%22%2C%22pageParam%22%3A%22stamp%253DAE%2526%252524taroTimestamp%253D1704420185161%22%2C%22pageType%22%3A%22index%22%2C%22pageName%22%3A%22index%22%2C%22pageInfo%22%3A%22%22%2C%22loadTime%22%3A0%2C%22cateCode%22%3A%22%22%2C%22cate%22%3A%22%22%2C%22xxx_id%22%3A%22%22%2C%22bendiicontype%22%3A%22%22%2C%22currInfoId%22%3A%22%22%2C%22currentCateCode%22%3A%22%22%2C%22scene%22%3A1001%2C%22thirdKey%22%3A%22UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH%22%2C%22area%22%3A%221%22%2C%22openId%22%3A%22B41CF5FA70F3DD19B1D87389CF045C8A1614CBEE645A9174BDDFDF1265A56129%22%2C%22unionId%22%3A%22C8684F4C3107AD7AA8B19B343D75DDF989D120311D18F9F41EB2320F6FFA66BE%22%2C%22pagetype%22%3A%22index%22%2C%22page%22%3A%22%22%2C%22qudao%22%3A%22weixin%22%2C%22url%22%3A%22%2Fpages%2Findex%2Findex%22%2C%22referrer%22%3A%22%2Fpages%2Fprivacy%2Findex%22%2C%22version%22%3A%222.12.12%22%2C%22spm%22%3A%22%22%2C%22utm_source%22%3A%22%22%2C%22launch_source%22%3A%22%22%2C%22from_userid%22%3A%22%22%2C%22hasuserid%22%3A0%7D&v=1.0.0&rand_id=0.9838634192853211&thirdKey=UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH&appCode=0&debug=1', + method: 'GET', + data: {}, + header: { + "Content-Type": "application/x-www-form-urlencoded,application/json", + "scene": 1001, + "appCode": "0", + "thirdKey": "sklfmowejfklsmfoijwfjlksdmgvioejrgkdmv;ojdspjrlmsdsvklnsoidjfpwk", + "cateCode": "", + "version": "2.12.12", + "wxsysinfo": "eyJicmFuZCI6IkhVQVdFSSIsIm1vZGVsIjoiTk9ILUFOMDAiLCJwaXhlbFJhdGlvIjozLjUsInNjcmVlbldpZHRoIjozODQsInNjcmVlbkhlaWdodCI6NzkyLCJ3aW5kb3dXaWR0aCI6Mzg0LCJ3aW5kb3dIZWlnaHQiOjc5Miwic3RhdHVzQmFySGVpZ2h0IjozOSwibGFuZ3VhZ2UiOiJ6aC1IYW5zIiwidmVyc2lvbiI6I23123113161RlbSI6Ik9wZW5IYXJtb255LTQuMC4xMC4xMCIsInBsYXRmb3JtIjoiT3Blbkhhcm1vbnkiLCJmb250U2l6ZVNldHRpbmciOjE2LCJTREtWZXJzaW9uIjoiMTAiLCJiZW5jaG1hcmtMZXZlbCI6LTEsImFsYnVtQXV0aG9yaXplZCI6ZmFsc2UsImNhbWVyYUF1dGhvcml6ZWQiOmZhbHNlLCJsb2NhdGlvbkF1dGhvcml6ZWQisdfwefsdgv3Bob25lQXV0aG9yaXplZCI6ZmFsgwegfwegwegsdgfkF1dGhvcml6ZWQiOnRydWUsInBob25lQ2FsZW5kYXJBdXRob3JpemVkIjpmYWxzZSwiYmx1ZXRvb3RoRW5hYmxlZCI6dHJ1ZSwqwrqwdasdafsdfgdfghergewvcxbcvxcvhdfydid2lmaUVuYWJsZWQiOnRydWUsInNhZmVBcmVhIjp7ImJvdHRvbSI6NzkyLCJoZWlnaHQiOjc1MywibGVmdCI6MCwicmlnaHQiOjM4NCwidG9wIjozOSwid2lkdGgiOjM4NH0sImxvY2F0aW9uUmVkdWNlZEFjY3VyYWN5Ijp0cnVlLCJ0aGVtZSI6ImxpZ2h0IiwisefkwoejfowfwecHBJZCI6ImNvbS53dWJhLmxpZmVfQkxQYzZzTlIyNFhpSGFmZExXako4UnErbS9rckNxVXdwV3Bqam1jRGZTRkZKMkNDQlNZTHFOUlBiZmdCeXFlYkl2emw0Q0tKZ2ZQbnBjaTN3VE9leElZPSJ9LCJlbmFibGVEZWJ1ZyI6dHJ1ZSwiZGV2aWNlT3JpZW50YXRpb24iOiJxx3J0cmFpdCJ9", + "listName": "bj" + }, + fail(res){ + console.log('request fail **** ', res) + endFun() + }, + success(res) { + console.log('request result ***** ', res.data) + endFun() + }, + }) + })) + } + + Promise.all(promiseArray) + .then((result)=>{ + const totalTime = Date.now() - startTime + const logs: string[] = [] + + let serialTime = 0 + result.forEach((value, index)=>{ + logs.push(`请求${index}的耗时： ${value} ms`) + serialTime += value + }) + + logs.push(`并发请求时间：${totalTime}ms，串行请求时间：${serialTime} ms`) + logs.push(`是否为并行执行：${totalTime < serialTime}`) + this.setState({ + requestConcurrentResult: logs.join('\n') + }) + }) + } + requestHignConcurentTest = ()=>{ + const startTime = Date.now() + const promiseArray:Promise[] = [] + for (let i=1; i <= 30; i++) { + promiseArray.push(methodTime((endFun)=>{ + // 日志请求 + Taro.request({ + url: 'http://10.253.108.182:9999/api/pressure/feed?app=sdfwef&lon=&lat=&session=sdfwefwefsgrhrjgjtyjkyukyuksdfxsddr×tamp=170442018xx28&mediauid=dfghrhgfjyukhmgertdfbvdfhrtyrtdfg&devidmd5=IMEI&utm_source=xxun&spm=u-2h6kyt1yf988m1ww31.wx_mjh_feed_zhaogongzuo&brand=HUAWEI&os=OpenHarmony&model=NOH-AN00&city=bj&cate=pugongjg&slot=lm_list_template&pn=1&ps=10&url=https%3A%2F%2Fwxzzmp.xx.com%2Flist.shtml%3F-15%3D20&sign=3ccfb781037ed655120d63c4b5e5c391&debug=1', + method: 'GET', + data: {}, + header: { + "Content-Type": "application/x-www-form-urlencoded,application/json", + "scene": 1001, + "appCode": "0", + "thirdKey": "UPYIu5EGmjPu2pQqHOYUaMLk0j4m5tgt9aK1tboYlYeixxkotYfsTvbyRSPNNNjH", + "cateCode": "", + "version": 2.2, + "wxsysinfo": "eyJicmFuZCI6IkhVQVdFSSIsIm1vZGVsIjoiTk9ILUFOMDAiLCJwaXhlbFJhdGlvIjozLjUsInNjcmVlbldpZHRoIjozODQsInNjcmVlbkhlaWdodCI6NzkyLCJ3aW5kb3dXaWR0aCI6Mzg0LCJ3aW5kb3dIZWlnaHQiOjc5Miwic3RhdHVzQmFySGVpZ2h0IjozOSwibGFuZ3VhZ2UiOiJ6aC1IYW5zIiwidmVyc2lvbiI6IjQuMC4xMC4xMCIsInN5c3RlbSI6Ik9wZW5IYXJtb255LTQuMC4xMC4xMCIsInBsYXRmb3JtIjoiT3Blbkhhcm1vbnkiLCJmb250U2l6ZVNldHRpbmciOjE2LCJTREtWZXJzaW9uIjoiMTAiLCJiZW5jaG1hcmtMZXZlbCI6LTEsImFsYnVtQXV0aG9yaXplZCI6ZmFsc2UsImNhbWVyYUF1dGhvcmaserwefsdgesryhcvbiOmZhbHNlLCJtaWNyb3Bob25lQXV0aG9yaXplZCI6ZmFsc2UsIm5vdGlmaWNhdGlvbkF1dGhvcml6ZWQiOnRydWUsInBob25lQ2FsZW5kYXJBdXRob3JpemVkIjpmYWxzZSwiYmx1ZXRvb3RoRW5hYmxlZCI6dHJ1ZSwibG9jYXRpb25FbmFibGVkIjpmYWxzZSwid2lmaUVuYWJsZerteyrbdfdserytrhbdfgdLCJoZWlnaHQiOjc1MywibGVmdCI6MCwicmlnaHQiOjM4NCwidG9wIjozOSwid2lkdGgiOjM4NH0sImxvY2F0aW9uUmVkdWNlZEFjY3VyYWN5Ijp0cnVlLCJ0aGVtZSI6ImxpZ2h0IiwiaG9zdCI6eyJhcHBJZCI6ImNvbS53dWJhLmxpZmVfQkxQYzZzTlIyNFhpSGFmZExXako4UnErbS9rckNxVXdwV3Bqam1jRGZTRkZKMkNDQlNZTHFOUlBiZmdCeXFlYkl2emw0Q0tKZ2ZQbnBjaTN3VE9leElZPSJ9LCJlbmFibGVEZWJ1ZyI6dHJ1ZSwiZGV2aWNlT3JpZW50YXRpb24iOiJxx3J0cmFpdCJ9", + "listName": "bj", + "content-type": "application/json", + "idxx": "B41CF5FA70F3DD19B1D87389CF045C8A1614CBEE645A9174BDDFDF1265A56129", + "Cookie": "PPU=\"\";idxx=sdfergdshrthfbscaswqr;sessionid=sdddgerhfgjntfyjvzserweagergsderty;", + "accuracy": "", + "geo": "", + "abtest": "" + }, + fail(res){ + console.log('request fail **** ', res) + endFun() + }, + success(res) { + console.log('request result ***** ', JSON.stringify(res.data)) + endFun() + }, + }) + })) + } + + Promise.all(promiseArray) + .then((result)=>{ + const totalTime = Date.now() - startTime + const logs: string[] = [] + + let serialTime = 0 + result.forEach((value, index)=>{ + logs.push(`请求${index}的耗时： ${value} ms`) + serialTime += value + }) + + logs.push(`并发请求时间：${totalTime}ms，串行请求时间：${serialTime} ms`) + logs.push(`可能线程数：${serialTime / totalTime}`) + this.setState({ + requestHignConcurrentResult: logs.join('\n') + }) + }) + } + requestByJsTest=()=>{ + const startTime = Date.now() + const promiseArray:Promise[] = [] + for (let i=1; i <= 30; i++) { + promiseArray.push(methodTime((endFun)=>{jsFetch(endFun)})) + } + Promise.all(promiseArray) + .then((result)=>{ + const totalTime = Date.now() - startTime + const logs: string[] = [] + + let serialTime = 0 + result.forEach((value, index)=>{ + logs.push(`请求${index}的耗时： ${value} ms`) + serialTime += value + }) + + logs.push(`并发请求时间：${totalTime}ms，串行请求时间：${serialTime} ms`) + logs.push(`可能线程数：${serialTime / totalTime}`) + this.setState({ + requestByJsResult: logs.join('\n') + }) + }) + } + render() { + const { syncSingleResult, requestSingleResult,requestConcurrentResult,requestHignConcurrentResult,syncResult, requestByJsResult } = this.state + return ( + + + { + syncSingleResult.split("\n").map((text, index)=>{ + return ( + + {text} +
+ + ) + }) + } + + + + { + syncResult.split("\n").map((text, index)=>{ + return ( + + {text} +
+ + ) + }) + } + + + + { + requestSingleResult.split("\n").map((text, index)=>{ + return ( + + {text} +
+ + ) + }) + } + + + + { + requestConcurrentResult.split("\n").map((text, index)=>{ + return ( + + {text} +
+ + ) + }) + } + + + + { + requestHignConcurrentResult.split("\n").map((text, index)=>{ + return ( + + {text} +
+ + ) + }) + } + + + + { + requestByJsResult.split("\n").map((text, index)=>{ + return ( + + {text} +
+ + ) + }) + } + + + + ) + } +} diff --git a/examples/mini-program-example/src/styles/mixins.scss b/examples/mini-program-example/src/styles/mixins.scss new file mode 100644 index 00000000000..c00e30314aa --- /dev/null +++ b/examples/mini-program-example/src/styles/mixins.scss @@ -0,0 +1,60 @@ +/** + * 对于部分不兼容的样式，可以通过 mixins 统一处理 + */ + +/** + * // NOTE Taro 编译成 RN 时对 border 的处理有问题 + * RN 不支持针对某一边设置 style，即 border-bottom-style 会报错 + * 那么 border-bottom: 1px 就需要写成如下形式： + * border: 0 style color; border-bottom-width: 1px; + */ +@mixin border($dir, $width, $style, $color) { + border: 0 $style $color; + @each $d in $dir { + #{border-#{$d}-width}: $width; + } +} + +/** + * 对于不能打包到 RN 的样式，可以用 mixins 引入，相对美观一些 + */ +@mixin eject($attr, $value) { + /*postcss-pxtransform rn eject enable*/ + #{$attr}: $value; + /*postcss-pxtransform rn eject disable*/ +} + +/** + * // TODO 1px 的线在各端上实现方式不同，统一出来后续再兼容，目前注意两点： + * 1. Taro 中大写的 PX 不会被编译成 rpx/em，但 RN 还未兼容该写法 + * 2. H5 中 1px(转成 rem 后实际小于 0.5px) + border-radius 会导致 border 不显示 + */ +@mixin hairline($attr) { + #{$attr}: 1px; + @include eject($attr, 1PX); +} + +/** + * NOTE RN 无法通过 text-overflow 实现省略号，这些代码不能打包到 RN 中 + */ +@mixin text-ellipsis() { + /*postcss-pxtransform rn eject enable*/ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + /*postcss-pxtransform rn eject disable*/ +} + +/** + * NOTE 实现多行文本省略，RN 用 Text 标签的 numberOfLines，H5/小程序用 -webkit-line-clamp + */ +@mixin lamp-clamp($line) { + /*postcss-pxtransform rn eject enable*/ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: $line; + /* autoprefixer: ignore next */ + -webkit-box-orient: vertical; + /*postcss-pxtransform rn eject disable*/ +} diff --git a/examples/mini-program-example/src/styles/tabPage.scss b/examples/mini-program-example/src/styles/tabPage.scss new file mode 100644 index 00000000000..d4314e89b5a --- /dev/null +++ b/examples/mini-program-example/src/styles/tabPage.scss @@ -0,0 +1,85 @@ +@import '@/styles/variables.scss'; + +.index-hd { + padding: 80px 80px 40px; + text-align: center; + } + .index-bd { + padding: 0 30px 40px; + } + .index-ft { + padding-bottom: 20px; + text-align: center; + } + .index-logo { + width: 86px; + height: 86px; + align-self: center; + } + .index-desc { + margin-top: 20px; + color: rgba(0, 0, 0, 0.5); + font-size: 28px; + } + + .navigator-box { + opacity: 0; + position: relative; + background-color: $color-bg-base; + line-height: 1.41176471; + font-size: 34px; + transform: translateY(-50%); + transition: 0.3s; + border-top: 1px solid $color-bg; + } + .navigator-box-show { + opacity: 1; + transform: translateY(0); + } + .navigator { + padding: 20px 30px; + } + .navigator-arrow { + position: absolute; + right: 56px; + top: 20px; + color: rgba(0, 0, 0, 0.3); + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.454 6.58l1.06-1.06 5.78 5.779a.996.996 0 010 1.413l-5.78 5.779-1.06-1.061 5.425-5.425-5.425-5.424z' fill='%23B2B2B2' fill-rule='evenodd'/%3E%3C/svg%3E"); + width: 24px; + height: 48px; + } + .navigator-bottom-line { + border-bottom: 1px solid $color-bg; + } + + .kind-list-item { + margin: 20px 0; + background-color: $color-bg-base; + border-radius: 4px; + overflow: hidden; + } + .kind-list-text { + flex: 1; + } + .kind-list-img { + width: 60px; + height: 60px; + } + .kind-list-item-hd { + padding: 30px; + display: flex; + align-items: center; + flex-direction: row; + transition: opacity 0.3s; + } + .kind-list-item-hd-show { + opacity: 0.2; + } + .kind-list-item-bd { + height: 0; + overflow: hidden; + } + .kind-list-item-bd-show { + height: auto; + } + \ No newline at end of file diff --git a/examples/mini-program-example/src/styles/variables.scss b/examples/mini-program-example/src/styles/variables.scss new file mode 100644 index 00000000000..8d5d183be9e --- /dev/null +++ b/examples/mini-program-example/src/styles/variables.scss @@ -0,0 +1,98 @@ +$hd: 2 !default; // 基本单位 + +/* The Color of O2Team Brand */ +$color-brand: #6190e8 !default; +$color-brand-light: #78a4f4 !default; +$color-brand-dark: #346fc2 !default; + +/* Color */ +$color-success: #317af7 !default; +$color-error: #e84026 !default; +$color-warning: #ed6f21 !default; +$color-oncall: #64bb5c !default; +$color-advanced: #63d095 !default; + +/* Color Palette */ +$color-black-0: #000 !default; +$color-black-1: #333 !default; +$color-black-2: #7f7f7f !default; +$color-black-3: #b2b2b2 !default; + +$color-grey-0: #333 !default; +$color-grey-1: #666 !default; +$color-grey-2: #999 !default; +$color-grey-3: #ccc !default; +$color-grey-4: #e5e5e5 !default; +$color-grey-5: #f0f0f0 !default; +$color-grey-6: #f7f7f7 !default; + +$color-white: #fff !default; + +/* Text Color */ +$color-text-base: #333 !default; // 文字的基本色 +$color-text-base-inverse: #fff !default; // 反色 +$color-text-secondary: #36d57d !default; // 辅助色 +$color-text-placeholder: #c9c9c9 !default; +$color-text-disabled: #ccc !default; +$color-text-title: #2c405a !default; // 文章标题 +$color-text-paragraph: #3f536e !default; // 文章段落 + +/* Link */ +$color-link: #6190e8 !default; +$color-link-hover: #79a1eb !default; +$color-link-active: #4f7de2 !default; +$color-link-disabled: #bfbfbf !default; + +/* 背景色 */ +$color-bg: #fff !default; +$color-bg-base: #f1f3f5 !default; +$color-bg-light: #ecf5fd !default; +$color-bg-lighter: tint($color-bg-light, 50%) !default; +$color-bg-grey: #f7f7f7 !default; + +/* 边框颜色 */ +$color-border-base: #c5d9e8 !default; +$color-border-split: tint($color-border-base, 20%) !default; // 分割线 +$color-border-light: tint($color-border-base, 30%) !default; +$color-border-lighter: tint($color-border-base, 50%) !default; +$color-border-lightest: tint($color-border-base, 80%) !default; +$color-border-grey: #ccc !default; + +/* 图标颜色 */ +$color-icon-base: #ccc !default; + +/* Border Radius */ +$border-radius-sm: 2px * $hd !default; +$border-radius-md: 4px * $hd !default; +$border-radius-lg: 6px * $hd !default; +$border-radius-circle: 50% !default; + +/* 透明度 */ +$opacity-active: 0.6 !default; // Button 等组件点击态额透明度 +$opacity-disabled: 0.4 !default; // Button 等组件禁用态的透明度 + +/* Font */ +$font-size-xs: 10px * $hd !default; // 非常用字号，用于标签 +$font-size-sm: 12px * $hd !default; // 用于辅助信息 +$font-size-base: 14px * $hd !default; // 常用字号 +$font-size-lg: 16px * $hd !default; // 常规标题 +$font-size-xl: 18px * $hd !default; // 大标题 +$font-size-xxl: 20px * $hd !default; // 用于大号的数字 + +/* 水平间距 */ +$spacing-h-sm: 5px * $hd !default; +$spacing-h-md: 8px * $hd !default; +$spacing-h-lg: 12px * $hd !default; +$spacing-h-xl: 16px * $hd !default; + +/* 垂直间距 */ +$spacing-v-xs: 3px * $hd !default; +$spacing-v-sm: 6px * $hd !default; +$spacing-v-md: 9px * $hd !default; +$spacing-v-lg: 12px * $hd !default; +$spacing-v-xl: 15px * $hd !default; + +/* 图标尺寸 */ +$icon-size-sm: 18px * $hd !default; +$icon-size-md: 22px * $hd !default; +$icon-size-lg: 36px * $hd !default; diff --git a/examples/mini-program-example/src/util/nativeApi.ts b/examples/mini-program-example/src/util/nativeApi.ts new file mode 100644 index 00000000000..f9d8ed5af7c --- /dev/null +++ b/examples/mini-program-example/src/util/nativeApi.ts @@ -0,0 +1,14 @@ +// @ts-ignore +const decorator = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true }) || (target => target) + +// @proxyClassSign('') +class NativeApi { + // @ts-ignore + @decorator + harmonyNavigateTo(options: any) { + return options + } +} + +const nativeApi = new NativeApi() +export default nativeApi diff --git a/examples/mini-program-example/src/util/util.ts b/examples/mini-program-example/src/util/util.ts new file mode 100644 index 00000000000..6ac07fed470 --- /dev/null +++ b/examples/mini-program-example/src/util/util.ts @@ -0,0 +1,77 @@ +function setCallbackRes(res, type, apiIndex) { + if (apiIndex != -1) { + const apiList = this.state.list + if (apiList[apiIndex].callbackRes == null) { + apiList[apiIndex].callbackRes = {} + } + if (type === 'success' || type === 'fail') { + if (apiList[apiIndex].callbackRes['success']) { + delete apiList[apiIndex].callbackRes['success'] + } + if (apiList[apiIndex].callbackRes['fail']) { + delete apiList[apiIndex].callbackRes['fail'] + } + } + apiList[apiIndex].callbackRes[type] = res + this.setState({ + list: apiList, + }) + } +} + +let startTime = NaN + +function getCostTime() { + return startTime ? Date.now() - startTime : -1 +} + +export const TestConsole = { + consoleTest: (apiName: string) => { + startTime = Date.now() + console.log( + `\n%c------------------------------start test [${apiName}]------------------------------`, + 'color:blue;font-weight:bold' + ) + }, + consoleSuccess: function (res, apiIndex = -1) { + const costTime = getCostTime() + setCallbackRes.call(this, res, 'success', apiIndex) + setCallbackRes.call(this, costTime, 'costTime', apiIndex) + console.log('%csuccess:\n', 'color:green;font-weight:bold', { success: res, costTime }) + }, + consoleFail: function (res, apiIndex = -1) { + const costTime = getCostTime() + setCallbackRes.call(this, res, 'fail', apiIndex) + setCallbackRes.call(this, costTime, 'costTime', apiIndex) + console.log('%cfail:\n', 'color:red;font-weight:bold', { fail: res, costTime }) + }, + consoleComplete: function (res, apiIndex = -1) { + const costTime = getCostTime() + setCallbackRes.call(this, res, 'complete', apiIndex) + setCallbackRes.call(this, costTime, 'costTime', apiIndex) + console.log('%ccomplete:\n', 'color:black;font-weight:bold', { complete: res, costTime }) + }, + consoleResult: function (res, apiIndex = -1) { + const costTime = getCostTime() + startTime = NaN + setCallbackRes.call(this, res, 'result', apiIndex) + setCallbackRes.call(this, costTime, 'costTime', apiIndex) + console.log('%cresult:\n', 'color:blue;font-weight:bold', { result: res, costTime }) + }, + consoleOnCallback: function (res, apiName, apiIndex = -1) { + const costTime = getCostTime() + setCallbackRes.call(this, res, 'callback', apiIndex) + setCallbackRes.call(this, costTime, 'costTime', apiIndex) + console.log(`%c${apiName} callback:\n`, 'color:green;font-weight:bold', { callback: res, costTime }) + }, + consoleNormal: (name: string, data?: any) => { + if (data) { + console.log(`%c${name}:\n`, 'color:gray;font-weight:bold', data) + } else { + console.log(`%c${name}`, 'color:gray;font-weight:bold') + } + }, + consoleDebug: (name: string, errMsg?: any) => { + console.warn('debug:\n', name, ':', errMsg) + }, +} diff --git a/examples/mini-program-example/tsconfig.json b/examples/mini-program-example/tsconfig.json new file mode 100644 index 00000000000..d252b2fe410 --- /dev/null +++ b/examples/mini-program-example/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "target": "es2017", + "module": "commonjs", + "removeComments": false, + "preserveConstEnums": true, + "moduleResolution": "node", + "experimentalDecorators": true, + "noImplicitAny": false, + "allowSyntheticDefaultImports": true, + "outDir": "lib", + "noUnusedLocals": true, + "noUnusedParameters": true, + "strictNullChecks": true, + "sourceMap": true, + "baseUrl": ".", + "rootDir": ".", + "jsx": "react-jsx", + "allowJs": true, + "resolveJsonModule": true, + "typeRoots": ["node_modules/@types"], + "paths": { + "@/styles/*": ["./src/styles/*"], + "@/util/*": ["./src/util/*"], + "@/assets/*": ["./src/assets/*"], + "@/components/*": ["./src/components/*"] + } + }, + "include": ["./src", "./types"], + "compileOnSave": false +} diff --git a/examples/mini-program-example/types/global.d.ts b/examples/mini-program-example/types/global.d.ts new file mode 100644 index 00000000000..36087b094c9 --- /dev/null +++ b/examples/mini-program-example/types/global.d.ts @@ -0,0 +1,19 @@ +/// + +declare module '*.png'; +declare module '*.gif'; +declare module '*.jpg'; +declare module '*.jpeg'; +declare module '*.svg'; +declare module '*.css'; +declare module '*.less'; +declare module '*.scss'; +declare module '*.sass'; +declare module '*.styl'; + +declare namespace NodeJS { + interface ProcessEnv { + TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd' + } +} + diff --git a/npm/darwin-arm64/package.json b/npm/darwin-arm64/package.json index 2d059b0fc52..7eb6aa20646 100644 --- a/npm/darwin-arm64/package.json +++ b/npm/darwin-arm64/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-darwin-arm64", "description": "Native binding for taro", - "version": "3.6.25", + "version": "3.6.29", "os": [ "darwin" ], diff --git a/npm/darwin-x64/package.json b/npm/darwin-x64/package.json index 24ed567c3e3..fae5dab32ed 100644 --- a/npm/darwin-x64/package.json +++ b/npm/darwin-x64/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-darwin-x64", "description": "Native binding for taro", - "version": "3.6.25", + "version": "3.6.29", "os": [ "darwin" ], diff --git a/npm/linux-x64-gnu/package.json b/npm/linux-x64-gnu/package.json index a99244299a0..3f1a4f825bd 100644 --- a/npm/linux-x64-gnu/package.json +++ b/npm/linux-x64-gnu/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-linux-x64-gnu", "description": "Native binding for taro", - "version": "3.6.25", + "version": "3.6.29", "os": [ "linux" ], diff --git a/npm/linux-x64-musl/package.json b/npm/linux-x64-musl/package.json index d4f6d7a9521..da93ea59a73 100644 --- a/npm/linux-x64-musl/package.json +++ b/npm/linux-x64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/binding-linux-x64-musl", - "version": "3.6.25", + "version": "3.6.29", "os": [ "linux" ], diff --git a/npm/win32-x64-msvc/package.json b/npm/win32-x64-msvc/package.json index ab2202ebd5b..c7574b6fdcd 100644 --- a/npm/win32-x64-msvc/package.json +++ b/npm/win32-x64-msvc/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-win32-x64-msvc", "description": "Native binding for taro", - "version": "3.6.25", + "version": "3.6.29", "os": [ "win32" ], diff --git a/package.json b/package.json index 6cb4ebe8f17..6d4f03e93c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "taro", - "version": "3.6.25", + "version": "3.6.29", "description": "开放式跨端跨框架开发解决方案", "homepage": "https://github.com/NervJS/taro#readme", "author": "O2Team", @@ -26,8 +26,10 @@ "build:binding:release": "pnpm --filter @tarojs/binding run build", "format::rs": "cargo fmt --all", "clear-all": "rimraf **/node_modules", - "lint": "eslint packages/ --ext .js --ext .ts --ext .tsx", + "lint": "eslint ./packages/ --ext .js,.jsx,.ts,.tsx,.mjs,.mts", "lint:style": "stylelint ./packages/**/*.{css,scss}", + "format": "prettier --write --cache .", + "format:check": "prettier --check --cache .", "test": "pnpm --if-present -r --aggregate-output --filter=./packages/* test:ci", "test:binding": "pnpm --filter @tarojs/binding run test", "updateSnapshot": "pnpm --if-present -r --aggregate-output --filter=./packages/* updateSnapshot", diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json index 3be54feb5c4..bb873d241a7 100644 --- a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json +++ b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-transform-react-jsx-to-rn-stylesheet", - "version": "3.6.25", + "version": "3.6.29", "description": "Transform stylesheet selector to style in JSX Elements.", "license": "MIT", "main": "dist/index.js", diff --git a/packages/babel-plugin-transform-taroapi/package.json b/packages/babel-plugin-transform-taroapi/package.json index fdbef4043b2..378f8b8aa9b 100644 --- a/packages/babel-plugin-transform-taroapi/package.json +++ b/packages/babel-plugin-transform-taroapi/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-transform-taroapi", - "version": "3.6.25", + "version": "3.6.29", "main": "dist/index.js", "scripts": { "build": "tsc", diff --git a/packages/babel-preset-taro/package.json b/packages/babel-preset-taro/package.json index 1e66d9b0b6f..8aaacf4d944 100644 --- a/packages/babel-preset-taro/package.json +++ b/packages/babel-preset-taro/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-taro", - "version": "3.6.25", + "version": "3.6.29", "description": "Taro babel preset", "author": "yuche ", "homepage": "https://github.com/nervjs/taro/tree/master/packages/babel-preset-taro#readme", diff --git a/packages/create-app/package.json b/packages/create-app/package.json index 0d5ab616f30..9b5ddab0baa 100644 --- a/packages/create-app/package.json +++ b/packages/create-app/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/create-app", - "version": "3.6.25", + "version": "3.6.29", "description": "create taro app with one command", "author": "VincentW ", "homepage": "https://github.com/nervjs/taro/tree/master/packages/create-app#readme", diff --git a/packages/css-to-react-native/package.json b/packages/css-to-react-native/package.json index f5d2e1af489..f4eb5da5351 100644 --- a/packages/css-to-react-native/package.json +++ b/packages/css-to-react-native/package.json @@ -1,7 +1,7 @@ { "name": "taro-css-to-react-native", "description": "Convert CSS text to a React Native stylesheet object", - "version": "3.6.25", + "version": "3.6.29", "main": "dist/index.js", "license": "MIT", "files": [ diff --git a/packages/eslint-config-taro/package.json b/packages/eslint-config-taro/package.json index aedee168733..47caf59b740 100644 --- a/packages/eslint-config-taro/package.json +++ b/packages/eslint-config-taro/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-taro", - "version": "3.6.25", + "version": "3.6.29", "description": "Taro specific linting rules for ESLint", "main": "index.js", "files": [ diff --git a/packages/postcss-html-transform/package.json b/packages/postcss-html-transform/package.json index 529f3616a9f..2433b017a12 100644 --- a/packages/postcss-html-transform/package.json +++ b/packages/postcss-html-transform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-html-transform", - "version": "3.6.25", + "version": "3.6.29", "description": "transform html tag name selector", "main": "index.js", "author": "drchan", diff --git a/packages/postcss-plugin-constparse/package.json b/packages/postcss-plugin-constparse/package.json index 10e6da7d1e3..d44ab8c7756 100644 --- a/packages/postcss-plugin-constparse/package.json +++ b/packages/postcss-plugin-constparse/package.json @@ -1,6 +1,6 @@ { "name": "postcss-plugin-constparse", - "version": "3.6.25", + "version": "3.6.29", "description": "parse constants defined in config", "main": "index.js", "author": "Simba", diff --git a/packages/postcss-pxtransform/package.json b/packages/postcss-pxtransform/package.json index 0da3fca1d91..89351acfc95 100644 --- a/packages/postcss-pxtransform/package.json +++ b/packages/postcss-pxtransform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-pxtransform", - "version": "3.6.25", + "version": "3.6.29", "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位", "main": "index.js", "keywords": [ diff --git a/packages/postcss-unit-transform/package.json b/packages/postcss-unit-transform/package.json index efac961f719..714080899cf 100644 --- a/packages/postcss-unit-transform/package.json +++ b/packages/postcss-unit-transform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-taro-unit-transform", - "version": "3.6.25", + "version": "3.6.29", "description": "小程序单位转换", "main": "index.js", "scripts": { diff --git a/packages/rollup-plugin-copy/.gitignore b/packages/rollup-plugin-copy/.gitignore new file mode 100644 index 00000000000..a65b41774ad --- /dev/null +++ b/packages/rollup-plugin-copy/.gitignore @@ -0,0 +1 @@ +lib diff --git a/packages/shared/package.json b/packages/shared/package.json index 81b25e9b95e..73b6a09cf07 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/shared", - "version": "3.6.25", + "version": "3.6.29", "description": "Taro utils internal use.", "author": "yuche ", "homepage": "https://github.com/nervjs/taro/tree/master/packages/shared#readme", diff --git a/packages/shared/src/template.ts b/packages/shared/src/template.ts index 03f3ad8152c..f927d3b1c34 100644 --- a/packages/shared/src/template.ts +++ b/packages/shared/src/template.ts @@ -316,7 +316,6 @@ export class BaseTemplate { ? `