小程序样式库（小程序css库）

本篇文章给大家谈谈小程序样式库，以及小程序css库对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享小程序样式库的知识，其中也会对小程序css库进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、重磅：微信小程序发布WeUI.js 官方视觉组件库！
• 2、小程序wxss如何引入css链接库
• 3、小程序开发（二）-页面样式
• 4、二、支付宝小程序前端样式的设计.acss样式详解
• 5、微信小程序 wxss样式总结

重磅：微信小程序发布WeUI.js 官方视觉组件库！

12月16日，微信正式发布了WeUI.js动态视觉组件库。WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，可以让用户的使用感知更加统一。WeUI.js动态视觉组件库包含了button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。
一、weui.js是什么？

weui.js是WeUI的轻量级JS封装，不需要依赖其它库，GZIP后仅有9.0 KB。
二、weui.js包含哪些组件？

actionsheet

alert

confirm

dialog

form

gallery

loading

picker

searchbar

slider

tab

toast

toptips

uploader
三、使用方式小程序样式库：

Github：https://github.com/weui/weui.js

详细文档：http://dwz.cn/4QTFrm
四、微信团队为何在此时公布官方视觉组件库：

1、为了更像微信OS

微信团队和之前的轻应用平台相比，不是简单为了给开发者和用户之间提供一个平台连接、也不是只为了做一个流量入口平台那么简单，而是为了打造一个完美的微信OS生态。当年百度、UC等平台推出的轻应用，更多的只是起到了一个平台倒流和连接的作用，并没有对开发框架和设计规范进行过如此统一的规范和要求。现在看来，最好的生态，当然是类似苹果安卓OS那样，所有的应用具备统一的开发框架和接近OS生态的完美体验。

2、为了极致的用户体验

从小程序内测到公测已经过去了三个月，小程序样式库我们有理由相信微信团队已经接到了不少小程序开发者的审核需求，这其中最让微信团队头疼的应该就是开发设计规范不符合微信团队的要求，达不到微信团队想要的那种用户体验。微信官方进一步推出Weui就是为了让所有开发者提交的小程序都能够接近微信APP的体验效果，从而给微信用户带去最佳的用户体验，这也是未来小程序生态能否提高8亿用户使用热度和频率的一个重要指标。

3、倒逼第三方服务商转型

微信团队在早年推出公众号的时候曾经推出过“开发者模式”，当时，微信团队鼓励第三方公司利用微信公众号开放的接口进行各种微应用的开发，比如：微网站、微商城，微工具等各种应用。但是，微信团队早期并没有对这些接入应用的开发框架和设计规范进行统一的定义和严格要求，导致每一个服务接入商基本都是按照自己的开发框架和设计标准进行开发来设计，使得市面上看到的这些应用页面呈现五花八门，用户体验极其糟糕，这也就造成了早期的应用服务被用户的接受度过低，同时无法给企业带来实际价值的症结所在。随着微信小程序的出现，微信团队重塑统一的开发框架和设计规范，倒逼这些第三方服务机构重新定义自己的跟随策略，按照新的开发规范重新提供新的平台服务。或许，现有的微信第三方服务机构格局将被打破，第三方服务机构将面临新一轮的洗牌。
五、WeUI.js给小程序开发者带来了哪些好处？

1、使用Weui设计出来的小程序如同用户使用微信客户端一样的视觉效果，可以让小程序的体验感更强。

2、使用Weui设计小程序更够提高开发者的开发效率，降低开发者的开发成本，从而让开发者更快的开发出符合规范的小程序。

3、使用Weui设计小程序如同您雇佣一支国内顶尖的设计团队帮您打造一个接近完美的视觉框架。
六、微信小程序给前端设计领域带来了那些影响和推动：

1、全平台兼容

微信小程序重新定义了APP，使得一款应用能够在android、iphone以及windows

phone中都能运行，对于前端来说实现了“一次编译，到处运行”的理念。

2、前端开发思维的改变

设计理念需要从传统的PC思维需要转向到以移动为先的思维，这其中主要考虑的差异化在于屏幕尺寸、网络带宽、输入设备等几个方面的不同。同时很多之前可以用于iOS与Android的控件需要在小程序上重新调整和创新。

3、推动前端技术的发展

微信小程序以其简单的开发环境，使以Javascript和HTML5为主的前端技术成为真正的主流，越来越多的人开始接触前端开发，为前端技术的发展贡献力量。

4、前端投入成本的增加

原本一家传统企业的前端开发人员需要覆盖PC端、移动端、APP应用等各种平台，微信小程序的出现会导致未来的前端开发人员还需要涉及小程序的前端开发设计，这在一定程度增加了前端开发人员学习和工作成本，同时也会给企业带来更多的人才投入成本。

5、前端人才的竞争更加明显

