[原创]微信小程序零碎知识整理

微信小程序涉及四种文件：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小知识

1. input与textarea
   <input>是一个单行输入框，有value属性，但是它不能自动换行
   <textarea>是一个多行输入框，没有value属性，但是它能自动换行

2. 在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小知识

1. splice() 方法用于插入、删除或替换数组的元素。该方法会改变原始数组
   用法

   array.splice(index,N,item1,…,itemX)

参数	描述
index	必须。表示从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字
N	必须。表示删除多少元素。必须是数字，可以是 0。若未规定此参数，则删除从 index 开始到原数组结尾的所有元素
item1, …, itemX	可选。表示要添加到数组的新元素

2. 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小知识

1. 相对像素
   为适配不同尺寸屏幕，小程序提出相对像素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;
}