小程序开发第二天，配置文件与页面组件的基本用法

wxml模板语法

事件绑定

事件简介

要学事件绑定就要先明白什么是事件
事件就是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层所产生的行为反映到逻辑上来。
比如发生了点击，会触发js逻辑层上的某个函数。

事件对象

当触发一个事件时，会受到一个事件对象event，下面我们来简单介绍以下事件对象的详细属性

type

返回事件的类型

timeStamp

从页面加载完毕到触发事件经过的毫秒数（做小游戏的时候用）

target

触发事件的一系列属性值集合
触发该事件的源头组件也就是，当存在事件冒泡的时候，event.target属性拿到的是冒泡的源头组件。
源头组件就是点拿触发哪

currentTarget

当前组件的一些属性集合
拿到的是当前的组件，也就是事件冒泡最顶端的组件

detail

事件的额外信息

touches

Array类型，返回手指停留在屏幕触摸点的坐标数组

changedTouches

触摸事件，变化的触摸点数组

小程序常见事件

tap事件

绑定方式 bindtap 或 bind: tap
手指触摸后马上离开，类似于click事件

<view bindtap="viewTap">
  <button type="primary" bindtap="btnTap">tap</button>
</view>

我们新建了一个tap页面
给bindtap绑定一个函数，btnTap，之后再页面对应的js文件中写这个函数

注意：我们的自定义函数要写在data之后。

input事件

input事件是针对于文本框而来的，与其配套的是event对象里的detail.value属性，拿到最新的文本框内容。

文本框美化

传统文本框平平无奇难看的一批，下面我们用wxss来美化他。


加了阴影之后看起来就好多了。

文本框数据绑定

通过value + {{}}动态绑定语法，绑定data里的message赋初值

条件渲染

渲染，指的就是在页面上显示出这段代码对应的效果。
所谓条件渲染，就是在一定条件下，才加载这一段代码在小程序上

if渲染

在wx里我们用 wx:if = "{{condition}}"来判断是否渲染该代码块。既然有if那当然有elseif，并且与最近的if匹配，不过在小程序中elseif被简写为wx:elif = “{{condition}}”

这里的逻辑为前两个AB为一组，当A为true渲染时，B就不会执行渲染，所有结果为。

比如我们想一次性控制多个组建的展示和隐藏，我们就可以用一个block标签，把他们包起来，并用if来控制渲染。
注意：，组件就是一个包装用的，在页面中他不参与渲染。

hinden渲染

在小程序中用 wx:hidden=“{{condition}}”,当condition为true时隐藏他，不为true就显示它，hidden很好理解，我们着重要明白的是hindden和if的对比

首先两者运行模式不同
wx:if 是动态创建-移除元素的方式隐藏的，即condition为false时，直接不渲染这个组件。
而hidden是切换样式来隐藏的，即先渲染出来，再给他的display修改为none。

使用建议!
频繁切换使用hidden，因为if需要频繁创建和移除元素，效率低下。
而如果控制条件比较复杂的话，就用if来切换。

列表渲染

利用wx:for 可根据指定数组，渲染重复的组件结构


这里是渲染文本的基本用法，当然，只要是重复东西都可以用for循环渲染。
在渲染中，我们可以给他赋上key值，以提高渲染效率

可以嵌套解决轮播图的问题

事件处理函数中为data里的数据赋值

与vue模板语法中的双向绑定修改不同，小程序里将修改data里的属性进行了进一步的封装，当我们想要修改data里的数据时，需要调用setData()方法来实现间接调用。

我们写了一个按钮，和一个双向绑定的count值。

在data里给count赋初值。要实现点击change按钮，使得count的值加一。
这个setData()方法的参数以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

总结：小程序里修改data里的值需要调用setData方法，以key:value的形式将value赋给key，其中key自带data路径，而value如果需要访问data里的属性，则需要手动寻找路径

事件传参

在vue语法中，我们是可以给一个方法赋调用时的参数的，即

这串代码是可以正常运行的。
而在小程序中 ""里放的就是函数的名字，而btnTap(123)在小程序编译器看来，不是有一个btnTap()函数，里面的参数是123，而是直接有一个btnTap(123)()函数。那么我们想让调用的时候传参怎么办？
微信给我们提供了data-x的传参方式,其中x是形参的名字。上述代码在微信中转化为相同意义的代码为：

a被解析为函数的函数，123被解析为123的值。
在事件处理函数中，我们可以用event.target.dataset.a来访问到a的值。

点击按钮后会打印出a的值123

注意：{{123}}表示这个123是数字，如果是123，则表示是一个字符串。{{}}是mathType语法。

wxss 模板样式

wxss是对css的基本扩展，主要对rpx与import样式导入进行了完善。

rpx

rpx是wxss提出的像素
它的原理非常简单，鉴于目前屏幕大小不同，rpx将整个屏幕在宽度上分为750份，即总宽度为750rpx.
这样子大屏幕rpx就大，小屏幕rpx就小，以此来实现不同设备的适配。
rpx与px的单位换算：
比如一台设备，屏幕宽度为375px，等分750份，因此1rpx = 375÷750 = 0.5px。
因此一个rpx等于0.5px在这个设备上
官方建议：开发小程序时，以iphone6为视觉稿标准。（因为1比0.5好计算）

import 导入

我们往往把通用的wxss放到common文件夹中，然后通过@import 导入外面样式到本页面的wxss文件中

全局样式和局部样式

定义在app.wxss里的样式被称为全局样式
定义在自己page里的wxss里的样式被称为局部样式
如果全局样式和局部样式出现重叠，则会自动取局部样式
注意，当权重相同时就近原则，局部大于等于权重。而如果全局的权重更大，则不会覆盖。

