微信小程序?qū)W習(xí)總結(jié)（二）樣式、屬性、模板操作分析
更新時間：2020年06月04日 10:45:54 作者：huangyuxin_
這篇文章主要介紹了微信小程序樣式、屬性、模板操作,結(jié)合實例形式分析了微信小程序尺寸單位、樣式、數(shù)據(jù)初始化、屬性、模板調(diào)用相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序樣式、屬性、模板操作。分享給大家供大家參考，具體如下：
小程序尺寸單位
rpx是小程序常見的尺寸單位，那么他和px有啥不同一樣呢。rpx可以根據(jù)屏幕寬度進行自適應(yīng)。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
小程序的樣式
你可以這么寫
內(nèi)聯(lián)方式：<text style='color:red'> hello world</text>
你也可以這么寫，直接在wxss中寫也闊以
小程序的全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器。
初始化數(shù)據(jù)
第一種方式
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
text:'hello world',
array:['啊哦','haha'],
}
頁面中渲染
<text style='color:red'>{{text}}</text>
<text>{{array[0]}}:{{array[1]}}</text>
效果
第二種方式
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var content = {test:
1,test1:2}
this.setData(content);
}
模板中調(diào)用
<text>{{test1}}</text>
控制屬性
默認(rèn)是false，所以不顯示，在js文件中來給result賦值
<text wx:if="{{result}}">哈哈哈</text>
算術(shù)運算
<view> {{a + b}}</view>
邏輯判斷
<view wx:if="{{length > 5}}"> </view>
字符串鏈接
<view>{{"hello" + 'world'}}</view>
遍歷
花括號和引號之間如果有空格，將最終被解析成為字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
綁定數(shù)據(jù)
content:[{
name:'haungyuxin',
age:18
},{
name:'zhangfei',
age:19
}]
<view wx:for="{{content}}">
{{item.name}}
</view>
默認(rèn)是這個樣子的，可以根據(jù)自己喜好，自己改吧
<view wx:for="{{content}}" wx:for-item='item'>
{{item.name}}
</view>
同樣的也可以看當(dāng)前的下標(biāo)
<view wx:for="{{content}}" wx:for-item='item' wx:for-index='key'>
{{item.name}}:{{key}}
</view>
希望本文所述對大家微信小程序設(shè)計有所幫助。
相關(guān)文章
利用js讀取動態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù)
這篇文章主要介紹了利用js讀取動態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù),需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細介紹了js密碼強度檢驗的實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
在使用Echarts開發(fā)項目時,經(jīng)常會遇到地圖組件的開發(fā),困擾許久的地圖重疊問題,本文就來解決一下這個問題,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了js實現(xiàn)的后臺左側(cè)管理菜單代碼,可實現(xiàn)美觀大氣的左側(cè)折疊菜單效果,涉及JavaScript基于鼠標(biāo)事件動態(tài)操作頁面元素樣式變換的技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
實現(xiàn)類似于百度或谷歌的搜索下拉列表的，就是打開百度往里輸入你要查詢的條件，只要你一輸入他就自動彈出一個下拉列表框，并顯示相關(guān)所有搜索內(nèi)容2009-07-07
這篇文章主要介紹了基于canvasJS在PHP中制作動態(tài)圖表,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
javascript簡單性能問題及學(xué)習(xí)筆記
最近在看一本書：《高性能javaScript》，發(fā)現(xiàn)自己平時寫js存在很多小細節(jié)上的問題，雖然這些問題不會導(dǎo)致程序運行出錯，但是會導(dǎo)致界面加載變慢，用戶體驗變差，那么我們就來細細數(shù)一下應(yīng)該注意的地方吧2014-02-02
JavaScript 監(jiān)聽textarea中按鍵事件
不同的瀏覽器中的事件監(jiān)聽機制是不同的，以onKeyPress事件為例。2009-10-10
預(yù)解析也叫預(yù)聲明，是提前解析聲明的意思，預(yù)解析是針對變量和函數(shù)來說的，本文將通過一些簡單的示例帶大家了解一下JS中預(yù)解析的具體使用，需要的可以參考一下2023-05-05
這篇文章主要為大家整理了7個JavaScript中Object的常用方法的使用，文中的示例代碼講解詳細，對我們掌握J(rèn)avaScript有一點的幫助，感興趣的可以了解一下2023-02-02