微信小程序引入原生组件——WeUI组件库,详细步骤

article/2025/9/22 10:59:23

第一步:查看是否可使用npm命令,没有则安装:

我这里已经安装了,如果没有则安装node.js

 node官网下载地址:https://nodejs.org/en/

注意这个windows 64位的:

 其他系统看这里:点击dowloads

先点击LTS,下面可选 32位或者64位的 

下载好安装包,一路next即可。

终端输入 npm -v   ,看见版本号 即安装成功

第二步:微信开发工具,打开微信小程序项目,没有就新建一个:

这里我就新建一个 小程序项目:

打开微信开发工具:选择小程序,点击 + 

修改好自己的项目名,已经项目路径。点击测试号 (已经申请的,可填写自己的appid)

点击新建:

至此简单的微信小程序项目完成:

第三步:步入正题,引入组件——WeUI组件库

以通过npm方式下载构建,npm包名为weui-miniprogram

①终端进入项目的根目录(我这里是lemon_test),输入 npm init 命令

右击pages 选择终端打开, 输入cd ..命令,即可进入根目录

输入 npm init ,一直回车键即可

②继续输入 npm i weui-miniprogram --production 命令

③回到微信开发者工具,开始npm构建:

 点击,详情->本地设置->使用npm模块,勾选npm模块

点击工具,选择构建npm

构建完成,点击确认

第四步:开始使用WeUI组件,验证是否构建成功:

①新建一个自己的页面:

在app.js添加自己的页面 "pages/lemon/lemon",  修改后点击编译,自动生成lemon文件夹及其相关文件

②打开微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html

JSON内容:覆盖到lemon.josn中(注意修改路径 ../miniprogram_npm/weui-miniprogram/)

WXML内容:覆盖到lemon.wxml

JAVASCRIPT内容:覆盖到lemon.js

根据开发文档:

app.wxss添加内容:@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

添加好,点击编译:即可

此时右侧表单样式已经成功出现,组件库构建成功!!!

第五步:试着添加其他样式:以Msg样式为例:

新建自己的Msg页面:

在app.josn中添加"pages/msg/msg", 

点击编译,自动生成我们的页面

 查看开发文档,

将JSON内容覆盖到msg.json中(注意修改路径)

WXML内容覆盖到msg.wxml中

点击编译,大家发现左侧样式已经出现。你学会吗?愉快的开发属于自己的微信小程序吧!

谢谢查看~

 

 

 

 

 


http://chatgpt.dhexx.cn/article/qLLhWHGM.shtml

相关文章

微信小程序UI框架之【weui】怎样使用

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

第一次使用weui

今天在做微信公众号开发时&#xff0c;用了一下weui&#xff0c;发现很好用。 1、怎么下载weui.css 例如&#xff0c;进入了该链接页面&#xff1a;https://weui.io/#input&#xff0c;然后右键查看源码&#xff0c;在源码中有这样一行&#xff1a; <link rel"style…

微信小程序引入weui

一、执行步骤 1.根目录下执行 npm init -y npm install --save weui-miniprogram --production npm install express 2.文件配置 project.config.json 找到 packNpmManually 和 packNpmRelationList 修改成如下内容&#xff1a; "packNpmManually": true, &quo…

WeUI for 小程序--使用教程

WeUI for 小程序–使用教程 weUI 是一套同微信原生视觉体验一致的基础样式库&#xff0c;由微信官方设计团队为微信 Web 开发量身设计&#xff0c;可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 预览 …

WeUI基础样式库

WeUI包含button、cell、dialog、toast、article、icon等各式元素。 按钮&#xff08;Button&#xff09; 按钮可以使用a或者button标签。wap上要触发按钮的active态&#xff0c;必须触发ontouchstart事件&#xff0c;可以在body上加上ontouchstart""全局触发。 按…

WeUI - 微信官方推出的免费开源 UI 组件库,上手简单,风格简约,在微信生态开发轻量项目的绝佳选择

微信早年发布的 UI 框架&#xff0c;对想要创建让微信用户感到熟悉的应用来说&#xff0c;是一个好选择。 关于 WeUI WeUI 一款由腾讯微信团队开发的 UI 组件库&#xff0c;是一套同微信原生视觉体验一致的基础样式库&#xff0c;由微信官方设计团队为微信 Web 开发量身设计&…

weui学习总结——1、weui表单常用标签

前言&#xff1a;weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档&#xff0c;所以这篇博客就当是方便以后开发而使用吧。 weui资源下载&#xff08;也可以从官网下载&#xff09;&#xff1a; http://download.csdn.net/download/z…

微信小程序-weUI组件库

