微信小程序 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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
JS高级笔记
Jul 13 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 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
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python按比例随机切分数据的实现
2019/07/11 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
NET程序员上机面试题
2015/05/23 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
工商治理实习生的自我评价分享
2014/02/20 职场文书
法律进机关实施方案
2014/03/12 职场文书
竞赛口号大全
2014/06/16 职场文书
小学生读书笔记范文
2015/06/30 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
英镑符号 £
2022/02/17 杂记