wx小程序学习笔记day02

页面导航

声明式导航

导航到tabbar的页面

<!--注意open-type属性要设置为switchTab-->
<!--url地址必须以斜线开头-->
<navigator url="/pages/message/message" open-type="switchTab" >message</navigator>

导航到非tabbar页面

<navigator url="/pages/info/info" open-type="navigate" >message</navigator>

后退到上一页面

<--! 不写delta默认后退一个页面-->
<navigator open-type="navigateBack" delta="1">Back</navigator>

编程式导航

导航到tabbar的页面

使用wx.switchTab/navigateTo/navigateBack方法实现

<button bindtap="getToMessage">跳转到消息页</button>

与data平级编写函数

getToMessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  }

导航传参

在onload方法中通过option接收参数

页面事件

• 下拉刷新
  
  下拉刷新的颜色和下拉刷新点点的颜色
  
  关闭下拉刷新的效果
  
  下拉刷新时触发的方法
  

上拉触底

分页

配置上拉触底的距离

小案例

节流阀：

1. 在data域中设置一个节流阀变量isloading，当进入请求数据方法中时设置为true，没有进入时设置为flase。
2. 在触发上拉触底事件时需要检查这个值是否为flase，如果为flase则发起请求，如果为true则直接return
   Loading提示：
   使用wx.showLoading和wx.hideLoading来显示和隐藏加载提示信息。
   动态设置页面title：
   通过传参来动态获取数据，通过onload函数来获取数据并转存到页面的data域，在onready函数使用
   使用${}在url中传参时应使用``而不能用单引号，会识别不到参数。
   
   按需调用关闭下拉刷新的函数，在getShopList传入一个cb回到函数，当在下拉刷新时调用getShopList时传入cb
   
   

 /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
      wx.setNavigationBarTitle({
        title:this.data.query.title
      })
  },

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      colorList:[],
      isloading:false
  },
  getColorList(){
    this.setData({
      isloading:true
    })
    wx.showLoading({
      title: 'Loading...',
    })
     wx.request({
       url: 'https://www.escook.cn/api/color',
       method:'GET',
       success:({data:res})=>{
         console.log(res.data)
           this.setData({
             colorList:[...this.data.colorList,...res.data]
           })
       },
       complete:()=>{
         wx.hideLoading()
         this.setData({
          isloading:false
        })
       }
     })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     this.getColorList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log(this.data.isloading)
    if (this.data.isloading) return
    this.getColorList()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

<view wx:for="{{colorList}}" class="num-item" wx:key="index" 
style="background-color:rgba({{item}});" >{{item}}</view>

.num-item{
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

自定义编译模式

wxs

内联wxs

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
    module.exports.toUpper = function(str){
        return str.toUpperCase()
    }
</wxs>

外部wxs

在外部创建一个wxs文件

function toLower(str){
    return str.toLowerCase()
}
module.exports = {
  toLower:toLower
}

wxml内部调用

<view>
{{m2.toLower(a)}}</view>
<wxs src="../../pages/info/tools.wxs" module="m2"></wxs>

wxs的特点

• 配合mustache语法使用，不能作为事件的回调函数
• wxs不能调用js中的函数或者小程序提供的api
• 性能上在ios是会快一些，在Android上无差别

组件

组件的引用

局部引用

只能在该页面下使用
在当前页面的.json文件中引入组件，前面是自定义组件名，后面是组件的目录。

 "usingComponents": {
    "my-test1":"/components/test/test"
  }

在当前页面的wxml中就可以使用定义好的组件了

<my-test1></my-test1>

全局引用

在app.json中与windows节点平级插入usingComponents节点。用法与上面一样，在全局配置文件中声明的组件就可以全局使用了。

组件和页面的区别

组件的样式

组件样式隔离

修改组件的样式隔离

组件中的方法和属性

小程序的事件处理函数（bindtap）和自定义方法都必须写在method方法域内。
所以为了区分，我们一般定义自定义方法时在函数名前面加一个_。
这里我们在组件的data与中定义一个count变量初始值为0，编写一个事件处理函数让count+1，再编写一个自定义函数弹窗显示count的值。
然后在页面中引入该组件。
mycon.wxml

<button bindtap="add">count+1</button>

mycon.js

/**
   * 组件的初始数据
   */
  data: {
    count:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
      add(){
        this.setData({
         count: this.data.count+1
        }),
        this._showCount()
      },
      _showCount(){
          wx.showToast({
            title: 'count:'+this.data.count,
            icon:'none'
          })
      }
  }

mypa.json

 "usingComponents": {
    "my-con":"/components/mycon/mycon"
  }

mypa.wxml

<my-con></my-con>

data和properties的区别

setData修改properties的值

事件监听器

语法

observers:{
//监控变量n1、n2 返回n1、n2的新值
    'n1,n2':function(n1,n2){
      this.setData({
        sum:n1+n2
      })
    }
  }

纯数据字段

插槽

单个插槽

多个插槽

父子组件的三种通信方式

properties属性（父向子传值）

在组件中定义一个properties属性

/**
   * 组件的属性列表
   */
  properties: {
    // 标准定义properties的形式 value为默认值
    max:{
      type:Number,
      value:10
    },
    // 简化定义 不能指定默认值
    max:Number

  },

在页面内引用组件并且写上max属性的值

<my-con max="9"></my-con>

组件取出页面传递过来的值

事件绑定（子向父传值）

• 在父组件中定义一个自定义事件

/**
   * 在父组件中自定义事件
   */
 syncCount(e){
   this.setData({
     count:e.detail.value
     //通过e.detail.参数名称调用参数
   })
 },

• 在子组件中通过bind：同步方法名称="父组件中定义的自定义的函数名“绑定父组件中的方法

<!-- 在子组件中绑定自定义事件 bind：自定义事件名="父组件中定义的函数名" -->
<son count="{{count}}" bind:sync="syncCount">
<text>--------------------------</text>
  <text>父组件的count：{{count}}</text>
  </son>

• 在子组件的方法中通过this.triggerEvent(‘sync’,{value:this.properties.count})第一个参数是同步方法名称。第二个是参数传入父组件方法的参数

 // 这里是调用了父组件中的自定义事件 因为子组件中不能修改父组件中的数据只能通过子向父转递一个值让父自己的事件进行修改
      this.triggerEvent('sync',{value:this.properties.count})

组件选择器

在父组件绑定一个方法

<button bindtap="addCountF">father.count+1</button>

方法内通过id或者class选择器来选择一个组件对其进行操作

addCountF(){
  const child =   this.selectComponent('.customA')
  child.setData({
    count:child.properties.count+1
  })
  // child.addCount()
  },

behaviors

声明一个behavior.js文件

module.exports = Behavior({
  data:{
    username:'zs'
  },
  properties:{},
  methods:{}
})

在组件的js文件中导入behavior

const myBehavior = require("../../behavior/my-behavior")
Component({
  behaviors:[myBehavior]
  }

在组件中直接使用

<view>
{{username}}
</view>

可用节点

同名字段及覆盖规则