細說下微信小程序的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的方式自定義樣式。