微信小程序 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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
React快速入门教程
Jan 17 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
angularJS开发注意事项
May 26 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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中mysql操作buffer用法详解
2015/03/19 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python滑块验证码的破解实现
2019/11/10 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
婚礼司仪主持词
2014/03/14 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
基层党员对照检查材料
2014/09/24 职场文书
2014年妇联工作总结
2014/11/21 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers