微信小程序涉及四种文件: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;
}