微信小程序?qū)W習(xí)總結(jié)（二）樣式、屬性、模板操作分析
本文實(shí)例講述了微信小程序樣式、屬性、模板操作。分享給大家供大家參考，具體如下：
小程序尺寸單位
rpx是小程序常見的尺寸單位，那么他和px有啥不同一樣呢。rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
小程序的樣式
你可以這么寫
內(nèi)聯(lián)方式：<text style='color:red'> hello world</text>
你也可以這么寫，直接在wxss中寫也闊以
小程序的全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁面。在 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ù)運(yùn)算
<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)是這個(gè)樣子的，可以根據(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è)計(jì)有所幫助。
- 微信小程序?qū)W習(xí)總結(jié)（三）條件、模板、文件引用實(shí)例分析
- 微信小程序自定義導(dǎo)航欄（模板化）
- 微信小程序模板消息推送的兩種實(shí)現(xiàn)方式
- 微信小程序模板消息限制實(shí)現(xiàn)無限制主動(dòng)推送的示例代碼
- 微信小程序template模板與component組件的區(qū)別和使用詳解
- 微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
- 微信公眾平臺 發(fā)送模板消息(Java接口開發(fā))
- 微信小程序模板template簡單用法示例
- 微信小程序模板與設(shè)置WXML實(shí)例講解
相關(guān)文章
Bootstrap基本組件學(xué)習(xí)筆記之按鈕組(8)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之按鈕組,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
getElementByID、createElement、appendChild幾個(gè)DHTML元素
WEB標(biāo)準(zhǔn)下可以通過getElementById(), getElementsByName(), and getElementsByTagName()訪問2008-06-06
這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)篇之踩坑記錄的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JS字符串分割方法整理匯總示例講解（3種截取方法和6個(gè)輔助方法）
JavaScript在開發(fā)中常常會需要截取字符串，而JS提供了slice()?、substring()、substr()?3種方法實(shí)現(xiàn)截取操作。另外還有字符串相關(guān)的6種輔助方法：indexOf()、lastIndexOf()、split()、join()、concat()、charAt()?。2023-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS生成唯一id方式之UUID和NanoID，唯一id有了更好的方式，那就是NanoID，今天這篇文章記錄一下NanoID 正在取代 UUID？及js 生成uuid及NanoID的方法，下面來看文章的詳細(xì)介紹2021-12-12
requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法詳解
這篇文章主要介紹了requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了requireJS的使用步驟及返回頂部功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JavaScript禁止用戶多次提交的兩種方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
js 定義對象數(shù)組(結(jié)合)多維數(shù)組方法
下面小編就為大家?guī)硪黄猨s 定義對象數(shù)組(結(jié)合)多維數(shù)組方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
下面小編就為大家?guī)硪黄褂胘s獲取地址欄參數(shù)的方法推薦(超級簡單)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06