微信小程序学习笔记(持续更新中...)

1.WXML和HTML区别

①标签区别
html: div span img a
wxml: view text image navigator
② 属性节点不同
html:
wxml:

2.WXSS和CSS区别

①wxss新增了rpx尺寸单位(自动进行单位换算)
②wxss提供了全局样式和局部样式
全局app.wxss, 局部.wxss仅对当前页面生效
③wxss仅支持部分css 选择器
id选择器，类选择器，元素选择器，并集选择器，后代选择器，伪类选择器

3.常用组件

1. swiper

<swiper>
	<swiper-item>
		<image src=""></image>
	</swiper-item>
</swiper>

2.text和rich-text
text加selectable属性可长按选中
rich-text在后端返回一个html片段时可使用

<rich-text nodes="<h1 style=‘color:red;’>aaa</h1>"></rich-text>

3.image

<image src="" mode="scaleToFill"><image>

4.事件绑定

1.常用的事件

2.事件处理
通过this.setData(object) 给页面中data中的数据重新赋值
3.事件传参

<button bindtap="btnHandel" data-info="{{2}}"></button>

通过data-*传参 （eg:参数名info,参数值：2）
取参：event.target.dataset.info

<input bindinput="inputHandler"></input>

input取值：e.detail.value

文本框和data之间的数据同步

<input value="{{msg}}" bindinput="inputHandler"></input>
inputHandler(e){
    this.setData({
		msg: e.detail.value
	})
},

5.条件渲染

1.wx:if=“value” wx:elif=" " wx:else

6.自定义组件

①样式
stylesolation可选值

②数据
data和properties的区别
在小程序的组件中，properties属性和data数据的用法相同，它们都是可读可写的，只不过：data更倾向于存储组件的私有数据，properties更倾向于存储外界存储到组件中的数据。
③数据监听器

observes:{
	'value': function() {}
}

监听对象中所有属性的变化：
使用通配符**来监听对象上所有属性的变化, eg:

observes:{
	'obj.**': function(obj) {}
}

④自定义组件的声明周期