微信小程序学习第二天

微信小程序学习第二天

1，事件流

1，事件冒泡：从电机的元素开始触发，向上事件传播

组织事件冒泡：event.stopProPagation()

2，事件捕获：多上级元素传递，传递到最具体的元素

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

2，小程序事件冒泡和阻止事件冒泡

bind+时间名=“方法名” 向上传递事件，即冒泡事件

catch+事件名=“方法名” 组织事件冒泡

3，小程序的生命周期

1，整体小程序的生命周期

App({
onLaunch() {},   监听小程序初始化，只触发一次
onShow(){},小程序启动或切换到前台运行
onHide(),小程序切换到后台运行
})

2，小程序页面级的生命周期

Page({
//页面创建完，只触发一次，通常获取后台数据或接收另一个页面的传参时使用
onLoad() {},
//进入页面就会触发
onShow() {},
//页面离开时触发
onHide() {},
//监听页面初次渲染完成
onReady() {}，
//监听页面卸载,类似于vue中destroyed
onUnload() {}
onReachBottom() {
console.log('到底页面底部')
},
//下拉触发
onPullDownRefresh() {
console.log('onPullDownRefresh')
},
//点击右上角分享时触发
onShareAppMessage() {

}
})

4，小程序的路由管理

两种路由触发模式：

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页面，不带历史回退

5，动态样式

• 小程序支持的选择器：class选择器,id选择器，标签选择器，群组选择器，伪对象（:before,:after）

• 可以对class做动态样式处理，例如：

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

6，数据请求

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  实现局部区域的滚动和加载更多

6，组件

内置组件：微信小程序封装好的组件，直接拿来就能使用

• swiper：轮播组件，必须要和swiper-item配合使用

  例如：
  
  <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-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>

  今日份的问题和解答：

  ​ 今天在做豆瓣的小程序，做到了路由传参部分，发现自己怎么也接收不到自己传到详情页面的电影ID，参考了官方文档的教程，发现自己有点迷，在官方文档中用的是

  //test.js
  Page({
  onLoad: function(option){
  console.log(option.query)
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
  eventChannel.emit('someEvent', {data: 'test'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
  console.log(data)
  })
  }
  })

  其中的option自己没理解啥意思 ，后来自己查了下百度，option的意思就是自己在列表页传参的名字，有时候吧，自己确实连做胶水都不配 哈哈哈哈哈哈 还是要多学习学习 先给自己立个小目标，成为一名合格的胶水