Nhảy tới nội dung

Nâng Cấp Ứng Dụng V3.1

NÂNG CẤP MINI APP CLI​

Trước tiên, bạn cần nâng cấp Mini App CLI lên phiên bản mới nhất.

Chỉ Mini App CLI v0.0.79 trở lên mới hỗ trợ khởi tạo nguồn v3.1

npm install -g @momo-miniapp/cli@latest

KHỞI TẠO MÃ NGUỒN V3.1​

Sau đó, chạy lệnh để khởi tạo mã nguồn Mini App v3.1

Ví dụ, câu lệnh bên dưới sẽ khởi tạo mã nguồn cho một Mini App với tên gọi là “awesomeMiniApp”.

momo-miniapp init awesomeMiniApp --variant=v31

Mini App v3.1 sử dụng Component Kits v2

CHUYỂN ĐỔI QUA MÃ NGUỒN V3.1​

Mini App v3.1 sử dụng Component Kits v2. Do đó, nếu Mini App của bạn hiện tại đang chạy ở v3.0 (được khởi tạo mà không dùng tham số "variant"), sau khi nâng cấp Mini App CLI, khởi tạo thư mục mã nguồn v3.1 và di chuyển toàn bộ mã nguồn qua, bạn cần phải thay thế tất cả các component ở Component Kits v1 được sử dụng trong mã nguồn bằng Component Kits v2.

Ví dụ:

// Ở app v3.0
import Navigation from ‘@momo-platform/component-kits’

// Ở app v3.1
import { Navigation } from ‘@momo-kits/core’

Nếu bạn đang thực hiện chuyển tất cả mã nguồn từ Mini App v3.0 sang Mini App v3.1, vui lòng kiểm tra lại nội dung của 2 tệp dưới đây để đảm bảo chúng đã được cập nhật phù hợp cho ứng dụng v3.1.

src/index.js
1
  /**
1
  /**
2
   * @format
2
   * @format
3
   */
3
   */
4
  import React from 'react';
4
  import React from 'react';
5
-
  import { AppRegistry } from 'react-native';
5
+
  import App from './src/Application';
6
-
  import App from './src/App';
6
+
  import AppJson from './app.json';
7
-
  import { appId } from './app.json';
7
+
  import { ApplicationStyle } from '@momo-kits/core';
8
  import MiniApi from '@momo-miniapp/api';
8
  import MiniApi from '@momo-miniapp/api';
9
-
  import { ApplicationStyle } from '@momo-platform/component-kits';
10
-
  import { Provider } from 'react-redux';
11
-
  import configureStore from './src/redux/reducer';
12
-
  const store = configureStore()
13
  ApplicationStyle();
9
  ApplicationStyle();
14
-
  class MiniApp extends React.Component {
10
+
  export const MiniApp = props => {
15
-
      constructor(props) {
11
+
      return <App {...props} />
16
-
          super(props);
12
+
  };
17
-
          /**
13
+
  /**
18
-
           * do not remove code bellow
14
+
   * do not change codes bellow
19
-
           */
15
+
   */
20
-
          MiniApi.init(props);
16
+
  if (__DEV__) {
21
-
      }
17
+
      AppJson.bridgeMode = 2;
22
-
      render() {
23
-
          return <Provider store={store}>
24
-
              <App {...this.props} />
25
-
          </Provider>;
26
-
      }
27
  }
18
  }
28
-
  AppRegistry.registerComponent(appId, () => MiniApp);
19
+
  MiniApi.registerApp(AppJson, () => MiniApp);
29
-
  AppRegistry.registerComponent('MiniApp', () => MiniApp);
