002微信小程序模板与配置

1.WXML 模版语法

1.1 数据绑定

• 数据绑定的基本原则

  • 在data中定义数据
  • 在WXML中使用的数据

• 在data中定义页面的数据

  • 在页面对应的.js文件中，把数据定义到data对象中即可

  Page({
    data: {
        //字符串类型的数据
        info: 'inti data',
        //数组类型的数据
        msgList: [{msg: 'hello'}, {msg: 'world'}]
    }
  })
  

• Mustache语法的格式

  • 把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可

  
  <view>{{要绑定的数据名称}}view>
  

• Mustache语法的应用场景

  • 绑定内容
  • 绑定属性
  • 运算（三元运算、算数运算等）

• 动态绑定内容

  Page({
    data: {
        //字符串类型的数据
        info: 'inti data'
      }
  })
  

  <view>{{ info }}view>
  

• 动态绑定属性

  Page({
    data: {
        imgSrc:'路径'
    }
  })
  

  <image src="{{imgSrc}}">image>
  

• 三元运算

  Page({
    data: {
        randomNumber: Math.random() * 10 //100以内的随机数
    }
  })
  

  <view>{{randomNumber >= 5 ? '随机数字大于或等于5' ： '随机数小于5'}}view>
  

• 算数运算

  Page({
    data: {
        randomNumber: Math.random().toFixed(2) //生成一个带两位小数的随机数
    }
  })
  

  <view>生成100以内的随机数：{{randomNumber * 100}}view>
  

1.2事件绑定

• 事件：渲染层到逻辑层的通讯方式。通过时间可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

• 小程序常用的事件

类型	绑定方式	事件描述
tap	bindtap或bind:tap	手指触摸后马上离开
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的区别

  • target 是触发该事件的源头组件，而currentTarget是当前事件所绑定的组件。

• bindtap语法格式

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

    按钮
    

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

    Page({
      binTapHandler(e){ //按钮的 tap 事件处理函数
          console.log(e) //事件参数对象 e
      }
    })
    

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

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

  Page({
      data:{
          count: 0
      },
      
      //修改 count 的值
      changeCount(){
          this.setData({
              count: this.data.count +1
          })
      }
  })
  

• 事件传参

  • 小程序不能在绑定事件的同时为事件处理函数传递参数

  • 而是使用 data-* 自定义属性传参， * 代表的是参数名字

    事件传参
    

  • 通过 event.target.dataset.参数名即可获取到具体参数值

    Page({
      binTapHandler(event){ //按钮的 tap 事件处理函数
          
          //dataset 是一个对象，包含 data-* 传递的参数项
          console.log(event.target.dataset) 
          
          //通过 dataset 可以访问到具体参数的值
          console.log(event.target.dataset.info) 
      }
    })
    

• bindinput的语法格式

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

    <input bindinput="inputHandler">input>
    

  • .js 文件中定义事件处理函数：

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

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

  • 定义数据

    Page({
        data:{
            msg: '你好'
        }
    })
    

  • 渲染结构

    <input value="{msg}" bindinput="iptHandler">input>
    

  • 美化样式:

    input{
        
        /*添加 1 像素宽、实线、颜色为#ee(浅灰色)的边框*/
        border: 1px solid #eee;
        
        /*输入框内部内容与边框之间的距离为 5 像素*/
        padding: 5px;
        
        /*输入框与其他元素之间的外部间距为 5 像素*/
        margin: 5px;
        
        /*输入框的边框添加圆角效果，半径为3像素*/
        border-radius: 3px;
    }
    

  • 绑定input事件处理函数

    //文本框内容改变的事件
    iptHandler(e){
        this.setData({
            //通过 e.detail.value 获取文本框的最新数值
            msg: e.detail.valu
        })
    }
    

1.3 条件渲染

• wx:if

  • 小程序中，使用 wx:if=“{condition}” 判断是否渲染该代码块

    <view wx:if="{{condition}}">Trueview>
    

  • wx:elif 和 wx:else 来天剑 else 判断：

    <view wx:if="{{condition}}">Trueview>
    <view wx:elif="{{condition}}">Trueview>
    <view wx:else="{{condition}}">Trueview>
    

