# Account Cards

# I. Function introduction

To make it easier for users to view and manipulate their financial accounts in Weixin Mini Program, click on the Mini Program and WeChat add the "My Account" section in the "Discovery-Mini Program" entry.

The specific function diagram is as follows:

# II. DESCRIPTION OF FUNCTION

Support for WeChat version: 8.0.41 for Android and above; 8. 0.46 for iOS and later

Support base library version: 3.1.1 and above

# 1. Turn on the function

Developers first need to clarify their service formats. The formats supported by current account cards include:

Log in to WeChat public platform and meet the category requirements to find the Discovery Page Account Card in the Development Management - Other Interface. Click Open to open the development rights for this feature

# 2. Create a card subpackage in a code package

The account card is subcontracted as a separate component in the Weixin Mini Program code package.To ensure UI uniformity, the WeChat side provides different types of account card templates, the page style (WXML and WXSS) is fixed code provided by WeChat, and the JS logic is controlled by the developer, including data request, rendering, caching, etc.

Developers are required to use WeChat Developer Tools Development Edition NightlyBuild 1.06.2309062 and above to create.The steps are as follows:

# 2.1 Create subcontract directory accountCardPackage

1. Turn on Weixin Mini Program lazyCodeLoading in apagejson, declare a separate sub-accountCardPackage, and configure:

{
  // app.json
  // ...
  "lazyCodeLoading": "requiredComponents",
  "subpackages": [
    {
      "root": "accountCardPackage",
      "pages": [],
      "independent": true
    }
  ],
  "accountCardPackage": {
    "root": "accountCardPackage",
    "cardList": []
  }
}

2. Right-click in the accountCardPackage subcontract directory, click on New Card, enter the component name and create (as an example, all types of cards are created from this entry)

3. After completing the above steps, you can see the created card in the accountCardPackage directory, and the configuration will appear in apagejson

NOTE:

1. A Weixin Mini Program can access multiple different types of cards if it meets the requirements of the corresponding card category, but only one card of the same type can be accessed.
2. The directory structure of card sub-packages depends on theapagejsonconfiguration when the card is added. Once the card has been added by an ordinary user, the directory structure can no longer be changed, otherwise the user who has added the card will not be able to use the card properly.
3. Cards operate in a separate environment and are isolated from each other.User-supplied card components are rendered withwxml,wxssAndjsonwill be replaced as a fixed template, and only the developer'sjscode will be injected to execute.

# 2.2 Implement card JS logic

After creating the card package, the developer can implement the card component logic in the js file, including obtaining the login state, requesting data, encryption and decryption data, etc. The logic of a card component is as follows:

// Take 5001 as an example
Component({
  data: {
    totalAmount: 0,
    yesterdayEarnings: 0,
  },
  lifetimes: {
    attached() {
      // 更新卡片数据
      this.setData({
        totalAmount: 6000000,
        yesterdayEarnings: 10000,
      })
      // 数据已准备完毕，通知嵌入卡片方
      this.updateStatus('loaded')
    },
  },
})

The specific implementation steps are as follows:

1. Set up the variable information shown on the card. Since the WXML file does not support the developer's custom definition, the fields that each card supports display are defined by the platform, and the developer implements the variable information through setData after obtaining and encryption logic. Information on the variables supported by different card types can be found in the following table:

2. Update the card status. In order to meet the demands of display in different situations, the card itself is a state, and the developer can update the state through the updateStatus interface of the component according to the needs. The currently supported state and the ways to change state are as follows:

// Currently supports four states: loading, loaded, nologin, the default is loading state
this.updateStatus('loading') // 数据准备中，卡片会显示 loading 动画
this.updateStatus('loaded') // 数据准备完毕，卡片会正常显示
this.updateStatus('nologin') // 需要用户进入小程序登录，卡片会展示引导文案
this.updateStatus('error') //卡片状态异常，需要用户进入小程序检查卡片状态，卡片会展示引导文案

3. To update the card click on the jump path.When the card is clicked, the default is to jump to Weixin Mini Program home page, if you need to jump to other paths, you can adjust the click path through the component's updateEnterPath interface:

this.updateEnterPath('pages/other/index')

4. Hide / display some fields. For business reasons, some fields cannot be displayed. Developers can hide / display the display of this field by:

this.showField('cardNumber')
this.hideField('remainingRepayment')

Among them, it is important to note that if a card 5003 / 5004 has the ability to hide the date, the entire date field needs to be hidden

this.hideField('dueDate')

5. Develop business logic. Currently, only the following WX interfaces are supported within the card component, and developers can implement business logic through the following interfaces:

