首页小程序开发正文

小程序开发ui框架（微信小程序ui框架vant）

小程序开发 2023-03-08T02:57:05 1664

今天给各位分享小程序开发ui框架的知识，其中也会对微信小程序ui框架vant进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、小程序的ui框架尺寸

今天给各位分享小程序开发ui框架的知识，其中也会对微信小程序ui框架vant进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、小程序的ui框架尺寸
2、小程序ui框架系列之换肤功能
3、微信小程序ui框架有哪些

小程序的ui框架尺寸

小程序的 UI 设计指南在小程序官方文档中均有介绍，以微信官方设计文档为参照：

1、小程序布局：小程序的布局主要采用块状结构进行布局，优先采用卡片、列表或网格等布局方式；

2、小程序 UI 调色：小程序的 UI 调色使用典型的灰色调子，较亮的颜色基调使用明度较浅的颜色；

3、小程序 UI 尺寸：采用 1080px 宽，720px 高的界面设计尺寸，控件尺寸以 8px 为基准单位，即每个控件的间距需以 8px 设计；

4、小程序 UI 字号：字体最大尺寸 36px，最小尺寸 24px，中等字体尺寸使用 30px。

小程序ui框架系列之换肤功能

小程序实现换肤功能结构view class='dd56165151dd98db page' id='{{SkinStyle}}'

view class='165151dd98dbe587 header'

view class='51dd98dbe5876cf2 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 }) }, })}