这里的 selector 就是样式的权重

全局配置

在小程序的app.json文件里，存放的就是小程序的全局配置，他有以下几个项目

{
  "pages": [
    "pages/register/register", 
    "pages/shop/shop",
    "pages/login/login",
    "pages/index/index",
    "pages/logs/logs"
   
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

我们逐一介绍这些项

pages

说明这个小程序有几个页面
注意：

1. pages下的第一个页面是小程序默认的主页面
2. 可以直接在pages下加元素来创建新页面

window

全局设置小程序窗口外观

在window节点中，我们通过window节点来配置导航栏区域和背景区域的有关样式，下面我们来逐一讲一讲window节点里的各种配置

navigationBar 配置

1. navigationBarTitleText 用于改变标题
   修改成功！
2. navigationBarBagckgroundColor 修改导航栏背景色
   
   注意：导航栏背景色只能用#fff这种16进制颜色
3. navigationBarTextStyle 修改标题颜色
   
   注意，小程序标题颜色只能有黑色或者白色

下拉刷新

开启下拉刷新

开启下拉刷新：将window里的enablePullDownRefresh 的值改为true，为全局所有页面都开启下拉刷新效果。

修改下拉刷新的背景色

backgroundcolor：

下拉loading样式

只有两个可选值，要么是light，要么是dark

上拉触底

上拉触底是移动端专用名词，指的是随着手指向上滑动，下一页开始加载。
而手指上滑到多少开始加载数据，是我们上拉触底要修改的东西
在微信中，默认滑动条距离下端不足50px时，开始加载下面的。

当进度条不足60像素时，开始加载下一个，但在实际开发中，除非一些特殊需求，否则不修改这一项。

tabbar

tabber相当于网页的nav或者footer，用于实现多页面的快速切换。因此tabber又分为顶部tabber和底部tabber。
tabber是和window节点同级的，但在默认情况下不会显示，我们需要手动来写tabber。

tabber的6个组成部分

tabbar里 list

list里放的就是tabbar里的元素数目，list本质上是一个数组，数组里存着各个对象，用于描述tabbar的每个小模块
注意：tabbar里的元素至少为2，至多为5

下面我们来详细介绍以下list里的对象的属性。

1. text属性，描述跳转页名字
2. pagePath，描述跳转到哪个页面
3. incoPath，未选中时展示的图标
4. selectedIconPath，选中时展示的图标
   

tabbar样式修改

backgroundColor

修改tabbar的背景颜色，用16进制表示

borderStyle

修改边框的颜色，只有white和black两个属性

color

修改未被选中时的颜色。

selectedColor

修改被选中时的颜色

position

设置是顶部tabbar还是底部tabbar

注意在top状态下，只会显示text文本，不会显示icon图片

设置底部的tabbar效果

style

设置是否使用最新的样式

页面配置文件

前面我们讲过，全局配置文件相当于传统开发的struct，是规定全局的配置，但我们往往也需求某一页面具有自身的特点，和前面讲过的wxss一样，我们就可以在对应页面的配置文件修改。
注意：当页面配置与全局配置重叠时，就近原则以页面配置为准
下面我们来介绍一下页面配置的常用配置项

navigationBarBackgroundColor

修改导航栏的背景色

navigationBarTextStyle

导航栏的标题颜色，只有white和black两种

navigationBarTitleText

当前页面导航栏标题文字内容

backgroundColor

页面窗口背景色，也就是下拉的背景色

backgroundTextStyle

下拉的loading样式
有light和dark之分

enablePullDownRefresh

是否开启下拉刷新

onReachBottomDistance

触发时间刷新的距离
可以发现，页面自己的配置属性和总体配置属性是相同的

数据请求

小程序中网络数据请求的限制

出于安全限制，小程序官方对接口请求有如下要求

1. 只能请求https接口
2. 必须将接口域名添加到信任页表中
   
   在request合法域名中进行设置。
   比如我想申请访问baidu的接口，需要在这里设置接口道信任列表里。

配置request合法域名

需求提出：
假设在自己的小程序中，希望请求https://www.excook.cn域名下的所有接口，以下是具体操作步骤。

1. 登录微信小程序管理后台
2. 开发
3. 开发设置
4. 服务器域名
5. 修改request合法域名
   
   下拉到这里，点击开始配置
   
   身份验证扫码后进入如下页面！
   
   
   填写无误后点击提交
   再回到本地页面编译器
   
   项目配置中果然多了这个

发起请求

调用wx.request()方法，可以发送get数据请求。
注意，request()方法的参数是一个对象，下面我们来着重介绍以下这个对象的属性

url属性

表示我要向哪里发送数据

method

用于表明这个请求是什么类型的

data属性

是一个对象，用于表明发送的数据

success属性

这个属性是一个回调函数，参数是res。表示数据处理完成，所执行的函数。

总体代码

getInfo(){
    wx.request({
      url:'https://www.escook.cn/api/get',
      method:"GET",
      data: {
        name:"zimin",
        age: 13
      },
      success: (res)=>{
        console.log(res);
      }
    })
  },

页面刚加载时请求初始化数据

我们可以在页面的onload事件中，添加get或post请求

或者将不同的request封装成函数，直接在onload里调用函数。

跳过request验证

正常情况下，只能用https接口，但如果我们真的想用http接口的话，可以在开发者工具中修改

跨域与Ajax

跨域为题只存在于web浏览器开发中，小程序中不存在跨域
由于Ajax技术核心依赖于XMLHtppRequest对象，由于小程序宿主环境是微信客户端，所以发起Ajax请求在小程序中叫做申请，发起网络数据请求

综合案例，request请求搭建开发主页