@cloudbase-module/v2-user-center v0.0.3

快速上手

第 1 步：安装 npm 包

找到小程序项目的根目录如miniprogram，进入终端，执行以下命令来安装 npm 包

npm i @cloudbase-module/v2-user-center

第 2 步：构建 npm

依次选择微信开发者工具菜单 -> 工具 -> 构建 npm，等待弹窗提示构建成功即可。npm 构建参考

第 3 步：初始化

由于区块组件依赖 weui，需在小程序 app.json 中添加 useExtendedLib 以使用 weui

{ "useExtendedLib": { "weui": true } }

由于部分区块组件（如用户中心）依赖sdk，需在小程序 app.js 头部添加 js 代码，以初始化 sdk

import { init } from '@cloudbase/weda-client';
init({
  /** 云开发环境ID */
  envID: 'cloud-xxxx',
  appConfig: {
    /** 云后台访问链接中的域名 */
    staticResourceDomain: 'luke-cms-xxx.tcloudbaseapp.com',
  },
});

第 4 步：引入和使用组件

根据需要可以在app.json全局引入, 也可以在指定组件的 json 文件里引入。自定义组件参考

index.json

{
  "usingComponents": {
    "user-center": "@cloudbase-module/v2-user-center/userCenter/index" // 需替换为实际路径
  }
}

在对应的 wxml 文件里，使用引入的组件

index.wxml

<user-center banner="{{banner}}"></user-center>

在对应的 js 文件里，设置属性值，组件的属性列表可进入“组件展示”里查看

index.js

Page({
  data: {
    banner:
      'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/a519d7da-f2e2-42db-b7b4-af2820942204.png',
  },
});

第 1 步：安装含有云调用的模板，如 AI 智能体模板

在 AI 智能体模板详情页点击 安装模板 按钮，等待安装完成。

第 2 步：小程序端云能力初始化

修改app.js，在 App的 onLaunch 生命周期方法中添加云能力初始化代码，参数传入当前小程序的云开发环境 ID。

App({
  onLaunch: function () {
    wx.cloud.init({
      // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
      env: '{%TCB_ENV_ID%}',
      // 是否在将用户访问记录到用户管理中，在控制台中可见，默认为false
      traceUser: false,
    });
  },
});

第 3 步：在小程序中调用云模板提供的接口

例如，我们可以通过 callFunction 调用云模板提供的接口

wx.cloud.callFunction({
  name: 'cloudbase_module',
  data: {
    name: 'ai_bot_send_msg',
    data: {
      msg: '写一个小程序分享的标题',
      history: [],
      bot: 'addca5a16644370f00e32d0c75ffe581',
    },
  },
  success: (res) => {
    // 将res返回的信息，用于区块组件的属性值
  },
});

第 4 步：将接口返回的数据作为区块组件的属性值

index.js

Page({
  data: {
    actions: [
      {
        icon: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/fbdddbc3-926a-48ab-806b-554a39e41c66.svg',
        title: '上一步返回的标题', // 上一步返回的标题
        show: true,
        action: 'userInfo',
      },
    ],
  },
});

index.wxml

<user-center actions="{{actions}}"></user-center>

功能特性

• 开箱即用：开箱即用，解压到自有小程序，即可作为小程序自定义组件使用。
• 使用灵活：区块组件支持 npm 方式和手动安装使用，遵循原生小程序的开发规范。
• 低代码定制：内置低代码开发工具，可根据自身需求任意修改自定义组件的实现。

模板内容

• 用户中心：相对完整的小程序端用户中心，集成了微搭登录态和运行态，开箱即用。
• 个人信息：独立的个人信息的管理表单，支持头像、昵称等信息的展示和修改。

组件属性

• 用户中心组件属性列表

• 个人信息组件属性列表

QA

1、使用组件时出现找不到模块问题怎么处理(如 miniprogram_npm/@cloudbase/weda-cloud-sdk/@cloudbase/js-sdk/app.js is not defined)?

此问题可能是安装依赖或构建环节有些步骤未正常执行导致，可以试试：

1）删除 miniprogram_npm

2）命令行 cd 进入组件目录，如 components，执行

yarn run postinstall

3）重新构建 npm，清除 IDE 缓存重新进入

更新日志

0.0.2 - 2024-07-15

• 优化用户中心操作列配置
• 优化组件的属性列表
• 提升组件的使用效率

0.0.1 - 2024-07-11

• 用户中心组件初版发布