pbui-wx

Pbui-微信小程序版（pbui-wx）文档

Pbui-wx 是一套基于微信小程序的基础样式组件库，于 2021 年开发上线。

使用指南

使用 Pbui-wx 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

npm i pbui-wx

步骤二 修改 project.config.json

基础开发

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

云开发

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

步骤三 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

使用

引入组件

以 pb-table 组件为例，只需要在app.json或index.json中配置 pb-table 对应的路径即可。

"usingComponents": {
  "pb-table": "pbui-wx/pb-table/pb-table"
}

使用组件

引入组件后，可以在 wxml 中直接使用组件

<pb-table></pb-table>

基础组件

按钮 pb-button

引入组件

"usingComponents": {
  "pb-button": "pbui-wx/pb-button/pb-button"
}

使用组件

<pb-button></pb-button>

属性配置

属性名	示例属性值	类型	说明
pbText	按钮	String	按钮显示内容
pbClass	pbClass	Object	自定义样式
bindmyevent	pbClick	Object	点击事件

表格 pb-table

引入组件

"usingComponents": {
  "pb-table": "pbui-wx/pb-table/pb-table"
}

使用组件

<pb-table></pb-table>

属性配置

属性名	示例属性值	类型	说明
pbList	pbList	Array	列表显示内容列表
pbClass	pbClass	Object	自定义样式

开发中...