• 结合使用 wx:if

  • 要一次性控制多个组件的展示与隐藏，可以使用一个 标签将多个组件包装起来，在 标签上使用 wx:if 控制属性

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

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

• hidden：在小程序中，直接使用 hidden=“{{condition}}” 也可以控制元素的显示与隐藏

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

• wx:if 与 hidden 的对比

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

1.4 列表渲染

• 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 的使用

  • 小程序在实现列表渲染时，为渲染出来的列表指定唯一的key值，从而提高渲染的效率

    //data数据
    data:{
    	userList:[
    		{id: 1, name: '小红'},
    		{id: 2, name: '小黄'},
    		{id: 3, name: '小白'}
    	]
    }
    

    //wxml 结构
    <view wx:for="{{userList}}" wx:key="id">{{item.name}}view>
    

2. WXSS 模版样式

​ WXSS（WeiXin StyleSheets）是一套样式语言，用于美化WXML的组件样式。

2.1 WXSS 和 CSS的关系

​ WXXSS具有CSS大部分特性（通用的选择器，通用的样式规则），同时还进行了扩充以及修

• rpx 尺寸单位
• @import样式导入

2.2 rpx

• rpx 尺寸单位
  • rpx（responsive pixel）：用来解决屏适配的尺寸单位
• rpx的实现
  • rpx把所有设备的屏幕，在宽度上等分为 750 份
• rpx 与 px 之间的单位换算
  • 在iPhone6上，屏幕宽度为 375px，共有 750个物理像素，等分为 750rpx
    • 750rpx = 375px = 750 物理像素
    • 1rpx = 0.5px = 1 物理像素

2.3 样式导入

​ 使用 WXSS提供的@import语法，可以导入外联的样式表

• @import的语法格式： @import后跟需要导入的外联式表的相对路径，用 ; 表示语句结束。

  @improt "路径";
  .middle-p{
      padding:15px;
  }
  

2.4 全局样式和局部样式

• 全局样式：定义在 app.wxss 中的样式为 全局样式，作用于每一个页面。

• 局部样式：在页面的 .wxss文件中定义的样式为 局部样式，只作用与当前页面

  • 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
  • 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

3. 全局配置

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

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

3.1 Window

• window 节点常用的配置项

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

• 导航栏的标题

  • 步骤：app.json => window => navigationBarTitleText

• 导航栏的背景色：

  • 步骤：app.json => window => navigationBarBackgroundColor

• 导航栏的标题颜色

  • 步骤：app.json => window => navigationBarTextStyle

• 全局开启下拉刷新功能：下拉刷新时移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重写加载页面数据的行为。

  • 步骤：app.json => window => enablePullDownRefresh 的值设置为 true

• 下拉刷新时窗口的背景色

  • 步骤：app.json => window => backgroundColor 指定 16进制的颜色值

• 下拉刷新时 loading 的样式：当全局开启下拉刷新功能之后，默认窗口的 loading样式为白色

  • 步骤：app.json => window => backgroundTextStyle 指定 dark 值

• 上拉触底的距离：是移动端的专有名词，通过手指在屏幕上的上啦滑动操作，从而加载更多数据的行为，默认距离为 50px

  • 步骤：app.json => window => onReachBottomDistance 设置新的数组

3.2 tabBar

​ tabBar是移动端应用常见的页面效果，用于使用多页面的快速切换。小程序通常将其分为：底部 tabBar 顶部 tabBar；tabBar只能配置最少 2 个、最多5个tab页签，当渲染顶部 tabBar是，不延时 icon，只显示文本

tabBar的6个组成部分：

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

tabBar 节点的配置项：

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar上边框的颜色，仅支持 black/white
color	HexColor	否		tab上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar的背景色
list	Array	是		tab页面的列表，最少2个，最多5个tab

tab项的配置选项：

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在pages中预先定义
text	String	是	tab上显示的文字
iconPath	String	否	未选中时的图标路径；当postion为top时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当postion为top时，不显示 Icon