引用第三方自定义组件——微信小程序学习笔记

1. 使用 npm 安装第三方包

1.1 下载安装Node.js 工具

下载地址:Node.js --- Download Node.js®

1.2 安装 npm 包

在项目空白处右键弹出菜单,选择"在外部终端窗口打开",打开命令行工具,输入以下指令:

  • 1> 初始化:

    npm init -y

  • 2> 安装目标 npm 包

    npm -install [packageName] -save

1.3 npm 构建

点击【工具】,选择【构建 npm】,当弹出构建完成对话框,表示构建成功,项目目录中可发现多出了【miniprogram_npm】文件夹。

1.4 使用

1.4.1 自定义组件配置

在app.json(全局) 或 [page].json 中配置 "usingComponents",比如想使用vant weapp 中的 button,可进行如下配置:

复制代码
  "usingComponents": {
      "v-button":"/miniprogram_npm/@vant/weapp/button/index"
  }

1.4.2 在页面 wxml 中使用

复制代码
    <view class="container">
        <v-button type="primary">操作按钮</v-button>
    </view>

2. 第三方自定义组件

2.1 weui

这是一套基于样式库 weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。

2.1.1 参考推荐

网上教程: 使用npm 引入WeUi组件_npm weui-CSDN博客

官方文档:WeUI组件库简介 | wechat-miniprogram / weui

网页效果:WeUI

:官方给的使用说明不清楚,属性介绍不全,可通过打开网页效果的'开发者人员工具',查看对应组件的属性值。

2.1.2 示例

在 *.wxss 中引用样式

复制代码
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

在 *.json 引用自定义组件,如dialog

复制代码
  "usingComponents": {
      "mp-dialog":"/miniprogram_npm/weui-miniprogram/dialog/dialog"
  },

在 *.wxml 中使用

复制代码
    <mp-dialog title="标题" show="{{showDialog}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
        <view>内容~~~~</view>
    </mp-dialog>

*.js 中相关的代码有:

复制代码
Page({
    data:{
        buttons:[{
            text:'确定',
            extClass:'weui-dialog__btn weui-dialog__btn_default'

        },
        {
            text:'取消',
            extClass:'weui-dialog__btn weui-dialog__btn_warn'
        }]
    },

    tapDialogButton(e){

        //index: 0 text: 确定
        console.log("index:",e.detail.index,"text:",e.detail.item.text)
        this.setData({
            showDialog:false
        })
    }
})

2.2 vant weapp

vant weapp 的使用文件比weui 的详细,组件也比weui多。

2.2.1 参考推荐

网上教程:

微信小程序中使用vant组件库(超详细)微信小程序中使用vant组件库(超详细) 目录 前言 Vant Weapp的安装 - 掘金

官网教程: vant-weapp: 轻量、可靠的小程序 UI 组件库

官网使用文档:介绍 - Vant Weapp

2.2.2 示例

以 Button 组件为例,只需要在app.jsonindex.json中配置 Button 对应的路径即可。

复制代码
// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index" 
}

// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}

// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

使用组件

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

复制代码
<van-button type="primary">按钮</van-button>
相关推荐
悠哉悠哉愿意39 分钟前
【数学建模学习笔记】机器学习分类:KNN分类
学习·机器学习·数学建模
四谎真好看1 小时前
Java 学习笔记(进阶篇2)
java·笔记·学习
程序猿炎义1 小时前
【NVIDIA AIQ】自定义函数实践
人工智能·python·学习
小陈phd1 小时前
高级RAG策略学习(四)——上下文窗口增强检索RAG
人工智能·学习·langchain
Jayyih3 小时前
嵌入式系统学习DAY28(网络编程)
网络·学习·tcp/ip
Suckerbin3 小时前
DarkHole: 2靶场渗透
笔记·安全·web安全·网络安全
dbdr09013 小时前
Linux 入门到精通,真的不用背命令!零基础小白靠「场景化学习法」,3 个月拿下运维 offer,第二十六天
linux·运维·服务器·网络·python·学习
一枝小雨3 小时前
【C++】Vector完全指南:动态数组高效使用
开发语言·c++·笔记·vector·学习笔记·std库
大白的编程日记.3 小时前
【Linux学习笔记】信号的深入理解之软件条件产生信号
linux·笔记·学习
buyutang_3 小时前
C/C++ Linux系统编程:线程控制详解,从线程创建到线程终止
linux·c语言·c++·学习