细说下微信小程序的 wxss 样式文件. 源码: https://github.com/limingios/wxProgram.git 中的 No.2
样式 rpx
原来在 html 里面都是使用 px 和 pt, 微信这边自定义的 rpx 的方式.
文档: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
- /* pages/index/index.wxss */
- .txt-test{
- margin-top: 800rpx;
- }
外部样式引入
新建一个跟现有的文件夹内的 wxss 名称不一样的, 一个文件名称, 然后 import 引入外部的 wxss, 就可以在 wxml 使用了. 通过 @import 的方式引入到本身要引入的 wxss 里面, 然后
- /* pages/index/out.wxss */
- .txt-left{
- margin-left: 100rpx;
- }
- /* pages/index/index.wxss */
- @import "out.wxss";
- .txt-test{
- margin-top: 800rpx;
- }
- //index.JS
- Page({
- data: {
- motto: '测试下数据绑定',
- testoutCSS: '测试外部 css 样式',
- userInfo: {},
- hasUserInfo: false,
- canIUse: wx.canIUse('button.open-type.getUserInfo')
- }
- })
- <!--index.wxml-->
- <view class="container">
- <text class="txt-test">{{motto}}</text>
- <text class="txt-left">{{testoutcss}}</text>
- </view>
样式关键字使用数据绑定的方式
样式里面也可以通过数据绑定的方式进行显示
- //index.JS
- Page({
- data: {
- motto: '测试下数据绑定',
- testoutcss: '测试外部 css 样式',
- color:"red",
- userInfo: {},
- hasUserInfo: false,
- canIUse: wx.canIUse('button.open-type.getUserInfo')
- }
- })
color 绑定的方式
- <!--index.wxml-->
- <view class="container">
- <text style="color:{{color}}">{{motto}}</text>
- <text class="txt-test">{{motto}}</text>
- <text class="txt-left">{{testoutcss}}</text>
- </view>
全局样式和局部样式名称相同的选择
全局样式和局部样式名称相同时, 按照局部的样式进行
定义全局 txt-right 进行演示
- /**App.wxss**/
- .container {
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- padding: 200rpx 0;
- box-sizing: border-box;
- }
- #txt-right{
- margin-right: 100rpx;
- color: yellow;
- }
定义局部 txt-right 进行演示
- /* pages/index/index.wxss */
- @import "out.wxss";
- .txt-test{
- margin-top: 800rpx;
- }
- #txt-right{
- margin-right: 300rpx;
- color: black;
- }
- <!--index.wxml-->
- <view class="container">
- <text id="txt-right">{{globalcss}}</text>
- <text style="color:{{color}}">{{motto}}</text>
- <text class="txt-test">{{motto}}</text>
- <text class="txt-left">{{testoutcss}}</text>
- </view>
PS: 样式这块比较依赖 HTML 中的 CSS, 明白如何引用, 关联关系, style 的方式自定义样式.
来源: http://www.bubuko.com/infodetail-2921134.html