首页小程序开发正文

小程序开发ui框架（小程序UI设计）

小程序开发 2023-01-23T12:39:02 1605

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

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

本文目录一览：

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

微信小程序ui框架有哪些

微信小程序开发，是目前火爆的开发方式，也是适应中小企业快速解决的一个方案。选择一个合适自己的开发UI框架，能够让自己开发速度提升数倍。

推荐两个小程序UI框架：

WeUI

WeUI是由微信官方设计团队分别支持微信H5网页和微信原生小程序的开源UI组件

ColorUI

ColorUI是开源且支持原生小程序的UI组件，由于我目前在帮朋友改一个原生的微信小程序，所以就选择了这款开源组件。

vue的ui框架有哪些

elementUI

2.iview

这个UI框架是对标elementUI而生的，最大优点是官方有桌面版配置工具，只需使用鼠标就可以构建一个基于iview+vue的应用，免去手巧命令的烦恼。最新的版本为3.x。建议对elementUI框架审美疲劳的同学可以尝试这个呦。官方网站的文档和例子基本上你是小白也能学明白。

3.zanUI

由有赞团队开源的移动端UI框架，对于移动电商应用的开发来说，有很多写好的页面组件，可以直接拿来使用。当然zanUI的样式也是很好看的。当然也有PC端组件，和小程序端。zanUI一共分三个版本，针对移动端的为vantUI，PC端为zentUI，小程序端为Vant Weapp。

4.onsenUI

onsenUI的组件样式

这个UI框架是国外开发，所以UI设计，很多都是迎合国外用户，对于国内用户，可能不是很好看，但是做为主打海外市场的应用，这个UI框架还是值得去使用的。

5.mintUI

这个是一个中规中矩的移动端UI框架，适合移动端的绝大部分场景。

6.museUI

这个框架还是比较有特色的，不管怎么说，这类不随波逐流的UI框架已经很少见了，但是还是建议使用在主打海外市场的应用上。

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

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

view class='e707d9eb115637e4 header'

view class='d9eb115637e4c798 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设计）