微信小程式學習總結(二)
阿新 • • 發佈:2019-01-02
小程式尺寸單位
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>
控制屬性
<text wx:if="{{result}}">哈哈哈</text>
預設是false,所以不顯示,在js檔案中來給result賦值
算術運算
<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>
這個地方的item估計有些人不明白,我的理解是就像PHP用foreach遍歷二維陣列時候的$v。
預設是這個樣子的,可以根據自己喜好,自己改吧
<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>