小程序开发细节学习记录<一>

1、console.dir()

将一个对象以树状形式打印到控制台。

image.png

2、事件冒泡：

点击蓝色view事件触发如下：

image.png

阻止冒泡：

<view style="width: 200px; height: 200px; background-color: red" bindtap="outterHandle"> 
  <view style="width: 100px; height: 100px; background-color: blue" catchtap="innerHandle"></view>
</view>

3、给事件指定参数：dataSet

<button bindtap="handle" data-name="思思">思思</button>

handle: function(e) {
    console.log(e.target.dataset)
}

打印结果是：{name: "思思"}

4、block标签

block标签只是控制属性的载体，页面渲染过程中没有实际意义。

5、小程序wx:if和hidden的区别：

hidden元素存在页面结构，只是display的显示是none而已。
wx:if 是惰性的。条件为false是不渲染，不工作。

6、小程序的尺寸单位：

rpx 在不同的设备之间用相同的代码适配。

7、页面布局多用flex布局要注意设置page的css高度样式，否则flex设置比例不起作用。

8、wx.navigateBack()

默认返回上一页。

 backHandle: function() {
    wx.navigateBack()
  },

backHandle: function() {
    // wx.navigateBack()
    wx.navigateBack({
      delta: 2, // 返回指定层数 无限大的值是返回到首页
    })
  },

9、input输入文字回车响应处理：

<input type="text" placeholder="请输入" bindconfirm="confirmHandle"/>

// input回车响应
confirmHandle: function(e) {
console.log(e)
},