小程序事件、组件、生命周期、路由及数据请求

阻止事件冒泡：event.stopProPagation()

btn.addEventListener('click',function() {//回调},true)

bind+事件名="方法名"  向上传递事件，即事件冒泡
catch+事件名="方法名"  阻止事件冒泡

两种路由触发模式：

1.标签方式触发
   
  vue:
   <router-link to="">
   
  小程序：<navigator url="要中转的路径?key=value">
  
  接收：通过另一个页面在onload生命周期中接收 
   
2.编程式触发

  vue:
  this.$router.push()
  
  小程序跳转：
  
  wx.navigateTo()  带历史回退
  wx.redirectTo() 不保留历史，跳转到另一个页面，不能返回到上一页面  this.$router.replace()
  wx.switchTab() 只跳转到tabBar页面，不带回退
  wx.reLaunch() 即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退

   <button class="{{ index===currentIndex? 'active':'' }}" >
          {{ item.typename }}
    </button>

JS原生：XMLHttpRequest,fetch
jQuery:$.ajax,$.getJSON,$.post(),$.get()
Vue:axios
React:fetch
微信小程序：wx.request() 与jQuery的$.ajax类似

wx.request({
  url:'', //请求的接口地址
  method:'get|post|put|delete',//请求方式 
  header:{},//设置请求头
  data:{}, //传参
  success() {}, //成功返回
  fail() {},// 失败返回

})

注意：

1.小程序请求的接口必须是https协议
2. 请求接口之前要提前配置接口请求：
  第一种方法：在微信小程序后台配置request合法域名
  第二种方法：在开发者工具--详情--本地配置--勾选‘不校验合法域名’

上拉加载更多
1.onReachBottom() {} 页面自带的生命周期
2.scroll-view  实现局部区域的滚动和加载更多

例如：

    <swiper 
        class='banner'
        indicator-dots="true"
        indicator-color="#f00"
        indicator-active-color="#ff0"
        circular="true"
      >
      <swiper-item wx:for="{{ banners }}" wx:key="{{ item.id }}">
        <image src="{{ item.imgurl }}"></image>
      </swiper-item>
    </swiper>
    
    参考:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

  <scroll-view 
      scroll-y="true" 
      style="height:{{ height }}px;"
      bindscrolltolower="lower" 
  >
   
    <view class="movie-item" wx:for="{{ moveList }}" wx:key="{{ index }}">
        <image src="{{ item.images.small }}"></image>
         <view clas="movie-title">
            {{ item.title }}
         </view>
      
      </view>


  </scroll-view>

一个完整独立的视图单元（wxml,css,js）

创建和使用组件的步骤：
第一步：创建一个组件：在子组件文件夹上--右建--选择【新建component】选项
第二步：引入组件

    在要引入的父组件中的json文件的usingComponents添加要使用的子组件
  
 例如：
 {
  "usingComponents": {
    "组件名":"要引入的子组件路径",
     "Dialog":"/components/dialog/dialog"
  },
  "navigationBarTitleText": "首页"
}
	
第三步：使用

   在父组件直接使用子组件的标签名：<Dialog />

Component({
//组件的生命周期
lifetimes:{
   creaed() {},
   attached() {}, 
},
//组件与页面相关的生命周期
pageLifetimes: {
 show: function() {
   // 页面被展示
 },
 hide: function() {
   // 页面被隐藏
 },
 resize: function(size) {
   // 页面尺寸变化
 }
}


})

主要目的是为了复用组件之间相同的方法


参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html

 <template name="demo">
 <view class='tempDemo'>
   <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text>
   <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text>
 </view>
</template>

	<template name="demo">
     <view class='tempDemo'>
       <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text>
       <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text>
     </view>
    </template>

 <!--导入模板-->
 <import src="../../templates/demo/index.wxml" />
 <!--嵌入模板-->
 <view>
   <text>嵌入模板</text>
   <template is="demo" data="{{...staffA}}"></template><!--传入参数，必须是对象-->
   <template is="demo" data="{{...staffB}}"></template><!--传入参数，必须是对象-->
   <template is="demo" data="{{...staffC}}"></template><!--传入参数，必须是对象-->
 </view>

@import "../../templates/demo/index.wxss" /*引入template样式*/

 Page({
    /**
     * 页面的初始数据
     */
     data: {
       staffA: { firstName: 'Hulk', lastName: 'Hu' },
       staffB: { firstName: 'Shang', lastName: 'You' },
       staffC: { firstName: 'Gideon', lastName: 'Lin' }
     },
    clickMe(e) {
      wx.showToast({ title: e.currentTarget.dataset.name, icon:  "none", duration: 100000 })
    }
 })

      // components/demo/index.js
      Component({
        /**
         * 组件的属性列表
         */
        properties: {
          name: {
            type: String,
            value: ''
         }
       },
     
       /**
        * 组件的初始数据
        */
       data: {
         type: "组件"
       },
     
       /**
        * 组件的方法列表
        */
       methods: {
         click: function () {
           console.log("component!");
         }
       }
     })

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

      {
       "navigationBarTitleText": "模板demo",
        "usingComponents": {
          "demo": "../../components/demo/index" 
        }
      }

      <demo name="comp" />
      <!--使用demo组件，并传入值为“comp”的name属性（参数）-->

@import "../../app.wxss";