微信小程序js绑定 第1篇
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。与html类似，相当于用户与小程序的交互。
当事件回调触发的时候，会收到一个事件对象event(与js中的事件对象类似)，它的详细属性如下表所示:
返回的是触发该事件的源头组件，而currentTarget则返回的是当前事件所绑定的源头组件。
给view绑定了单击事件，在该事件下有一个按钮组件，当我们单击按钮时，返回的就是这个按钮组件。而返回的就是view这个绑定事件的源头组件。因此，常用到的是target属性而非currentTarget属性。
微信小程序js绑定 第2篇
通过条件渲染，从而实现按需渲染。
如果我们需要一次渲染多个组件的展示于隐藏，就可以使用到标签了，他将所有需要条件渲染的组价包裹起来，然后，我们直接在 标签上使用 wx:if 进行控制。
在小程序中，直接使用 hidden=“{{}}” 也能直接控制元素的显示于隐藏（通过 true 或 false）
代码示例：
① 执行原理不同：
应用场景：和 vue一样，频繁切换使用 hidden，需要条件渲染的时候使用wx：if。
总结： hidden就是在控制结构样式，而wx：if控制的是创建结构或者移除结构。
渲染数组列表的时候，我们可以直接使用 wx:for实现，和vue中的v-for一样哦！
data数据代码：
需要注意的是，wx:key 不需要使用 {{}}
wxss 是一套样式语言，用于美化 wxml 的组件样式，类似于网页开发中的 css。
wxss 具有 css 大部分的特性，同时，wxss 还对 css 进行了扩充和修改，以适应微信小程序的开发。
与 css 相比，wxss 拓展的特性有：
这两个css中不能使用，同样的rem小程序中也不能使用。
原理:
rpx: 鉴于不同的设备大小不同，为了实现自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即当前屏幕的总宽度为750rpx）
小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
单位换算：官方定义使用iphone6上，1px = rpx 因为 屏幕会被分为 750rpx 而 苹果6 正好 375px。
官方建议：开发微信小程序，设计可以使用iPhone6 作为视觉稿的标准。
例如：宽度 100px， 高度20px。使用rpx就是， 200rpx ， 40rpx。
语法格式
@import 后跟需要导入的外联样式的相对路径，用 ; 表示语句结束。如下所示：
顾名思义：全局所用于全部页面，局部只限于当前页面。
① 中则就会作用到全局。
② 页面.wxss 文件中定义的样式为局部样式，只作用于当前页面。
注意点：
小程序根目录下的文件是小程序的全局配置文件，常用的配置如下：
配置文件，所管理的全局的文件有:
① pages
② window
③ tabBar
④ style
步骤： → window → navigationBarText
步骤： → window → navigationBarBackgroundColor
以十六进制色为要求哦！
需要注意的是，局部和全局配置文件的冲突哦！
步骤： → window → navigationBarTextStyle
需要注意的是，标题颜色可选值 只有 black and white.
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而实现重新加载页面数据的行为。
步骤： → window → 把 enablePullDownRefresh 设置为 true就开启了， false 则是不开启。
true 开启， false 关闭
注意：这里在实际开发中，并不是所有的页面需要开启下拉加载效果，所以这里建议配置在局部页面配置文件中。
默认的背景色是白色，如果想要自定义颜色的话
步骤： → window → 为backgroundColor 指定十六进制 的颜色值
步骤： → window → 为 backgroundTextStyle 指定 dark值(灰色)
默认值就是light 白色，这里设置为dark 灰色。
注意这里就只能设置这两种颜色（效果图就是上面的图片）
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而实现加载更多的数据行为。
步骤： → window → 为 onReschBottomDistance 设置新的值 （默认值为：50px） 单位默认省略哦！
实际开发不建议修改，使用默认之即可，特殊需求除外。
tabBar 是移动端常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
注意点：
实现方式：
1、先配置页面路径
2、全局配置文件中，与pages 和 window同级别创建一个 tabBar配置对象
注意点：只要是 tabBar的页面路径，必须在前面，否则报错！
效果图如下：
小程序中， 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要 拥有特殊的窗口表现，此时，页面级别的 .json配置文件，就可以实现这种需求了。
注意：当页面配置与全局配置 冲突时，根据就近原则，最终的效果以页面配置为准。
如上：我想要将消息页面的导航背景改为红色：
在局部配置文件中：
就近原则，直接覆盖掉全局配置的样式。
局部配置文件配置页面：
配置中
出于 安全 和 性能 方面的考虑，小程序官方对 数据接口请求 有一些要求：
两点限制：
假设在自己的微信小程序中，希望请求域名下的接口
此时就得配置域名接口：
配置步骤： 登录微信小程序管理后台 → 开发 → 开发设置 → 服务器域名 → 修改 request 合法域名
注意：一个月只能修改 5 次。且只支持https。
调用微信小程序提供过的 ()方法，可以发起 GET 数据请求，如下所示：
调用微信小程序提供的 () 方法，可以发起 POST 数据请求，示例代码如下：
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时我们需要在页面的 onLoad 事件中调用获取数据的函数。
代码示例：
当后端只提供了http协议接口的时候，我们开发又不能停止，所以，为了解决这个问题，我们得临时开启不校验开发环境域名请求
实现跳过 request 合法域名校验
跨域问题只存在于浏览器的Web开发中，由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序不存在跨域问题。
Ajax技术核心也是依赖于浏览器的，由于小程序的宿主环境是微信客户端，所以小程序中不能叫 发起Ajax请求，而是叫做发起网络数据请求
实现步骤：
结构代码：
样式代码：
① 能够使用 wxml 模板语法渲染页面结构
② 能够使用 wxss 样式美化页面结构
③ 能够使用 对小程序进行全局配置
④ 能够使用 对小程序页面进行个性化配置
⑤ 能够知道如何 发起网络数据请求
微信小程序js绑定 第3篇
通过bindinput，可以为文本框绑定输入事件
在页面js文件中定义事件处理函数。通过来获取文本框中的内容。
实现步骤:
定义数据
在页面js文件中定义文本数据
渲染结构
设置value默认值。
美化样式
将文本框美化一下
绑定input 事件处理函数
输入文本，此时data中的text也随之改变。
到这里本节内容就结束啦，下期带大家了解微信小程序中的条件渲染和列表渲染。