WeChat Mini Program Demo

You can introduce the t-image component either globally or locally in your WeChat Mini Program.

Global introduction: Add the component to the usingComponents field in your app.json file.

Local introduction: Add the component to the usingComponents field in the index.json file of the specific page or component where it is needed.

"usingComponents": {
    "t-image": "tdesign-miniprogram/image/image"
}

You can import the t-tag and t-check-tag components either globally or locally in your WeChat Mini Program.

Global Import: Configure app.json in the miniprogram root directory. Local Import: Configure the index.json of the specific page or component where you need them.

"usingComponents": {
  "t-tag": "tdesign-miniprogram/tag/tag",
  "t-check-tag": "tdesign-miniprogram/check-tag/check-tag"
}

You can import the Indexes and IndexesAnchor components globally in app.json or locally in a specific page or component's index.json using the usingComponents field.

"usingComponents": {
  "t-indexes": "tdesign-miniprogram/indexes/indexes",
  "t-indexes-anchor": "tdesign-miniprogram/indexes-anchor/indexes-anchor"
}

You can import the t-divider component either globally or locally:

• Global Import: Add the component to the usingComponents field in your app.json file.
• Local Import: Add the component to the usingComponents field in the index.json file of the specific page or component where it is needed.

"usingComponents": {
  "t-divider": "tdesign-miniprogram/divider/divider"
}

To use the t-progress component, register it in your app.json or page.json under the usingComponents field.

"usingComponents": {
  "t-progress": "tdesign-miniprogram/progress/progress"
}

You can import the Layout components (t-row and t-col) either globally or locally:

Global Import: Add the components to the usingComponents field in your app.json file.

Local Import: Add the components to the usingComponents field in the index.json file of the specific page or component where they are needed.

"usingComponents": {
  "t-row": "tdesign-miniprogram/row/row",
  "t-col": "tdesign-miniprogram/col/col"
}

To run this demo, follow these steps:

1. Initialize the project by running npm run init in the root directory.
2. Open the project using WeChat DevTools.
3. In WeChat DevTools, navigate to Tools (工具) and select Build npm (构建npm).

Requirements:

• Use WeChat DevTools or a WeChat client version 6.7.2 or higher.
• For Cloud Development setup, refer to the Cloud Development documentation.

You can import the t-loading component either globally or locally.

Global Import: Add the component to the usingComponents field in your app.json file.

Local Import: Add the component to the usingComponents field in the index.json file of the specific page or component where it is needed.

"usingComponents": {
  "t-loading": "tdesign-miniprogram/loading/loading"
}

Follow these steps to update the ARModel service in the WeChat Cloud Development environment:

1. Install local npm dependencies within the ARModel directory.
2. Switch the Cloud Function environment to the test environment.
3. Right-click the ARModel directory and select 'Upload all files' (this is necessary because it contains @tencent sub-packages).

You can import the t-tabs and t-tab-panel components globally in app.json or locally in a specific page/component's index.json using the usingComponents field.

"usingComponents": {
  "t-tabs": "tdesign-miniprogram/tabs/tabs",
  "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel"
}

To ensure the components render correctly in the WeChat Developer Tools, follow these steps after importing the project:

1. Run npm i to install dependencies.
2. Build the npm package.
3. In the WeChat Developer Tools settings, ensure "将JS编译成ES5" (Compile JS to ES5) is checked.