src/package.json
1
{
1
{
2
-
  "name": "checklist-v3.0",
2
+
  "name": "mini-app-v3.1",
3
-
  "version": "0.0.1",
3
+
  "version": "0.0.4",
4
-
  "private": true,
5
  "scripts": {
4
  "scripts": {
5
+
    "all": "watchman watch-del-all && rm -rf yarn.lock && rm -rf node_modules/ && rm -fr $TMPDIR/metro* && yarn install",
6
    "start": "bash start.sh 8181",
6
    "start": "bash start.sh 8181",
7
    "test": "jest",
7
    "test": "jest",
8
-
    "lint": "eslint ."
8
+
    "lint": "eslint .",
9
+
    "migration": "node scripts/migration/migration.js",
10
+
    "migration-core": "node scripts/migration/migration-core.js",
11
+
    "integration": "node scripts/migration/integration-repack.js",
12
+
    "start:webpack": "react-native webpack-start --webpackConfig webpack.config.js --port 8181",
13
+
    "bundle-ios": "node scripts/bundle/bundleRepack.js ios",
14
+
    "bundle-android": "node scripts/bundle/bundleRepack.js android",
15
+
    "bundleSize": "node scripts/migration/bundleSizeRepack.js"
9
  },
16
  },
10
  "supportPackages": {
17
  "supportPackages": {
11
    "note": "Import these packages below into 'dependencies' if you want to you in MiniApp",
18
    "note": "Import these packages below into 'dependencies' if you want to you in MiniApp",
12
    "lottie-ios": "3.0.3",
19
    "lottie-ios": "3.0.3",
13
    "lottie-react-native": "3.0.3",
20
    "lottie-react-native": "3.0.3",
14
    "react-native-fast-image": "8.1.5",
21
    "react-native-fast-image": "8.1.5",
15
    "react-native-maps": "0.27.0",
22
    "react-native-maps": "0.27.0",
16
    "react-native-linear-gradient": "2.5.6",
23
    "react-native-linear-gradient": "2.5.6",
17
    "react-native-sensors": "5.4.1",
24
    "react-native-sensors": "5.4.1",
18
    "react-native-share": "2.0.0",
25
    "react-native-share": "2.0.0",
19
    "react-native-svg": "^11.0.1"
26
    "react-native-svg": "^11.0.1"
20
  },
27
  },
21
  "dependencies": {
28
  "dependencies": {
22
-
    "@momo-miniapp/api": "^0.1.4-beta.4",
29
+
    "@momo-kits/core": "0.0.48-rc.4",
23
-
    "@momo-platform/component-kits": "^1.3.25",
30
+
    "@momo-kits/lottie": "0.0.48-rc.4",
24
-
    "@momo-platform/utils": "^0.0.17",
31
+
    "@momo-kits/scrollable-tab-view": "0.0.48-rc.4",
25
-
    "@react-native-community/async-storage": "1.12.1",
32
+
    "@momo-kits/selection": "0.0.48-rc.4",
33
+
    "@momo-miniapp/api": "^0.1.4",
34
+
    "@react-native-community/async-storage": "^1.8.1",
26
    "@reduxjs/toolkit": "^1.8.1",
35
    "@reduxjs/toolkit": "^1.8.1",
27
    "lodash": "^4.17.15",
36
    "lodash": "^4.17.15",
28
-
    "metro-react-native-babel-preset": "0.66.2",
37
+
    "lottie-react-native": "^3.3.2",
29
    "react": "17.0.1",
38
    "react": "17.0.1",
30
    "react-native": "0.64.2",
39
    "react-native": "0.64.2",
31
-
    "react-redux": "^8.0.1",
40
+
    "react-native-gesture-handler": "1.10.3",
32
-
    "redux": "^4.1.0"
41
+
    "react-native-webview": "^11.17.2",
42
+
    "react-redux": "^8.0.1"
33
  },
43
  },
34
  "devDependencies": {
44
  "devDependencies": {
35
-
    "@babel/core": "^7.5.5",
45
+
    "@babel/core": "^7.12.9",
36
-
    "@babel/runtime": "^7.5.5",
46
+
    "@babel/preset-env": "^7.15.6",
47
+
    "@babel/runtime": "^7.12.5",
48
+
    "@callstack/repack": "^2.5.0",
49
+
    "@react-native-community/eslint-config": "^0.0.5",
50
+
    "@testing-library/jest-native": "^4.0.4",
51
+
    "@testing-library/react-native": "^9.2.0",
37
    "babel-jest": "^24.8.0",
52
    "babel-jest": "^24.8.0",
53
+
    "babel-loader": "^8.2.2",
54
+
    "babel-plugin-module-resolver": "^4.0.0",
55
+
    "eslint": "^6.1.0",
56
+
    "husky": "^4.3.0",
38
    "jest": "^24.8.0",
57
    "jest": "^24.8.0",
58
+
    "metro-react-native-babel-preset": "0.66.0",
39
    "qrcode-terminal": "^0.12.0",
59
    "qrcode-terminal": "^0.12.0",
40
-
    "react-test-renderer": "16.8.6"
60
+
    "react-native-svg": "git+https://gitlab.com/momo-platform/react-native-svg.git#v12.1.0.public",
61
+
    "react-test-renderer": "17.0.1",
62
+
    "terser-webpack-plugin": "^5.2.4",
63
+
    "webpack": "5.61.0"
41
  },
64
  },
42
  "jest": {
65
  "jest": {
43
    "preset": "react-native"
66
    "preset": "react-native"
67
+
  },
68
+
  "publishConfig": {
69
+
    "@momo-miniapp:registry": "https://gitlab.com/api/v4/projects/27153631/packages/npm/"
70
+
  },
71
+
  "resolutions": {
72
+
    "react": "17.0.1",
73
+
    "react-native": "0.64.2",
74
+
    "@momo-kits/core": "0.0.48-rc.4",
75
+
    "react-native-fast-image": "8.1.5",
76
+
    "react-native-gesture-handler": "1.10.3",
77
+
    "react-native-pager-view": "5.1.8",
78
+
    "react-refresh": "0.4.3",
79
+
    "metro-react-native-babel-preset": "0.64.0"
44
  }
80
  }
45
}
81
}
Các tập tin png, jpeg, json... được sử dụng với đường dẫn duyệt đối phải được chuyển đổi sang URI
// Change this style
<Image source={require('../assets/logo.png')} />
// To
<Image source={{uri: YOUR_URI}} />
BUILD YOUR MINI APP​
Sau khi cập nhật xong, vui lòng build Mini App và kiểm thử nội bộ để đảm bảo các tính năng hoạt động bình thường.
CREATE ROLLOUT REQUEST​
Sau khi hoàn tất kiểm thử, vui lòng tạo Rollout Request để phiên bản mới có thể được xét duyệt và triển khai.
ON THIS PAGE