快速上手

🚀 点击打开区块组件代码片段，安装依赖并构建 npm 后，可在开发者工具中预览效果。

第 1 步：安装 npm 包

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

npm i @cloudbase-module/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: {
    /** 云后台访问链接中的域名，即静态托管的host*/
    staticResourceDomain: 'luke-cms-xxx.tcloudbaseapp.com',
  },
});

第 4 步：引入和使用组件

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

index.json

{
  "usingComponents": {
    "user-center": "@cloudbase-module/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 步：安装含有云调用的模板，如小程序码和小程序链接模板

进入云模板的模板中心，进入小程序码和小程序链接模板详情页点击 安装模板 按钮，等待安装完成。云模板参考

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

修改app.js，在 App的 onLaunch 生命周期方法中添加云能力初始化代码，参数传入当前小程序的云开发环境 ID。若已初始化 client sdk（见组件安装的第 3 步），则可忽略该步骤。

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: 'wx_qrcode_get_qrcode',
    data: {
      path: 'pages/index/index', // 扫码进入的小程序页面路径，最大长度 1024 个字符，不能为空，scancode_time为系统保留参数，不允许配置；对于小游戏，可以只传入 query 部分，来实现传参效果，如：传入 "?foo=bar"，即可在 wx.getLaunchOptionsSync 接口中的 query 参数获取到 {foo:"bar"}。
      width: 430, //二维码的宽度，单位 px。默认值为430，最小 280px，最大 1280px
      auto_color: false, //默认值false；自动配置线条颜色，如果颜色依然是黑色，则说明不建议配置主色调
      line_color: { r: 0, g: 0, b: 0 }, //默认值{"r":0,"g":0,"b":0} ；auto_color 为 false 时生效，使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示
      is_hyaline: false, //默认值false；是否需要透明底色，为 true 时，生成透明底色的小程序码
      env_version: 'trial', //要打开的小程序版本。正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版。
    },
  },
  success: (res) => {
    console.log('小程序码图片', res.result.tempFileURL);
    this.setData({ banner: res.result.tempFileURL });
  },
});

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

index.js

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

index.wxml

<user-center banner="{{banner}}"></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.3] - 2024-07-22

• 用户中心组件文档完善

[0.0.2] - 2024-07-17

• 用户中心组件文档完善

[0.0.1] - 2024-07-17

• 用户中心组件初版发布