微信小程序學習總結（二）樣式、屬性、模板操作分析
更新時間：2020年06月04日 10:45:54 作者：huangyuxin_
這篇文章主要介紹了微信小程序樣式、屬性、模板操作,結合實例形式分析了微信小程序尺寸單位、樣式、數(shù)據(jù)初始化、屬性、模板調用相關操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序樣式、屬性、模板操作。分享給大家供大家參考，具體如下：
小程序尺寸單位
rpx是小程序常見的尺寸單位，那么他和px有啥不同一樣呢。rpx可以根據(jù)屏幕寬度進行自適應。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
小程序的樣式
你可以這么寫
內聯(lián)方式：<text style='color:red'> hello world</text>
你也可以這么寫，直接在wxss中寫也闊以
小程序的全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 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);
}
模板中調用
<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>
綁定數(shù)據(jù)
content:[{
name:'haungyuxin',
age:18
},{
name:'zhangfei',
age:19
}]
<view wx:for="{{content}}">
{{item.name}}
</view>
默認是這個樣子的，可以根據(jù)自己喜好，自己改吧
<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>
希望本文所述對大家微信小程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之按鈕組,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
getElementByID、createElement、appendChild幾個DHTML元素
WEB標準下可以通過getElementById(), getElementsByName(), and getElementsByTagName()訪問2008-06-06
這篇文章主要給大家介紹了關于微信小程序開發(fā)篇之踩坑記錄的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
JS字符串分割方法整理匯總示例講解（3種截取方法和6個輔助方法）
JavaScript在開發(fā)中常常會需要截取字符串，而JS提供了slice()?、substring()、substr()?3種方法實現(xiàn)截取操作。另外還有字符串相關的6種輔助方法：indexOf()、lastIndexOf()、split()、join()、concat()、charAt()?。2023-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS生成唯一id方式之UUID和NanoID，唯一id有了更好的方式，那就是NanoID，今天這篇文章記錄一下NanoID 正在取代 UUID？及js 生成uuid及NanoID的方法，下面來看文章的詳細介紹2021-12-12
requireJS模塊化實現(xiàn)返回頂部功能的方法詳解
這篇文章主要介紹了requireJS模塊化實現(xiàn)返回頂部功能的方法,結合實例形式詳細分析了requireJS的使用步驟及返回頂部功能的相關操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JavaScript禁止用戶多次提交的兩種方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
下面小編就為大家?guī)硪黄猨s 定義對象數(shù)組(結合)多維數(shù)組方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
下面小編就為大家?guī)硪黄褂胘s獲取地址欄參數(shù)的方法推薦(超級簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06