自定义组件

创建自定义组件

微信小程序自定义组件一般放在 components 文件夹下，由 JSON、JS、WXML、WXSS 文件组成。

组件的 JSON 文件中，需要声明 component 属性，将属性值设置为 true 以表示其是一个组件。

{
    "component": true,
    "usingComponents": {
    }
}

组件的 JS 文件中，需要调用 Component 函数构建组件。

Component({
    properties: {},
    data: {},
    methods: {}
});

Component 函数的基本选项：

示例：创建自定义组件

测试组件配置文件（components/test/test.json）：

{
    "component": true,
    "usingComponents": {
    }
}

测试组件页面结构（components/test/test.wxml）：

<button bindtap="showMessage">点我欢迎{{name}}的到来</button>

测试组件页面逻辑（components/test/test.js）：

Component({
    properties: {
        name: {
            type: String,
            value: '张三'
        }
    },
    data: {},
    methods: {
        showMessage() {
            wx.showToast({
                title: "欢迎你，" + this.data.name
            })
        }
    }
});

使用自定义组件

自定义组件的引用方式分为局部引用和全局引用。

• 局部引用，即在页面配置文件（pages/xxx/xxx.json）中引用自定义组件。
• 全局引用，即在全局配置文件（app.json）中引用自定义组件。

引用自定义组件的基本用法：

"usingComponents": {
    "组件标签": "组件路径"
}

示例：使用自定义组件

首页页面配置文件（pages/index/index.json）：

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar",
        "test": "/components/test/test"
    }
}

首页页面结构（pages/index/index.wxml）：

<test name="多仔"></test>

示例效果：

UI 组件库

Vant Weapp

Vant Weapp 是有赞前端团队开发的一套开源的微信小程序 UI 组件库，其界面风格统一、功能齐全，提供了一整套 UI 基础组件和业务组件，能够快速搭建出风格统一的页面。

Vant Weapp 文档：https://vant-ui.github.io/vant-weapp/0.x/#/intro

在微信小程序中使用 Vant Weapp，需要利用 npm 将 Vant Weapp 安装到项目中，并进行相关配置。

• 微信小程序默认没有初始化 package.json，故需要先初始化 package.json。
• 在全局配置文件（app.json）中，需要删除 style 配置项，以关闭新版基础组件样式，避免样式混乱。
• 微信小程序不能使用 npm 包，需要在微信开发者工具中将 npm 包转换成微信小程序可以使用的包。
• 使用 Vant Weapp 组件时，需要局部或全局导入对应的组件。

示例：Vant Weapp

终端执行：

npm init -y

npm i vant-weapp -S --production

全局配置文件（app.json）：

{
    "pages": [
        "pages/index/index"
      ],
      "window": {
        "navigationBarTextStyle": "black",
        "navigationStyle": "custom",
        "enablePullDownRefresh": true
      },
      "componentFramework": "glass-easel",
      "sitemapLocation": "sitemap.json",
      "lazyCodeLoading": "requiredComponents"
}

构建 npm 包：

首页页面配置文件（pages/index/index.json）：

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar",
        "van-button": "vant-weapp/button"
      }
}

首页页面结构（pages/index/index.wxml）：

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

示例效果：

WeUI

WeUI 是微信官方设计团队为微信移动 Web 量身设计的一套与微信原生视觉体验一致的组件库。

WeUI Web 文档：https://github.com/Tencent/weui/wiki

WeUI-MiniProgram 文档：https://wechat-miniprogram.github.io/weui/docs/

在微信小程序中使用 WeUI，可以在全局配置文件（app.json）中直接启用 WeUI，或利用 npm 将 WeUI 安装到项目中。

WeUI 组件库中的组件有两种类型，一种是直接通过 class 样式类使用的组件（WeUI Web），另一种是需要在页面配置或全局配置中引入的组件（WeUI-MiniProgram）。

示例：WeUI

全局配置文件（app.json）：

"useExtendedLib": {
    "weui": true
}

首页页面结构（pages/index/index.wxml）：

<a role="button" class="weui-btn weui-btn_default">按钮</a>

示例效果：

uni-app

uni-app 概述

uni-app 是使用 Vue.js 开发的一个前端框架，基于该框架可以很方便地进行多端项目开发，其支持的平台包括 Android、iOS、响应式 Web 和各种主流的小程序等。

使用 uni-app 开发项目的优势：

• 平台能力不受限，一套代码多端发行。
• 性能体验优秀，加载新页面速度快，可以自动更新数据。
• 基于通用技术栈 Vue.js，学习成本低。
• 生态开放、组件丰富。

HBuilderX

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 项目。

HBuilderX 下载：https://dcloud.io/hbuilderx.html

uni-app 项目结构

在 HBuilderX 中新建一个 uni-app 项目。

uni-app 项目的基本结构：

将 uni-app 项目运行至微信小程序

使用 uni-app 开发完成项目后，可以将 uni-app 项目运行至微信小程序。

打开项目配置文件（manifest.json），获取 uni-app 应用标识 AppId。

在项目配置文件（manifest.json）中，配置微信小程序 AppId。

在 HBuilderX 运行设置中，配置微信开发者工具路径。

在微信开发者工具中，开启服务端口。

在 HBuilderX 中，将项目运行到小程序模拟器-微信开发者工具。

uni-app 项目全局配置文件

在 uni-app 中，可以通过修改全局配置文件（pages.json）来对 uni-app 项目进行全局配置，包括页面文件的路径、导航栏、底部标签栏等。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}