微信小程序学习笔记（第二天）

一、wxml模板语法
    1.数据绑定的基本原则
        在data中定义数据 （在对应的js文件中，把数据定义到data对象中即可）
        在wxml中使用数据 （Mustache语法 {{}}）
    2.Mustache语法的应用场景
        绑定内容
        绑定属性
        运算（三元运算、算术运算等）
    3.事件绑定
        事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理
      小程序中常用的事件
         类型                绑定方式                事件描述
         tap              bindtap或bind:tap         手指触摸后马上离开，类似于click
         input            bindinput或bind:input     文本框的输入事件
         change           bindchange或bind:change   状态改变时触发
   4.事件对象的属性列表
       当时间回调触发的时候，会收到一个事件对象event
   5.target和currentTarget区别
       target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件
   6.bindtap的语法格式
       <button type="primary" bindtap="btnTapHandler">按钮</button>
   7.在事件处理函数中为data中的数据赋值
       通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值。
   8.事件传参
      小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数，因为小程序会把bindtap的属性值，统一当做事件名称来处理。
      可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，比如：
         <button bindtap="bindHandler" data-info="{{2}}"></button>  info会被解析成参数的名字  2会被解析成参数的值
      在事件处理函数中，通过event.target.dataset.参数名 即可获取到具体参数的值
   9.bindinput的语法格式
       <input bindinput="inputHandler"></input>
      在页面的js文件中定义事件处理函数
        e.detail.value 是变化过后，文本框最新的值
   10.实现文本框和data之间的数据同步
       实现步骤：
          定义数据
          渲染结构
          美化样式
          绑定input事件处理函数
  二、条件渲染 wx:if
     1.在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块
     也可以用wx:elif和wx:else来添加else判断   
     2.如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，实例如下：
     <block wx:if="{{true}}">
      <view>1</view>
      <view>2</view>
    </block>
    3.在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏  <view hidden="{{flag}}">1</view>
    4.wx:if与hidden的对比
       wx:if以动态创建和移除元素的方式，控制元素的显示与隐藏
       hidden以切换样式的方式（display：none/block）  适用于频繁切换
 三、列表渲染
   1.wx:for可以根据指定的数组，循环渲染重复的组件结构，语法实例如下
       <view wx:for="{{array}}">
         索引是:{{index}}  当前项是:{{item}}
       </view>
   2.wx:key  指定唯一的key值
四、wxss
   wxss具有大部分css特性，同时，还对css进行了扩充以及修改，以适应小程序的开发，与css相比，wxss扩展的特性有：
      rpx尺寸单位    @import样式导入
   1.什么是rpx尺寸单位
     rpx是小程序独有的，用来解决屏幕适配的尺寸单位。
   2.rpx实现原理：rpx把所有的设备的屏幕在宽度上等分为750份
   3.rpx与px的单位换算
     1rpx=0.5px
   4.什么是样式导入
       使用wxss提供的@import语法，可以导入外联的样式表
   5.@import语法格式
      @import后需要跟导入的外联样式表的相对路径，用；表示语句结束
   6.全局样式
      定义在app.wxss中的样式为全局样式，会应用在每一个页面
   7.局部样式
      在页面的wxss文件中定义的样式为局部样式，只作用于当前页面
        局部样式和全局样式冲突时，根据就近原则，局部会覆盖全局
        当局部样式的权重大于或等于全局样式时，才能覆盖全局的样式
五、全局配置
   小程序根目录下的app.json问件事小程序的全局配置文件，常用的配置项如下：
      pages:记录小程序所有的页面的存放路径
      window：全局设置小程序窗口的外观
      tabBar：设置小程序的底部的tabBar效果
      style：是否启用新版的组件样式
   1.window节点常用的配置项
      navigatioBarTitleText    导航栏标题文字内容
      navigatioBarBackgroundColor    导航栏背景颜色
      navigatioBarTextStyle    导航栏标题颜色 仅支持black  white
      backgroundColor          窗口的背景色
      backgroundTextStyle      下拉loading的样式，仅支持dark light
      enablePullDownRefresh     是否全局开启下拉刷新
      onReachButtonDistance     页面上拉触底事件触发时具页面底部距离，单位为px
   2.tabBar：是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序通常将其分为：
         底部tabBar   顶部tabBar（不显示图标，只显示文本）
         最少两个  最多五个
      tabBar的6个组成部分
          background：tabBar的背景色
          selectedIconPath:选中时的图片路径
          borderStyle：tabBar上边框的颜色
          iconPath：未选中时的图片路径
          color:未选中时的文字颜色
      tabBar节点的配置项
        position         tabBar的位置，仅支持bottom top
        borderStyle      tabBar上边框的颜色，仅支持black  white
        color             tab上的文字的默认颜色
        selectedColor     tab上的文字选中时的颜色
        backgroundColor   tabBar的背景色
        list              tab页签的列表，最少两个，最多五个
      每个tab项的配置项
         pagePath      页面路径，页面必须在pages中预先定义
         text          tab上显示的文字
         iconPath      未选中时的图标路径
         selectedIconPath   选中时的图标路径

          "tabBar": {
               "list":[
                  {
                  "pagePath": "pages/index/index",
                  "text": "index"
                  },
                  {
                  "pagePath": "pages/logs/logs",
                  "text": "logs"
                  }
               ]
            },
   六、网络数据请求
      1.小程序中网络数据请求的限制
         出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下的两个限制：
            只能请求https类型的接口
            必须将接口的域名加到信任列表中
      2.配置request合法域名
         登录微信小程序后台-》开发-》开发设置-》服务器域名-》修改request合法域名
      3.发起get请求
         调用微信小程序提供的wx.request()方法，可以发起get数据请求
           wx.request({
              url:"",
              method:"GET",
              data:{
                 name:"zs",
                 age:20
              },
              success:(res)=>{
                 console.log("res)
              }
           })
     4.发起post请求只需把method：“get”改成“post”
     5.在页面刚加载的时候请求数据
        onload()
     6.跳过合法域名校验
         如果后端程序员仅仅提供了http协议的接口，暂时没有提供https的接口，可以在微信开发者工具中，临时开启【开发环境不校验请求域名、tls版本及https证书】选项
     7.关于跨域和Ajax的说明
        跨域问题只存在于浏览器的web开发，小程序不存在跨域
        Ajax技术核心依赖于浏览器中的xmlhttprequest对象，由于小程序的宿主环境是微信客户端，所以叫做“发起网络请求”而不能叫“发起Ajax请求”