【微信小程序】微信小程序中WeUI的使用

首先来看下WeUI的介绍：

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，而且和各组件的样式和微信一样，能够很好地和微信融合在一起，给用户较好的体验。

1.引入WeUI

WeUI的Github地址：WeUI下载地址

下载 weui-wxss/dist/style/目录中的weui.wxss即可

下载完成后将weui.wxss文件放到小程序的主目录下：

2.使用WeUI

a.在app.wxss中加入：

@import 'weui.wxss';

根组件使用

<view class="page">
</view>

页面骨架组件

<view class="page">
<view class="page__hd"></view>
</view>

其他组件以WeUI开头

<view class="weui-footer">HelloWorld</view>

【微信小程序】微信小程序中WeUI的使用相关推荐

ajax 微信code获取_计算机毕业设计中微信小程序实现微信登录(Java后台)
点击上方"蓝字",关注我们. 需要的材料 1:一个可以测试的微信小程序 2:此微信小程序的APPID和APPscret 流程微信用户对应一个小程序都有一个唯一的openid,微信 ...
微信小程序云开发CMS中WebHook功能的使用方法
微信小程序云开发CMS中WebHook功能的使用方法官方文档 Webhook 是什么呢,翻译过来就是网页钩子.它的用处是,当我们在CMS进行增添查改的操作后,会自动回调webhook函数,我们就可以 ...
微信小程序资料集（中）
**12月1日小程序Demo集合** [微信小程序Demo:金融理财计算器](简书) [微信小程序Demo:支付宝+微信二维码收款小程序](简书) [上滑导航吸顶效果](简书) [微信小程序Demo: ...
微信小程序的 .wxml文件中如何加入多个空格
微信小程序的 .wxml文件中如何加入空格一.直接按空格键二.使用不换行空格 ` ` 一.直接按空格键注意:连续多个空格被视为一个空格代码演示: <text> 你好按了一次空格键 ...
微信小程序开发之wxss中的那些事（一）
微信小程序开发之wxss中的那些事微信小程序开发中,页面的布局怎么整? 啥是WXSS? 基本语法什么是rpx 什么是 flex 微信小程序开发中,页面的布局怎么整? 各位道友请留步,如果你是新手, ...
微信小程序获取app.js中的公共数据
微信小程序获取app.js中的公共数据小程序项目结构如下 app.js App({list: [{id: 1,name: '完美型',content: "属于第一型的你,相信常常这感觉,对 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...
微信小程序知识点汇总---更新中
微信公众平台是基于微信公众号,为微信用户提供服务的平台微信公众平台开发:是基于微信内进行的公众号业务开发: 前端程序员是公众平台开发的主力军平台登录地址:https://mp.weixin.qq ...
关于微信公众号小程序在运营过程中的注意事项
运营必看想使用"小程序数据助手",但是没有数据分析问题在PC端,网页上如何授权重点:你要有小程序的管理账户 Good luck ! 想使用"小程序数据助手&quo ...
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...

【微信小程序】微信小程序中WeUI的使用

【微信小程序】微信小程序中WeUI的使用相关推荐

最新文章

热门文章