[原創]微信小程式零碎知識整理
微信小程式涉及四種檔案:js\json\wxml\wxss
初次接觸這些,故而做個學習筆記,以便查閱(本文將持續更新,一些知識點來自網路,侵刪)
1. input 控制元件
<input class="new-quick" value="{{ todo }}" placeholder="快速新增..."
bindinput="inputTodo" bindconfirm="addTodo" auto-focus />
bindinput
和bindconfirm
都可以理解為槽函式slot,顧名思義,當input
控制元件捕獲到input
時(比如鍵鼠輸入),呼叫inputTodo
confirm
時(比如敲回車),呼叫addTodo
函式。class = “new-quick”
定義了該輸入控制元件的樣式,見相應的wxss
檔案(wxss以後專門寫一篇)
value = {{todo}}
,綁定了相應js
檔案的todo
資料,value
顯示的是輸入框的初始內容,placeholder
是輸入框為空時佔位符。比如當前是綁定了todo
,但啟動初始,todo
為空,因此,顯示的是 快速新增...
。可參見微信input API釋義
若改成下面的方式:
<input class="new-quick" value="1234" placeholder="快速新增..." bindinput="inputTodo" bindconfirm="addTodo" auto-focus />
則啟動後,input框預設輸入就是 1234
了
/***************************************************************************************************/
WXML小知識
-
input與textarea
<input>
是一個單行輸入框,有value屬性,但是它不能自動換行
<textarea>
是一個多行輸入框,沒有value屬性,但是它能自動換行 -
在wx:for迴圈中,預設遍歷項為item,遍歷索引為名index,如果包含多重for迴圈,應該通過
wx:for-item
<block>
<view class='container' wx:for="{{twoList}}" wx:key = 'id'>
<view>
<switch disabled='false' bindchange='switchChange'
data-data-index='{{item.id}}'></switch>{{index+1}}、{{item.name}}
</view>
<view wx:for="{{item.twodata}}" wx:for-item="abt" >
----{{abt.name}}---{{item.name}}
</view>
</view>
<button bindtap='clickedBTN'>新增選單</button>
</block>
line5與line8 {{item.name}} 都將呼叫同一個name,而line8{{abt.name}},將呼叫前套內的name
/***************************************************************************************************/
JavaScript小知識
-
splice() 方法用於插入、刪除或替換陣列的元素。該方法會改變原始陣列
用法array.splice(index,N,item1,…,itemX)
引數 | 描述 |
---|---|
index | 必須。表示從何處新增/刪除元素。該引數是開始插入和(或)刪除的陣列元素的下標,必須是數字 |
N | 必須。表示刪除多少元素。必須是數字,可以是 0。若未規定此引數,則刪除從 index 開始到原陣列結尾的所有元素 |
item1, …, itemX | 可選。表示要新增到陣列的新元素 |
- forEach與each、map函式辨析:
類似C++,forEach 在JavaScript中也用於遍歷陣列,其用法如下:
var arr = [1,2,3,4];
arr.forEach(alert);
等價於
var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
alert(array[k]);
}
forEach方法中的function回撥有三個引數:第一個引數是遍歷的陣列內容value,第二個引數是對應的陣列索引index,第三個引數是陣列本身array。因此,存在以下等式:array[index] = value
forEach一般用法:
[].forEach(function(value,index,array){
//index和array是可以預設的
//code something
});
each等價表達
$.each([],function(index,value,array){
//code something
})
示例:
var arr = [1,2,3,4];
var sum = 0;
arr.forEach(function(value,index,array){
sum+=value;
});
console.log(sum); //結果為 10
map與forEach類似,換作map可以這樣表達:
var arr = [1,2,3,4];
var sum = 0;
arr.map(function(value,index,array){
sum+=value;
});
console.log(sum); //結果為 10
/**********************************/
WXSS小知識
- 相對畫素
為適配不同尺寸螢幕,小程式提出相對畫素rpx的概念(原創性待考證哈),絕對畫素px就是實實在在佔用的畫素。rpx與px存在特定的換算關係,該關係由螢幕決定。
小程式統一將介面劃分為750rpx,我們只需關注相對畫素佈局即可。
比如 iPhone 6S下換算關係為1rpx = 2px
,
重點!!!任何時候,指定畫素大小的時候,數值後要緊跟rpx,不要加空格。否則會呈現出你不期待的佈局(我用的版本是V1.02.1809111,可能微信後續會修復這個問題)
正確寫法
.avatar image {
width: 200rpx;
height:200rpx;
border-radius:100rpx;
}
錯誤寫法
.avatar image {
width: 200 rpx;
height:200 rpx;
border-radius:100 rpx;
}