微信小程序的开发过程中&#xff0c;常常会出现很多重复性的功能翻来覆去地使用&#xff0c;那么直接用一套封装好的组件库&#xff0c;就能大大提升开发速度。 微信小程序的UI组件库有很多&#xff0c;可以参考下面这个内容&#xff1a; 微信小程序UI组件库合集 | 微信开放社…

微信小程序之WeUI组件库的使用

本文主要介绍微信小程序中的 WeUI组件库的具体使用方法&#xff0c;通过具体的示例代码进行介绍&#xff0c;相信能够对大家的学习和工作都有一定的参考学习意义&#xff0c;欢迎大家一起学习进步。 WeUI组件库 官方文档 一、前言 WeUI 是一套同微信原生视觉体验一致的基础样…

WeUI使用步骤

先去下载 小程序版weui下载地址&#xff1a;https://github.com/Tencent/weui-wxss可以将整个文件下载下来&#xff0c;将其中的dist文件夹导入到独立的小程序中作为参考如下图 注意&#xff1a;样式文件可直接引用dist/style/weui.wxss&#xff0c;或者单独引用dist/style/wi…

npm引入小程序官方WeUI组件库weui-miniprogram

1、打开cmd&#xff0c;在小程序根目录内&#xff0c;初始化npm npm init2、执行命令安装 npm 包&#xff1a; npm install --save weui-miniprogram3、安装完成后&#xff0c;在微信开发者工具中的菜单栏&#xff1a;工具 ------ 构建 npm &#xff1a; 4、在微信开发者工具中…

WeUI 详细介绍

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。 WeUI 是一套同微信原生视觉体验一致的基础样式库&#xff0c;为微信 Web 开发量身设计&#xff0c;可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。 使用 方法一…

WeUI组件库

一套基于样式库weui-wxss开发的小程序扩展组件库&#xff0c;同微信原生视觉体验一致的UI组件库&#xff0c;由微信官方设计团队和小程序团队为微信小程序量身设计&#xff0c;令用户的使用感知更加统一。 ***全局布置UI组件库&#xff1a;1.引入app.json "useExtende…

微信小程序使用WeUI入门教程

微信小程序使用WeUI入门教程 在学习微信小程序过程中&#xff0c;很多组件的样式需要自己调整&#xff0c;且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库&#xff0c;预览了组件库&#xff0c;真的非常nice&#xff01; 但是找不到怎么去引用。网上资料又很少&a…

微信公众号weui的使用

hello,i’m Shendi 最近在弄微信公众号&#xff0c;于是记录一下 文章目录 预览下载地址官方文档使用 预览 官方给的演示链接 https://weui.io/ 下载地址 https://github.com/Tencent/weui 将整个仓库下载下来即可 官方文档 https://github.com/Tencent/weui/wiki 使用 …

WeUI for 小程序使用教程文档总结

WeUI 是一套同微信原生视觉体验一致的基础样式库&#xff0c;由微信官方设计团队为微信 Web 开发量身设计&#xff0c;可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元…

weui 开发文档

weui开发简单入门 一系列文档地址项目中使用步骤本地起测试demo 一系列文档地址 今天需要用到weui&#xff0c;这里记录一下开发文档地址 开发文档&#xff1a;http://old.jqweui.com/components js文档&#xff1a; https://github.com/Tencent/weui.js/blob/master/docs/R…

Maven 项目查找 jar 包是由哪个配置引入的

maven依赖结构图 1.项目查询所有的Maven查看JAR包的依赖关系 mvn dependency:tree 如查询junit.jar 是依赖谁导入进来的 这样就知道是被谁依赖而导入到项目的 其中“-”符号表示该包后面还有其它依赖包&#xff0c;“\-”表示该包后面不再依赖其它jar包了。 2.搜索具体的某一…

SpringBoot 打成的 jar 包和普通的 jar 包有什么区别

Spring Boot 中默认打包成的 jar 叫做可执行 jar&#xff0c;这种jar包可以通过可以通过命令&#xff08;java -jar xxx.jar&#xff09;来运行的&#xff0c;但这种jar包不能被其他项目所依赖&#xff0c;因为它和普通 jar 的结构不同&#xff0c;即使被依赖了也不能直接使用其…

jar包结构

闲来无事&#xff0c;看了一下jar包的结构&#xff0c;今天来学习一下 就用这个spring-aop的jar包来举例子&#xff1a; 首先是META-INF文件夹下的文件&#xff1a;INDEX.LIST INDEX.LIST&#xff1a;顾名思义&#xff0c;索引列表。这个应该就是描述了当前jar包下所有的资源…