Integrate WeDa into an existing project

For custom developed applications, WeDa provides developers with the following two capabilities:

1. provides a feature to download code as a component library, enabling developers to use pages or components developed with WeDa in existing Mini Program or react projects.
2. provides a corresponding SDK enabling developers to integrate with WeDa's user management system, utilize WeDa services (login authentication, cloud functions, cloud storage, cloud database, etc.), and conveniently manage user information.

Tip

If developers only need to use WeDa's user management system or services, please jump to Access WeDa Services.

1. Download and Use WeDa Block Components

1.1 Develop Block Components

WeDa supports custom blocks. Blocks can be used within WeDa or downloaded as code packages for developers to use as Mini Program components in existing Mini Programs. Developers can also choose to use Mini Program components in subpackages. Additionally, blocks support being downloaded and used as components in react projects.

Recommendation

We recommend that developers using blocks for the first time read Custom Blocks to understand the basic concepts of WeDa blocks.

1.1.1 Block Parameter Passing

Tip

If developers do not require parameter passing or callbacks, please jump to Saving Blocks.

When saving a block, developers need to define the parameters that the block needs to receive in the Dynamic Item Configuration. When downloaded and used as a component code package, all parameters of the component will be bound to this root container element.

Note

The Dynamic Item Configuration when saving a block determines the parameter passing when the block is used as a component after being downloaded.

By configuring the dynamic items when clicking to save the pop-up, you can define block parameters. For details, please refer to Block Dynamic Item Configuration.

Complete sample:

JSON Schema

{
  "configs": {
    "type": "object",
    "properties": {
      "messgae": {
        "type": "string",
        "default": "This is the property value",
        "required": true
      },
      "callbackObj":{
        "type": "object"
      }
    }
  }
}

Developers can configure parameters such as message or callbackObj in the properties. The passed parameters will be bound to the block's root container, and within the block, you can obtain the required passed parameters from the root container's data or execute the corresponding callback functions.

Note

Note that blocks do not support passing functions directly. The recommended approach is to place callback functions within an object such as callbackObj and call them via that object.

Example method: $w.[rootElement].data.callbackObj.callbackFunction

1.1.2 Using Parameters in Blocks

Due to the characteristics of blocks, WeDa recommends that developers define a root element when developing blocks, and access parameters and invoke callbacks based on the root element's ID,

Parameter Access

Developers can directly access the data property on the root element in $w to obtain parameters. Sample code:

// $w.[root element].data.[parameter]
$w.container1.data.message;

Callback Invocation

Developers may need to call functions of existing projects within blocks or use callback functions to obtain values in WeDa. The recommended solution is to create new JavaScript methods.

// $w.[root element].data.[callback object].[callback function]
export default function ({ event, data }) {
  $w.container1.data.callbackObj.callback({ event, data });
}

After creating new JavaScript methods, developers can add them to the events of WeDa components for invocation, such as obtaining the value of an Input component or handling the trigger events of a Button component.

1.2 Saving Blocks

Select the root container of the block to be saved and save it as a block. Developers need to add all queries and functions used within the block to the saved items to ensure they function properly when reusing or downloading the block.

Warning

• Global variables and methods cannot be saved to blocks; do not use them in blocks.
• If developers use login authentication, cloud functions, cloud storage, cloud database, or other WeDa services in blocks, please access WeDa services. If not used, it is not necessary.

1.3 Downloading Blocks

After saving the block, developers can download it in 'Add-Custom-Custom Blocks' and follow the pop-up instructions to use it as a component in existing projects.

Note

Blocks being downloaded as Web code packages require the corresponding react version.

"react": "^16.14.0",
"react-dom": "^16.14.0"

2. Access WeDa Services

Developers using WeDa services in custom development, or needing WeDa services in downloaded WeDa components and pages, must use the corresponding SDK to integrate with WeDa.

2.1 Preparation for WeDa User Management Integration

Before integration, developers need to install the corresponding npm packages, as detailed below:

package.json

{
  ...,
  "dependencies": {
    "@cloudbase/js-sdk": "2.5.6-beta.1",
    "@cloudbase/oauth": "0.1.1-alpha.5",
    "@cloudbase/weda-client": "1.0.24",
    "@cloudbase/weda-cloud-sdk": "1.0.57",
    "mobx": "^5.15.4",
    "lodash.get": "^4.4.2",
    "lodash.set": "^4.3.2",
    "miniprogram-gesture": "^1.0.6",
    "miniprogram-api-promise": "^1.0.4"
  },
  ...
}

