微信小程序学习第2天——模板语法与样式，全局配置与页面配置

一、WXML模板语法

1、数据绑定

数据绑定的原则：①在data中定义数据 ②在WXML中使用数据

// .js文件中data中定义数据
Page({
  data: {
    message:'Hello',
  },
})

// .WXML文件夹中使用数据
<view>{{message}} </view>

Mustache语法（双大括号）应用场景：绑定内容、绑定属性、运算
注意：绑定属性不需要加冒号：eg

<images src="{{imgSrc}}"></images>

2、事件绑定

常用的事件

类型	绑定方法	事件描述
tap	bindtap或bind:tap	类似于click事件，手指触摸后马上离开
input	bindinput或bind:input	文本框输入事件
change	bindchange或bind:change	状态改变时触发

当事件回调触发时，会收到一个事件对象event，它包括以下属性

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

《1》target和currentTarget的区别
target是触发该事件的源头组件，而currentTarget是当前事件所绑定的组件。（用冒泡来理解）

《2》调用this.setData(dataObject) 方法可以给页面data中的数据重新赋值

// .WXML文件
<button bindtap="btn">按钮</button>
<text>数值为：{{count}}</text>

// .JS文件
pages({
 data:{
 	count:0
 }
 btn(event){
    this.setData({
    	count:this.data.count + 1
    })
  },
})

《3》使用data-*自定义属性传参
小程序不能在绑定事件的同时为事件处理函数传递参数，需要使用组件提供的data-*自定义属性传参，其中*表示参数的名字

<button bindtap="btn" data-num="{{2}}">按钮</button>

num会被解析为参数的名字，数值2会被解析为参数的值

《4》通过event.target.dataset.参数名即可获取具体参数的值

btn(event){
  console.log(event.target.dataset.num)
},

《5》通过event.detail.value获取input框的最新值

// .WXML
<input type="text" bindinput="ipt"/>

// .js
ipt(e){
  console.log(e.detail.value)
},

《6》案例总结
实现文本框与data之间的数据同步

// .WXML文件
<button bindtap="btn">点击按钮数字+1</button>
<text>数值为：{{num}}</text>
<input type="text" bindinput="ipt" value="{{num}}"/>

// .js文件
Page({
  data: {
    num:0
  },
  btn(){
    this.setData({
      num:this.data.num+1
    })
  },
  ipt(e){
    console.log(e.detail.value)
    this.setData({
      num:e.detail.value
    })
  },
})

3、条件渲染

使用wx:if="{{condition}}"来判断是否渲染代码，用wx:elif和wx:else来添加else判断

// .WXML
<view wx:if="{{sex=='男'}}">男</view>
<view wx:elif="{{sex=='女'}}">女</view>
<view wx:else>保密</view>

//  .js文件
data: {
 sex:'男'
},

// 运行结果：页面显示男

《1》< blcok>< /block>标签
如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在
< block> 标签上使用 wx:if 控制属性。
注意： < block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
《2》hidden控制显示与隐藏
也可使用hidden="{{ condition }}" 也能控制元素的显示与隐藏

<view hidden="{{true}}">
  也可使用hidden来显示与隐藏.值为true为隐藏
</view>

《3》wx:if 与 hidden 的对比
wx:if为动态创建和移除元素，hidden以切换样式的方式显示与隐藏元素
频繁切换使用hidden，控制条件复杂时使用wx:if搭配wx:elif和wx:else进行展示与隐藏

4、列表渲染

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，索引用 index 表示；当前循环项用 item 表示

// .WXML文件
<view wx:for="{{array}}">
  索引号为{{index}}，值为{{item}}
</view>

//  .js文件
data: {
   array:['憨瓜','波妞','德文']
 },

《1》使用wx:key为列表项指定唯一的key值，从而提高渲染的效率
id不用加mustache语法

<view wx:for="{{array}}" wx:key="id">
  索引号为{{index}}，值为{{item}}
</view>

二、WXSS模板样式

1、rpx

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
《1》实现原理
rpx把所有设备的屏幕，在宽度上等分为750份，小程序在不同的设备上运行时，会自动把rpx单位的样式换算成对应的像素单位来渲染，从而实现屏幕的适配
eg：在iPhone6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx，则750rpx = 375px = 750物理像素
在开发小程序中，建议使用iPhone6作为视觉稿的标准

2、@import语法导入样式

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

@import "common.wxss";

3、全局和局部样式

定义在 app.wxss 中的样式为全局样式，在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

三、全局配置

1、全局配置文件及常用配置项

根目录下的app.json文件是全局配置文件
常见的全局配置项

{
// pages ：记录当前小程序所有页面的存放路径
  "pages":[
    "pages/index/index",
    "pages/list/list",
  ],
// window：全局设置小程序窗口的外观
  "window":{
    "navigationBarTitleText": "背心", 
  },
// tabBar：设置小程序底部的tabBar效果
  "tabBar": {
  	"position": "bottom", 
    "borderStyle": "black", 
    "color": "#000000", 
    "selectedColor":"#ccc", 
    "backgroundColor": "#fff", 
    "list": [...]
  },
// style：是否使用新版的组件样式
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2、window

window常用的配置项

// window：全局设置小程序窗口的外观
"window":{
  "backgroundTextStyle":"light", // 下拉loading样式，仅支持dark/light
  "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
  "navigationBarTitleText": "背心", // 导航栏标题文字内容
  "navigationBarTextStyle":"black", // 导航栏标题颜色，仅支持black / white
  "backgroundColor":"#FFFFFF", // 窗口的背景色
  "enablePullDownRefresh": true, // 是否全局开启下拉刷新
  "onReachBottomDistance":"50" // 页面上拉触底事件触发时距页面底部距离，单位为px
},

注意：设置上拉触底的距离，默认距离为50px，如果没有特殊需求，建议使用默认值即可

3、tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面 的快速切换。

// tabBar：设置小程序底部的tabBar效果
 "tabBar": {
  	"position": "bottom", // tabBar的位置，仅支持bottom/top
    "borderStyle": "black", // tabBar 上边框的颜色，仅支持 black/white
    "color": "#000000", // tab 上文字的默认（未选中）颜色
    "selectedColor":"#ccc", // tab 上的文字选中时的颜色
    "backgroundColor": "#fff", // tabBar 的背景色
    
    "list": [{ // tab 页签的列表，最少2个、最多个 tab
      "pagePath": "pages/home/home", // 页面路径，页面必须在pages中预先定义
      "text": "主页", // tab显示的文字
      "iconPath": "images/tabs/home.png",// 未选中时的图片路径
      "selectedIconPath": "images/tabs/home-active.png"  // 选中时的图片路径
    },{......},{ ......}
    ]
  },

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

四、页面配置

每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置
当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准
页面配置中常用的配置项与全局window配置项一样