小程序的简介、配置、绑定以及渲染

小程序和普通网页区别

• 运行环境不同

  网页    远行在 浏览器环境上
  小程序  运行在   微信环境

• 开发模式不同

  网页的开发模式  浏览器+代码编辑器
  小程序有自己的一套标准的开发模式
    申请小程序账号
    安装小程序开发者工具
    创建和配置小程序项目

• API不同

  因为运行环境不同，小程序没有办法调用BOM和Dom的API
  小程序可以调用微信环境提供的各种API
  地理定位
  扫码
  支付

  一、全局配置

  全局配置文件及常用的配置项

  小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

  ① pages   记录当前小程序所有页面的存放路径 
  ② window   全局设置小程序窗口的外观 
  ③ tabBar   设置小程序底部的 tabBar 效果 
  ④ style   是否启用新版的组件样式

  window 节点常用的配置项

• navigationBarTitleText       String  字符串   导航栏标题文字内容
  navigationBarBackgroundColor  HexColor #000000 导航栏背景颜色，如 #000000
  navigationBarTextStyle    String   white    导航栏标题颜色，仅支持 black / white
  backgroundColor    HexColor   #ffffff    窗口的背景色
  backgroundTextStyle    String   dark   下拉     loading 的样式，仅支持 dark / light
  enablePullDownRefresh   Boolean    false   是否全局开启下拉刷新
  onReachBottomDistance   Number      50    页面上拉触底事件触发时距页面底部距离，单位为px

  全局开启

• 下拉刷新功能

  概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

  设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

  注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！

  设置下拉刷新时窗口的背景色

  当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为:

  app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef

  设置下拉刷新时 loading 的样式

  当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步

  骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值

  设置上拉触底的距离

  概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

  设置步骤： app.json -> window -> 为 onReachBottomDistance 设置新的数值

  注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。

  TabBar

  tabBar中只能配置最少 2 个、最多 5 个 tab 页签
  当渲染顶部 tabBar 时，不显示 icon，只显示文本

  tabbar6个组成部分

  ① backgroundColor：tabBar 的背景色
  ② selectedIconPath：选中时的图片路径
  ③ borderStyle：tabBar 上边框的颜色
  ④ iconPath：未选中时的图片路径
  ⑤ selectedColor：tab 上的文字选中时的颜色
  ⑥ color：tab 上文字的默认（未选中）颜色

  二、页面配置

• 页面配置文件的作用

  小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置

  页面配置和全局配置的关系

  小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。

  如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。

  注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

  三、绑定以及渲染

• 1.数据绑定

• ① 在 data 中定义数据

• Page({
    data: {
       info:"hello ",
       list:[{msg:"122"},{msg:'333'}]
    },
  })

  ② 在 WXML 中使用数据 Mustache 语法（双大括号）将

• <text>{{info}}</text>

 2.事件绑定

     小程序常用的事件

tap    bindtap 或 bind:tap          手指触摸后马上离开，类似于 HTML 中的 click 事件
input   bindinput 或 bind:input     文本框的输入事件
change  bindchange 或 bind:change   状态改变时触发

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event

type         String          事件类型
timeStamp    Integer    页面打开到触发事件所经过的毫秒数
target        Object          触发事件的组件的一些属性值集合
currentTarget Object    当前组件的一些属性值集合
detail      Object      额外的信息
touches     Array       触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches  Array    触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别

e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

bindtap 的语法格式

• 通过 bindtap，可以为组件绑定 tap 触摸事件

  <button type="primary" bindtap="btnHandler">按钮</button>

• 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收

  btnHandler(e){
      console.log(e)
  }

• 通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值

  Page({
    data: {
       count:1
    },
    btnHandler(e){
      console.log(e)
      this.setData({
        count:this.data.count+1
      })
    }
   }）

事件传参

• 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数

  <button type="primary" bindtap="btnHandler" data-info="{{123}}">按钮</button>
  ​
  info 会被解析为参数的名字
  数值 2 会被解析为参数的值

• 在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值

•  btnHandler(e){
      //  dataset是一个对象，包含了所有通过data-* 传递过来的参数项
      console.log(e.target.dataset)
      // 通过dataset可以访问到具体参数的值
      console.log(e.target.dataset.info)
    }

bindInput语法

在小程序中，通过 input 事件来响应文本框的输入事件

• 通过 bindinput，可以为文本框绑定输入事件

  <input type="text" bindinput="btnHandler"/>

• 在页面的 .js 文件中定义事件处理函数

  btnHandler(e){
      // e.detail.value  是变化过后，文本框最新的值
      console.log(e.detail.value)
  }

实现数据同步

4.条件渲染

wx:if

<!-- 在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块 -->
<view wx:if="{{condition}}">True</view>

wx:elif 和 wx:else

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

结合 block 使用 wx:if

block 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏

<view hidden="{{condition}}">条件为true隐藏，条件为false显示</view>

wx:if 与 hidden 的对比

① 运行方式不同
   wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
   hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
② 使用建议
   频繁切换时，建议使用 hidden
   控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

循环渲染

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构

当前循环项的索引用 index 表示；当前循环项用 item 表示

<view wx:for="{{array}}">
  索引是:{{index}} 当前项是{{item}}
</view>

手动指定索引和当前项的变量名

使用 wx:for-index 可以指定当前循环项的索引的变量名

使用 wx:for-item 可以指定当前项的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  索引是:{{idx}} 当前项是{{itemName}}
</view>

wx:key 的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，

从而提高渲染的效率，

<view wx:for="{{array}}" wx:key="{{item.id}}">
  索引是:{{index}} 当前项是{{item}}
</view>