2.2 Initialize the SDK

Before use, the SDK needs to be initialized by filling in the corresponding environment parameters, where the value of endpointType is determined by the application's development mode.

• Generally, when developing using the WeChat Cloud Development or WeDa Scan Code Authorization mode, it is not necessary to pass this parameter.

• If using the WeDa Fully Managed Mode for development, it is necessary to pass the tcb-api.

// Initialize the sdk
import * as wedaClient from "@cloudbase/weda-client";

wedaClient.init({
  /** Whether currently in production release mode */
  isProd: true,
  /** Low-code application ID */
  appId: "app-xxx",
  /** Cloud Base environment ID */
  envId: "lowcode-xxx",
  /** Specify the call chain, tcb-api or omit */
  endpointType: "tcb-api",
  appConfig: {
    staticResourceDomain: "<Static hosting access domain for accessing material resources>",
  },
});

2.3 Application-Related Methods

Primarily used for SDK initialization, utilized via wedaClient.app

2.3.1 wedaClient.app.init

wedaClient.app.init(params: IMpInitParams): Promise<{ app: cloudbase.app.App; auth: cloudbase.auth.App }>

Feature Description

Initialize the app

Input Parameters: IMpInitParams

Value	Type	Description
isProd	boolean	Whether currently in production release mode
appId	string	Low-code application ID
envId	string	CloudBase Environment ID
endpointType	string	Specify the call chain, tcb-api or leave blank

Response Parameters

Value	Type	Description
app	cloudbase.app.App	See details
auth	cloudbase.auth.App	See details

2.4 User Management Related Methods

This section can basically refer to WeDa Client Permissions API, used via wedaClient.auth

2.4.1 wedaClient.auth.currentUser

Feature Description

User information reference, can refer to $w.auth.currentUser

2.4.2 wedaClient.auth.getAccessToken

Feature Description

Gets the current user's accessToken; returns null if the user is not logged in

Input Parameters: None

Response Parameters

Value	Type	Description
accessToken	string	Current token information of the user
env	string	Currently configured environment ID for the sdk

Example

const token = await wedaClient.auth.getAccessToken();
console.log(token?.accessToken);

2.4.3 wedaClient.auth.getUserInfo

Feature Description

Get the information of the currently logged-in user, can refer to $w.auth.getUserInfo

2.4.4 wedaClient.auth.loginScope

Feature Description

Get the user login scope; can refer to $w.auth.loginScope

2.4.5 wedaClient.auth.signIn

wedaClient.app.signIn(params: IWebSiginParams | IMpSiginParams): Promise<void>

Feature Description

User login. Currently supports two types:

• web login: supports username and password

• Mini Program: supports phone number login

Input Parameters

IWebSiginParams

Input parameters when used on the Web end: currently supports mobile number, email, and username and password login.

Value	Type	Description
username	string	User's mobile number, email, or custom username
password	string	User password; either password or verification_token must be selected
verification_token	string	Verification code token. Either password or verification_token must be selected.

IMpSiginParams

Input parameters when used in the Mini Program: currently supports phone number code login.

Value	Type	Description
encryptedPhoneCode	string	Phone number dynamic token. Obtained via WeChat documentation

Output Parameters: None

Example

await wedaClient.auth.signIn({
  username: "Username",
  password: "Password",
});

2.4.6 wedaClient.auth.modifyCurrentUser

wedaClient.auth.modifyCurrentUser(params: IModifyCurrentUser): Promise<CurrentUserInfo>

Feature Description

Modifying User Information

Input Parameters

IModifyCurrentUser

Value	Type	Description
userName	string	Username
nickName	string	Nickname
avatarUrl	string	Avatar
description	string	Description

Response Parameters

is identical to wedaClient.auth.currentUser

Example

const userInfo = await wedaClient.auth.modifyCurrentUser({
  userName: "test",
});

2.4.7 wedaClient.auth.openIdLoginInWxApp

wedaClient.auth.openIdLoginInWxApp(): Promise<boolean>

Feature Description

openId silent login

Input Parameters

None

Response Parameters

Value	Type	Description
result	boolean	Whether login is successful

Example

await wedaClient.auth.openIdLoginInWxApp();
console.log(wedaClient.auth.currentUser);