• wx.login
• wx.checkSession
• wx.getStorage
• wx.setStorage
• wx.batchGetStorage
• wx.batchSetStorage
• wx.getStorageInfo
• wx.removeStorage
• wx.clearStorage
• wx.request
• Wx.getusercryptomanager (supported since version 3.3.3 of the base library)
• Wx.cloud.init (supported since version 3.3.3 of the base library)
• Wx.cloud.callfunction (supported since version 3.3.3 of the base library))

NOTE:

1. The wx interface invocation context is consistent with the card's Weixin Mini Program, that is, the wx interface invocation in the card is the same as the invocation in the Mini Program
2. The data written by the card through wx.setStorage or wx.batchSetStorage is not recommended to rely directly on the Weixin Mini Program side, because the Mini Program side has a layer of read cache, may not read the latest written data

# 3. Debugging logic

1. During development, developers can go to the Account Details page, press the word "Account" in the navigation bar, and open the debugging panel:

2. Only the Experience Card supports the output to the debugging panel. If there is no Experience Card in the list, the debugged panel cannot be opened. The developer can call the debugLog interface of the card component to output the contents to the debug panel:

// Output content to the debugging panel
// At present, only basic types such as String, Number, Boolean are supported, and types such as Object need to be serialized by developers themselves.
if (this.debugLog) this.debugLog('str1', 'str2', 123, false, ...)

3. Cloud functions are supported, base library versions need 3.3.3 or above: Example

Component({
  data: {
    totalAmount: 0,
    yesterdayEarnings: 0,
  },

  lifetimes: {
    created() {
      if (wx.cloud) {
        wx.cloud.init({
          env: 'xxxx', // 换成真实的云环境
          traceUser: true,
        })
      }
    },
    
    attached() {
      this.setData({
        totalAmount: 6000000,
        yesterdayEarnings: 10000,
      })
      this.updateStatus('loaded')

      if (wx.cloud) {
        // promise 形式
        wx.cloud.callFunction({
          name: 'xxx', // 换成真实的云函数
          data: {},
        }).then(res => {
          console.log('[Cloud Function Call Success] Result:', res)
        }).catch(err => {
          console.log('[Cloud Function Call Failure] Error Message:', err)
        })

        // callback 形式
        wx.cloud.callFunction({
          name: 'xxx', // 换成真实的云函数
          data: {},
          success: res => {
            console.log('[Cloud Function Call Success] Result:', res)
          },
          fail: err => {
            console.log('[Cloud Function Call Failure] Error Message:', err)
          },
        })
      }
    },
  },
})

NOTE:

1. The card component supports the component base lifecycle (e.g. created, attached, etc.) and the page lifecycle show and hide, but does not support interfaces such as selectorQuery, so the developer needs to care only about the data in the code logic.
2. Timers such as setTimeout, setInterval, etc. are not supported within the card assembly.
3. The wx interface is not allowed to be called during the card hiding phase.

# 4. Add a card to the user

1. After the card is ready, the addAccountCard interface needs to be activated by the user to actively trigger the addition of the card:

wx.addAccountCard({
  type: 5001, // 卡片类型
  success(res) {
    console.log(res)
  },
})

The following conditions can cause a user add to fail:

• User has added the same type of card as Weixin Mini Program
• User added, but subsequently deleted the card from Found - Weixin Mini Program
• The user added it, but then from the "Weixin Mini Program top right corner..."- Close the display switch in Settings
• User This feature is not supported in the current WeChat version (8.0.41 for Android and above or 8.0.46 for iOS and above required)

1. Developers can check in advance if the card can be added or has been added by checkAccountCardAddState:

wx.checkAccountCardAddState({
  type: 5001, // 卡片类型
  success(res) {
    // res.couldAdd - 当前是否可以调用接口添加
    // res.hasAdded - 当前是否已添加对应卡片组件
    console.log(res)
  },
})

Returned results correspond to situations:

NOTE:

1. The wx.addAccountCard must be triggered before it can be called.
2. The wx.addAccountCard is currently only supported in the Pro / Pro Weixin Mini Program.
3. Repeat addition of the same card is not supported.If the current user has added a card, Weixin Mini Program must be removed before the addition can be triggered.
4. Currently wx.addAccountCard only supports calling in the Pro / Pro version.If called in the Experience Edition, the Discovery page pulls out the Experience Edition card component subpackage for display, and if you want to re-add the official Edition card at this time, you need to remove the Experience Edition Weixin Mini Program first, and vice versa.

# 5. Users cancel card display

Users have two ways to cancel the display:

• Turn off the switch for the corresponding card in the settings of Weixin Mini Program
• Long press the account card in "Discover - Weixin Mini Program" to display the "Delete Card" entry, the user can delete the display of the card after clicking

NOTE:

• If the user deletes Weixin Mini Program directly from Recently Used, the account card is deleted synchronously and completely.To redisplay the account card, the user needs to add it again.