微信小程序 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 相关文章推荐
修复bash漏洞的shell脚本分享
Dec 31 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jQuery的position()方法详解
Jul 19 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
vue.js实例todoList项目
Jul 07 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 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
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vant中的toast轻提示实现代码
2020/11/04 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python3 读取Word文件方式
2020/02/13 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
运动会四百米广播稿
2014/01/19 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年管理工作总结
2014/11/22 职场文书
三方合作意向书范本
2015/05/09 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
Mysql 一主多从的部署
2022/05/20 MySQL
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python