微信小程序基础2—开发框架

开发框架：

• wxml 描述页面内容 （weixin markup language):

小程序设计的标签语言

语法：（区分大小写）

< 标签名 属性名="属性名1" ... >

  ...(内容）

</标签名>

wxml能进行：

1.数据绑定：实现数据的动态更新，使用Mustache方法：{{变量名}}

在wxml中：

<view>
    <text>{{message}}</text>
</view>

在js中：

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

在属性值中使用：

#属性名要小写
在wxml中：
<view>
    <text data-name="{{theName}}"></text>
</view>

在js中：

Page({
    data:{
     theName:'jiaody'
    }
}) 

在运算符中使用：

在wxml中：
<view hidden="{{flag?true:false}}">
    Hidden
</view>

#当传入的flag是true时隐藏view文本标签中的内容,false时不隐藏

在js中：
Page({
    data:{
    flag:true  #隐藏
    }
})

 属性：

id：String类型 组件的唯一表示（保持整个页面唯一）

class：String类型 在WXSS中定义的样式类

style:  String类型 内联样式（可动态设置）

hidden：Boolean类型 默认显示

data-*： Any类型 自定义属性，组件上触发的事件时，会发送给事件处理函数。

2.列表渲染

 

• wxss 描述页面样式
• wxs 帮助wxml快速构建出页面的内容结构
• JavaScript 交互逻辑以及数据通信

使用<block>对数组进行渲染，

wx:key  = 字符串时，用来代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

wx:key = 保留关键字*this ，代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如： 
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

wx:if和hidden的区别：
    1.都有显示隐藏的作用
    2.if条件在切换时框架会有一个局部渲染的过程，条件会销毁并重新渲染；
     hidden初始化渲染消耗比较高，通过hidden可以控制在视图上的显示和隐藏，始终都会渲染
    3.wx：if有切换消耗更高，切换效果频繁的建议使用hidden

3. 模板引用

使用template标签可以定义自己的代码片段

小程序中文件引用，有两种方法：include和import

import用来引入目标文件中的template模板，而且import具有作用域（只能引用一级）：

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include用来引入除了template之外的内容。

在wxml中：

<template name = "tempItem">
  <view> 
        <view>收件人：{{name}}</view>
        <view>联系方式：{{phone}}</view>
        <view>地址：{{address}}</view>
  </view>
</template>
<template is="tempItem" data="{{...item}}"></template>

# name属性是template的名称，is属性来声明我们使用的是哪个模板。{{...item}}中前面的三个点是es6语法中的扩展运算符，可以将对象或数组进行解构赋值。

在js中：

Page({
    data:{
      item:{
        name:"张三",
        phone:"1234567",
        address:"中国"
      }
    }
})

4.WXSS优先级排序

 （1） ! important 优先级最高

 （2） 内联样式

 （3）id属性

   (4)  class属性

 （5）标签属性

5. 页面路由

路由方式	触发机制	路由前页面	路由后页面
初始化	小程序打开时的第一个页面		onLoad  onShow
打开新页面	调用API wx.navigateTo或使用组件 <navigator open-type='navigateTo'>	onHide	onLoad onShow
页面重定向	调用API wx.redirectTo或使用组件<navigator open-type='redirectTo'>	onUnload	onLoad onShow
页面返回	调用API wx.navigateBack或使用组件 <navigator open-type='redirectTo'>或用户按左上角返回按钮	onUnload	onShow
Tab切换	调用API wx.switchTab或使用组件<navigator open-type='redirectTo'>或用户切换Tab
重启动	调用API wx.reLaunch 或使用组件 <navigator open-type='reLaunch'>	onUnload	onLoad onShow

6. 事件：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

捕获 --> 处理 --> 冒泡

捕获： 从父容器向子容器传递

捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

#捕获在前，冒泡在后。
bind:* : 绑定事件, 事件会冒泡, 优先目标触发, 然后逐级向父节点传递

catch:* : 绑定事件, 阻止冒泡

capture-bind:* : 反向冒泡, 优先根节点, 逐级派发到目标

capture-catch:* : 阻止反向冒泡, 只会触发绑定了事件的根节点

执行顺序是：handleTap2 --> handleTap4 --> handleTap3 --> handleTap1



<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

# 将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

冒泡：从子容器到父容器传递

bind: 处理冒泡事件, 不拦截冒泡传递，继续传递事件
catch: 处理冒泡事件, 拦截冒泡传递, 不传递给父控件