微信小程序的诞生会吸引一大批后台开发、app开发的程序猿们加入前端开发大军，进一步冲击现有的前端开发人员的的知识结构，加剧前端开发岗位的竞争格局，迫使一些低端且知识结构不全面的前端开发人员面临被淘汰或者失业的风险。

6、全栈工程师会越来越吃香

随着微信小程序的出现，既懂后台，又懂前端的人才会越来越受到企业的重视和拥抱，特别对于创业团队和互联网企业来说，一个拥有全局思维、熟悉各种技术的人才非常重要。身为技术人员，小程序样式库我们需要不断拥抱变化，不断get新技能，努力成为一个全栈工程师。
微信正式发布WeUI.js动态视觉组件库，这意味着，大家可以在小程序里面，直接使用在官方设计文档附录中的视觉组件（而不需要额外引入其小程序样式库他库）。微信团队真的是用心在打造小程序生态，笔者也是真的在用心给大家带来更多干货，这也是笔者第一时间给大家带来的解读。码字不易，如果本文对你和你身边的朋友有所启发，感谢转发，你的支持是我们码字员最大的动力。

小程序wxss如何引入css链接库

如果想让该样式库作为公共样式的话小程序样式库，可以在app.wxss文件中写入
@import "样式库路径";
如果只是作为某个页面的样式小程序样式库，可以在该页面的.wxss文件中写入
@import "样式库路径";

小程序开发（二）-页面样式

项目根目录下创建 app.wxss 文件，文件定义的样式规则适用于所有页面。采用css定义样式。

小程序官方推荐使用flex布局。pages/home目录下新建home.wxss文件，文件的样式只适用于当前页面。

rpx是小程序为适应不同宽度的手机而发明的长度单位，所有手机宽度都为750rpx。

weui是腾讯官方维护的UI框架，我们可以直接拿来用。
将weui库中dist目录下的app.wxss拷贝到我们项目中的 app.wxss 中，在wxml文件中直接使用定义好的规则, 如 weui-btn 。

图片使用 image 标签。默认宽度为屏幕宽度。

图片轮播使用 swiper 标签。

二、支付宝小程序前端样式的设计.acss样式详解

在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由 样式来决定的 。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。

那么在支付宝小程序中的.acss和微信小程序中的.wxcss没有什么两样。 上边已经说了.acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。

我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：

加入有一个160px宽度的红色矩形在这两种手机中的位置如下：

rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：

看下图：

在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的.acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。

当然仍旧支持内联样式和class属性制定样式类，如

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：

※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用；

※ 不能使用属性选择器，例如,以下写法不被支持：

我之前说过小程序开发的应用单元为页面。其实我们在.axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢?其实有一个固定的选择器。例如：

可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:

在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到test.acss在其中定义page的样式

下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiang.com 我在收到邮件后会回复。

微信小程序 wxss样式总结

mode 属性：
默认值：scaleToFill —- 不保持纵横比例缩放图片，使图片的宽高完全拉伸至填满image标签

aspectFit —- 保持纵横比例缩放图片，使图片的长边能够完全显示出来，也就说图片可以完整的显示出来

aspectFill —– 保持纵横比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取

top —- 不缩放图片，只显示图片的顶部区域

bottom —- 不缩放图片，只显示图片的底部区域

center —- 不缩放图片，只显示图片的中间区域

left —- 不缩放图片,只显示图片的左边区域

right —– 不缩放图片，只显示图片的右边区域

top left —- 不缩放图片,只显示图片的左上边区域

top right —- 不缩放图片,只显示图片的右上边区域

bottom left —- 不缩放图片,只显示图片的左下边区域

bottom right —- 不缩放图片,只显示图片的右下边区域

4.隐藏NavigationBar

5.VM11106:1 Do not have login handler in current page: pages/login/login. Please make sure that login handler has been defined in pages/login/login, or pages/login/login has been added into app.json
解决方案：

2.调整app.json中Pages里面的页面注册顺序 ；

3.检查wxml中bindtap是否在js里面将方法创建。

6.switch样式大小调整
大家都知道微信官方提供的switch 能改变color 但是改变大小 常用的width height 不起作用

但是可以这样修改

7.input 不沾满屏幕右侧有留白
使用flex布局的时候明明 input style 设置了flex＝1 的属性 可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡， 不知道是不是一个bug，
解决方案： 在input外面包一层view style设置flex＝1 用于沾满整个屏幕 input用于显示文字

————————————————

1.display取值

2.float(取值：left，right，none，inherit。)

3.clear：该属性指出不允许有浮动对象的边。（取值：left，right，both，none.）

4.visibility：是否显示对象(取值：visible，hidden，collapse。)

5.overflow：处理溢出内容的方式。(取值：visible，hidden，scroll，auto。)

其他属性： 关于小程序样式库和小程序css库的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序样式库的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序css库、小程序样式库的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。