小程序开发ui框架（微信小程序ui框架vant）
今天给各位分享小程序开发ui框架的知识，其中也会对微信小程序ui框架vant进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
小程序的ui框架尺寸
小程序的 UI 设计指南在小程序官方文档中均有介绍，以微信官方设计文档为参照：
1、 小程序布局：小程序的布局主要采用块状结构进行布局，优先采用卡片、列表或网格等布局方式；
2、 小程序 UI 调色：小程序的 UI 调色使用典型的灰色调子，较亮的颜色基调使用明度较浅的颜色；
3、小程序 UI 尺寸：采用 1080px 宽，720px 高的界面设计尺寸，控件尺寸以 8px 为基准单位，即每个控件的间距需以 8px 设计；
4、 小程序 UI 字号：字体最大尺寸 36px，最小尺寸 24px，中等字体尺寸使用 30px。
小程序ui框架系列之 换肤功能
小程序实现换肤功能结构view class='5f2a521ee5a46d05 page' id='{{SkinStyle}}'
view class='521ee5a46d0533f3 header'
view class='e5a46d0533f303d1 h-skin iconfont {{SkinStyle!='='"normal"?"icon-moon":"icon-sun"}}' bindtap='bgBtn'/view
/view/view
要模拟一个可修改的根节点page 根据 id='{{SkinStyle}}’ 来配置theme.wxss 每个页面@import 这个theme.wxss#dark .header{}切换按钮全局变量：globalData:{skin:“normal”}. //app.js文件中页面中bgBtn事件bgbtn:function(){ this.setData({
SkinStyle: app.globalData.skin //设置SkinStyle的值
}) wx.setStorage({ //设置storage key: 'skins', data: app.globalData.skin,
})}页面的Page中的onLoad事件里，读取storage并设置SkinStyle的值onLoad: function (options) { var that=this;
wx.getStorage({
key: 'skins',
success: function(res) { that.setData({ SkinStyle: res.data }) }, })}
微信小程序ui框架有哪些
微信小程序开发，是目前火爆的开发方式，也是适应中小企业快速解决的一个方案。选择一个合适自己的开发UI框架，能够让自己开发速度提升数倍。
推荐两个小程序UI框架：
WeUI
WeUI是由微信官方设计团队分别支持微信H5网页和微信原生小程序的开源UI组件
ColorUI
ColorUI是开源且支持原生小程序的UI组件，由于我目前在帮朋友改一个原生的微信小程序，所以就选择了这款开源组件。
小程序开发ui框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序ui框架vant、小程序开发ui框架的信息别忘了在本站进行查找喔。
