微信小程序

事件绑定

事件分为冒泡事件和非冒泡事件：
     冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
    非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
bindtap 和 catchtap:catch 会阻止冒泡

<view bindtap="handleTap">
	Click here!
</view>

模板

WXML提供模板（template），可以再模板定义代码片段，然后在不同地方调用。

定义模板：
使用name属性，作为模板的名字

<!-- name:给当前模板添加标题 -->
<template name="a">
  <view>我是模板</view>
</template>

使用模板：

使用is属性，作为模板的名字

<!-- is: 根据模板的name值来显示 -->
  <template is="a"></template>

引用模板：

WXML提供了两种引用模板的方式 import 和 include。

Import引入模板

<import src="/pages/templates/a.wxml"/>

Include引入模板外的内容

<include src="/pages/templates/a.wxml"/>

网络请求

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

自定义组件

创建自定义组件：
一个自定义组件由json、wxml、wxss、js四个文件组成。要编写自定义组件，首先需要在json文件中进行自定义组件声明

{
  "component": true,
  "usingComponents": {}
}

在wxml中编写组件模板，在wxss文件中加入组件样式

使用自定义组件：
在要引用组件的json文件里添加自定义组件

"usingComponents": {
    "my-component":"/components/my-components/index"
  }

在wxml文件中引用该组件（组件名称要一致）

<my-component>
</my-component>

组件模板和样式：
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。
当我们需要使用多个slot时，可以通过不同的name来区分

<view>
  <slot></slot>
  <slot name="mylove"></slot>
</view>

<view>
  <my-component>
    <!-- 匿名插槽 -->
    <!-- 为了在组件内添加内容 -->
    <view>我是插槽的内容</view>
    <!-- 具名插槽 -->
    <view name="mylove">我是一个有名字的插槽</view>
  </my-component>
</view>

事件传参：

给元素绑定方法名，绑定data-id=”{{}}”

<view bindtap="showDetila" data-id="{{item.id}}">
</view>

Js中通过e.currentTarget.dataset.id定义，wx.navigateTo跳转

showDetila(e){
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/newsDetail/index'
    })
  },