「小程式JAVA實戰」 小程式wxss樣式檔案的使用（七）

IT人故事會發表於2019-07-18
Java
>>原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！
>>原文連結地址：「小程式JAVA實戰」 小程式wxss樣式檔案的使用（七）


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


相關文章