微信小程序 WeUI扩展组件库的入门教程


Posted in Javascript onApril 21, 2022

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

在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice!

但是找不到怎么去引用。网上资料又很少,最后还是要依赖官方文档去学习,下面把如何入使用总结一下。

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

1. 学习参考

WeUI样式库展示:https://weui.io/

微信官方WeUI相关文档:https://wechat-miniprogram.github.io/weui/docs/

WeUI-wxss 项目地址:https://github.com/Tencent/weui-wxss

直奔主题,如何使用!

直接预览WeUI-wxss示例代码,直接引用上手~

打开[WeUI-wxss](https://github.com/Tencent/weui-wxss)项目地址,可以看到有一个dist目录,这个目录就是WeUI示例代码,下载下来,用小程序打开该dist目录,一定是该目录哦!

然后,想用什么直接copy吧!

微信小程序 WeUI扩展组件库的入门教程

2.NodeJs初始化

这里如果没有安装NodeJs的自行安装。

确保有NodeJs,在你小程序项目根目录,执行以下命令,然后一路回车键即可安装完成。

npm init

执行完以后,会在项目根目录看到package.json文件

微信小程序 WeUI扩展组件库的入门教程

3.安装WeUI组件库

在项目根目录执行以下命令:

npm install --save weui-miniprogram --production

会在根目录出现node_modules目录

4.配置

4.1 构建npm

打开微信小程序开发工具,点击顶部菜单【工具】–【构建npm】,构建完成后会在项目根目录生成miniprogram_npm文件夹,如下图:

微信小程序 WeUI扩展组件库的入门教程

4.2 支持npm

点击小程序开发工具右上角【详情】–【本地设置】,勾选上【使用npm模块】,这里有个坑需要注意一下,记得把基准库选择最新的。

微信小程序 WeUI扩展组件库的入门教程

5.项目使用WeUI

在小程序根目录app.wxss中引入样式文件(按照自己的路径引入)

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

在需要页面的json文件引入需要的组件,例如:

"usingComponents": {
    "mp-form_page": "/miniprogram_npm/weui-miniprogram/form/form_page"
  }

在对应的wxml页面就可以使用了,示例

<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}">
	<view class="weui-form">
		<view class="weui-form__text-area">
			<h2 class="weui-form__title">表单结构</h2>
			<view class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</view>
		</view>
		<view class="weui-form__control-area">
			<view class="weui-cells__group weui-cells__group_form">
				<view class="weui-cells__title">表单组标题</view>
				<view class="weui-cells weui-cells_form">
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd"><label class="weui-label">微信号</label></view>
						<view class="weui-cell__bd">
							<input class="weui-input" placeholder="填写本人微信号" placeholder-class="weui-input__placeholder" />
						</view>
					</view>
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd">
                            <label class="weui-label">昵称</label>
                        </view>
						<view class="weui-cell__bd">
							<input class="weui-input" placeholder="填写本人微信号的昵称" placeholder-class="weui-input__placeholder" />
						</view>
					</view>
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd">
                            <label class="weui-label">联系电话</label>
                        </view>
						<view class="weui-cell__bd">
							<input class="weui-input" placeholder="填写绑定的电话号码" type="number" placeholder-class="weui-input__placeholder" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="weui-form__opr-area">
			<a aria-role="button" class="weui-btn weui-btn_primary">确定</a>
		</view>
	</view>
</view>

总结

到此这篇关于微信小程序使用扩展组件库WeUI的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
javascript中attribute和property的区别详解
Jun 05 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
vue之延时刷新实例
Nov 14 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
微信小程序 根据不同用户切换不同TabBar
Apr 21 #Javascript
vue动态绑定style样式
Apr 20 #Vue.js
JS setTimeout与setInterval的区别
Apr 20 #Javascript
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python3 max()函数基础用法
2019/02/19 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python中itertools的用法详解
2020/02/07 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
六一亲子活动总结
2014/07/01 职场文书
英语辞职信范文
2015/02/28 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
酒店员工手册范本
2015/05/14 职场文书
决心书格式范文
2015/09/23 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
MySQL 数据表操作
2022/05/04 MySQL