微信小程式學習總結(二)樣式、屬性、模板操作分析
阿新 • • 發佈:2020-06-05
本文例項講述了微信小程式樣式、屬性、模板操作。分享給大家供大家參考,具體如下:
小程式尺寸單位
rpx是小程式常見的尺寸單位,那麼他和px有啥不同一樣呢。rpx可以根據螢幕寬度進行自適應。如在 iPhone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。
小程式的樣式
你可以這麼寫
內聯方式:<text style='color:red'> hello world</text>
你也可以這麼寫,直接在wxss中寫也闊以
小程式的全域性樣式與區域性樣式
定義在 app.wxss 中的樣式為全域性樣式,作用於每一個頁面。在 page 的 wxss 檔案中定義的樣式為區域性樣式,只作用在對應的頁面,並會覆蓋 app.wxss 中相同的選擇器。
初始化資料
第一種方式
/** * 頁面的初始資料 */ data: { text:'hello world',array:['啊哦','haha'],}
頁面中渲染
<text style='color:red'>{{text}}</text> <text>{{array[0]}}:{{array[1]}}</text>
效果
第二種方式
/** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var content = {test: 1,test1:2} this.setData(content); }
模板中呼叫
<text>{{test1}}</text>
控制屬性
預設是false,所以不顯示,在js檔案中來給result賦值
<text wx:if="{{result}}">哈哈哈</text>
算術運算
<view> {{a + b}}</view>
邏輯判斷
<view wx:if="{{length > 5}}"> </view>
字串連結
<view>{{"hello" + 'world'}}</view>
遍歷
花括號和引號之間如果有空格,將最終被解析成為字串
<view wx:for="{{[1,2,3]}} "> {{item}} </view>
繫結資料
content:[{ name:'haungyuxin',age:18 },{ name:'zhangfei',age:19 }]
<view wx:for="{{content}}"> {{item.name}} </view>
預設是這個樣子的,可以根據自己喜好,自己改吧
<view wx:for="{{content}}" wx:for-item='item'> {{item.name}} </view>
同樣的也可以看當前的下標
<view wx:for="{{content}}" wx:for-item='item' wx:for-index='key'> {{item.name}}:{{key}} </view>
希望本文所述對大家微信小程式設計有所幫助。