小程序 完结

小程序视图与逻辑

能够知道如何实现页面之间的导航跳转
能够知道如何实现下拉刷新效果
能够知道如何实现上拉加载更多效果
能够知道小程序中常用的生命周期函数

页面导航

1.什么是页面导航

页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式

1 <a>链接 

2 location.href

2.小程序中实现页面导航的两种方式

1 声明式导航
    在页面上声明一个<navigator>导航组件
    通过点击<navigator>组件实现页面跳转

2 编程式导航
    调用小程序的导航API,实现页面的跳转

页面导航 - 声明式导航

1.导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面

在使用<navigator>组件跳转到指定的tabBar页面时,需要指的url属性和open-type属性,其中:

url表示要跳转的页面的地址,必须是以/开头
open-type表示跳转的方式,必须为switchTab

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

2.导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面。

在使用<navigator>组件跳转到普通的非tabBar页面时,则需要指定url属性和open-type属性

url表示要跳转的页面的地址,必须是以/开头
open-type表示跳转的方式,必须为navigate

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

注意:
为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以忽略

3.后退导航

如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性
open-type的值必须是navigateBack,表示要进行后退导航
delta的值必须是数字,表示要后退的层级

<navigator open-type="navigateBack" delta="1">返回</navigator>

页面导航 - 编程式导航

1.导航到tabBar页面

调用wx.switchTab方法,可以调转到tabBar页面。其中Object参数对象的属性列表

属性         类型         是否必选      说明
url         string         是          需要跳转的tabBar页面的路径,路径后不能带参数
success     function     否          接口调用成功的回调函数
fail         function     否          接口调用失败的回调函数
complete     function     否         接口调用结束的回调函数

例如
<button bindtap="gotoMessage">跳转到message页面</button>

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

2.导航到非tabBar页面

调用wx.navigateTab(Object object)方法,可以跳转到非tabBar的页面。

属性         类型         是否必选      说明
url         string         是          需要跳转的tabBar页面的路径,路径后不能带参数
success     function     否          接口调用成功的回调函数
fail         function     否          接口调用失败的回调函数
complete     function     否         接口调用结束的回调函数

<button bindtap="gotoInfo">跳转到Info页面</button>

  gotoInfo(){
    wx.navigageTo({
      url: '/pages/info/info'
    })
  },

3.后退导航

调用wx.navigateBack(Object object)方法,可以返回上一页面或多级页面
其中Object参数对象可选的属性列表如下

属性         类型         是否必选      说明
delta         nuber         否         需要跳转的tabBar页面的路径,路径后不能带参数
success     function     否          接口调用成功的回调函数
fail         function     否          接口调用失败的回调函数
complete     function     否         接口调用结束的回调函数

<button bindtap="gotoBack">后退</button>

  gotoBack(){
    wx.navigateBack()
  }

页面导航 - 导航传参

1.声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数

参数与路径之间使用?分隔
参数键与参数值用=相连
不同参数用&分隔

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

2.编程式导航传参

调用wx.navigateTo(Object object)方法跳转到页面时,也可以携带参数

<button bindtap="gotoInfo2">后退</button>

  gotoInfo2(){
    wx.navigateTo({
    url:'/pages/info/info?name=ls&gender=男'
    })
 }

3.在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到

onLoad:function(options){
  //options就是导航传递过来的参数对象
  console.log(options)
}

页面事件 - 下拉刷新事件

1.什么是下拉刷新

下拉刷新是移动端的专有名词,指的是手指在屏幕上的下拉操作,从而重新加载页面数据的行为

2.启用下拉刷新

1 全局开启下拉刷新
    在app.json的wiondow节点中,将enablePullDownRefresh设置为true
    不推荐
2 局部开启下拉刷新
    在页面的.json配置文件中,将enablePullDownRefresh设置为true

在实际开发中,推荐使用第二种,为有需要的页面单独开启下拉刷新的效果

3.配置下拉刷新窗口的样式

在全局或页面页面的.json配置文件种,通过backgrounColor和backgrounTextStyle来配置
其中:
backgrounColor用来配置下拉刷新窗口饿背景颜色 仅支持16进制的颜色
backgrounTextStyle用来配置下拉刷新loading的样式

4.监听页面的下拉刷新事件

在页面的.js文件中,通过onPulldDownRefresh()函数即可监听当前页面的下拉刷新事件

例如,在页面得到wxml中有如下的UI结构,点击按钮可以让count自增+1

页面结构

<view>count值为:{{count}}</view>
<button bindtap="countAdd">+1</button>

countAdd(){
   this.setData({
    count:this.data.count + 1
   })
}

4.监听页面的下拉刷新事件

在触发页面的下拉刷新事件的时候,如果要把count的值重置为0

onPullDownRefresh:function(){
  this.setData({
      count:0
   })
}

5.停止下拉刷新的效果

当处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失
需要手动隐藏loading效果。此时调用.wx.stopPullDownRefresh()可以停止当前页面的下拉刷新

onPullDownRefresh:function(){
  this.setData({
      count:0
   })
   wx.stopPullDownRefresh()
}

页面事件 - 上拉触底事件

1.什么是上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为

2.监听页面的上拉触底事件

在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件

onReachBottom:function(){
   console.log("触发了上拉触底")
}

新版不需要function

  onReachBottom() {
    console.log("xxx");
  },

3.配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离
可以在全局或页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离
小程序默认的触底距离是50px 在实际开发中 可以根据自己的需求修改这个值

"onReachBottomDistance":50

4.上拉触底进行节流处理

1 在data中定义isloading节流阀
    false表示当前没有进行任何数据请求
    trueb表示当前正在进行任何数据请求
2 在getColors()方法中修改isloading节流阀的值
    在刚调用getColor时将节流阀设置true
    在网络请求的complete回调函数中,将节流阀重置为false
3 在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制
    如果节流阀的值为true,则阻止当前请求
    如果节流阀的值为false,则发起当前请求

扩展

自定义编译模式

生命周期

1.什么是生命周期

生命周期是指一个对象从创建->运行->销毁的整个阶段,强调的是一个时间段。

每个小程序运行的过程,也概况为生命周期

小程序的启动,表示生命周期的开始
小程序的关闭,表示生命周期的结束
中间小程序运行的过程,就是小程序的生命周期

2.生命周期的分类

在小程序中,生命周期分为两类

1 应用生命周期
    特指小程序从启动->运行->销毁的过程
2 页面生命周期
    特指小程序中,每个页面的加载->渲染->销毁的过程

其中,页面的生命周期范围较小,应用程序的生命周期范围较大

3.什么是生命周期函数

生命周期函数:是由小程序框架提供的内置函数,会伴随生命周期,自动按序执行

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。
例如,页面加载的时候,可以在onLoad生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段,生命周期函数强调的是时间点

4.生命周期函数的分类

在小程序中,生命周期分为两类

1 应用生命周期函数
    特指小程序从启动->运行->销毁的过程的那些函数
2 页面生命周期函数
    特指小程序中,每个页面的加载->渲染->销毁的过程的哪些函数

5.应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行声明

// app.js
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

6.页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js文件中进行声明

PAge({
   onLoad:function(options){}
   onShow:function(options){}
   onReady:function(options){}
   onHide:function(options){}
   onUnload:function(options){}
})

WXS脚本 - 概述

1.什么是WXS

WXS是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构

2.WXS的应用场景

wxml中无法调用在页面的.js中定义的函数,但是,wxml中可以调用WXS中定义的函数
因此,小程序中wxs的典型应用场景就是过滤器

3.wxs和js的关系

虽然wxs的语法类似于js,但是wxs和js是完全不同的两种语言

1 wxs有自己的数据类型
    number数据类型 string字符串类型 boolean布尔类型 object类型
    function函数类型 aarray数组类型 date日期类型 regexp正则
2 wxs不支持类似于ES6及以上的语法形式
    不支持 let const 解构赋值 展开运算符 箭头函数 对象属性简写 etc
    支持:var定义变量、普通function函数等类似于ES5的语法
3 wxs遵循CommonJS规范
    module对象
    require()函数
    module.exports对象

WXS脚本 - 基础语法

1.内嵌wxs脚本

wxs代码可以编写在wxml文件中的<wxs>标签内,就像js代码可以编写在html文件中的<script>标签内一样

wxs文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs的模块名称
方便在wxml中访问模块中的成员:

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

2.定义外联的wxs脚本

wxs代码还可以编写在以.wxs为后遵命的文件内,就像js代码可以编写在以.js文件为后缀名的文件中一样

tools.wxs文件

function toLower(str){
   return str.toLowerCase()
}

module.exports ={
  toLower:toLower
}

3.使用外联的wxs脚本

在wxml中引入外联的wxs脚本时,必须为<wxs>标签添加module和src属性

module用来指定模块的名称

src用来指定要引入的脚本的路径,且必须是相对路径

调用m2模块中的方法
<view>{{m2.toLower(country)}}</view>
引用外联的tools.wxs脚本 并命名为m2
<wxx src="../../utils./tools.wxs" module="m2"></wxs>

WXS脚本 - WXS的特点

1.与JS不同

为了降低wxs的学习成本 wxs语言在设计上借大量的js的语法。
但本质上wxs和js是完全不同的两种语言

2.不能作为组件的事件回调

wxs典型的应用场景就是过滤器 经常配合Mustache语法进行使用

<view>{{m2.toLower(country)}}</view>

但是,在wxs中定义的函数不能作为组件的事件回调函数的。
<button bindtap="m2.toLower">按钮</button>

3.隔离性

隔离性指的是wxs的运行环境和其他js代码是隔离的。

1 wxs不能调用js中定义的函数

2 wxs不能调用小程序提供的API

4.性能好

在iOS设备上,小程序内的WXS会比js代码快2-20倍

在android设备上,二者的运行效率无差异

小程序 - 基础加强

能够知道如何自定义小程序组件
能够知道小程序组件中的behaviors的作用
能够知道如何安装和配置vant-weapp组件库
能够知道如何使用MboX实现全局数据共享
能够知道如何对小程序的API进行Promise化

自定义组件 - 组件的创建与引用

1.创建组件

在项目的根目录中,鼠标右键 创建components->test文件夹
在新建的components->text文件夹上,鼠标右键 点击新建Component
键入组件的名称之后回车。会自动生产组件对应的4个文件
后缀名:.js .json .wxml .wxss

注意:为了保证目录结构的清晰,建议把不同的组件,存放到单独目录中。

2.引用组件

组件的引用方式分为局部引用和全局引用

局部引用:组件只能在当前被引用的页面内使用

全局引用:组件可以在每个小程序页面中使用

3.局部引用组件

在页面的.json配置文件中引用组件的方式,叫做局部引用。

在页面的.json文件中 引入组件

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

<my-test1></my-test1>

4.全局引用组件

在app.json全局配置文件中引用组件的方式,叫做全局引用

{
  "pages":[],
  "window":{},
    "usingComponents":{
    "my-test1":"/components/test/test"
  }
}

<my-test2></my-test2>

5.全局引用vs局部引用

根据组件的使用频率和范围,来使用合适的引用方式

如果某组件在多个页面中经常被用到,建议进行全局引用

如果某组件只在特定的页面中被用到,建议进行局部引用

6.组件和页面的区别

从表面来看,组件和页面都是由.js .json .wxml .wxss这四个文件组成的。
组件和页面的.js与.json文件有明显的不同

组件的.json文件中需要声明"component":true属性
组件的.js文件中调用的是Component()函数
组件的事件处理函数需要定义到methods节点中

自定义组件 - 样式

1.组件样式隔离

默认情况下,自定义组件的样式只对组件生效,不会影响到组件之外的UI结构

组件A的样式不会影响组件C的样式
组件A的样式不会影响小程序页面的样式
小程序页面的样式不会影响组件A和C的样式

好处:
防止外界的样式影响组件内部的样式
防止组件的样式破坏外界的样式

2.组件样式隔离的注意点

app.wxss中的全局样式对组件无效

只有class选择器有样式隔离效果,id选择器、属性选择器,标签选择器不受样式隔离的影响

建议:在组件和引用组件的页面中建议使用class选择器,不要使用id、属性、标签选择器

3.修改组件的样式隔离选项

默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题

但有时,我们希望在外界能够控制组件内部的样式
此时,可以通过styleisolation修改组件的样式隔离选项

语法:
在组件的.js文件中新增如下配置
Component({
  options:{
    styleIsolation:'isolated'
  },
)}

//或在组件的.json文件中新增如下配置

4.styleisolation的可选值

可选值        默认值        描述
isolated     是        表示启用样式隔离,在自定义组件内外，使用class指定得到样式将不会相互影响
apply-shared     否        表示页面wxss样式到自定义组件,自定义组件wxss中指定的样式不会影响页面
shared         否        表示页面wxss样式将影响到自定义组件,自定义组件wxss中的样式会影响页面和
                其他设置了apply-share或shared的apply-share

自定义组件 - 数据、方法和属性

1.data数据

在小程序组件中,用于组件模板渲染的私有数据,需要定义到data节点中

Component({
  /**
   * 组件的初始数据
   */
   data:{
     count:0
   }
)}

2.methods方法

在小程序组件中,事件处理函数和自定义方法需要定义到

methods: {
    // 点击事件处理函数
    adddCount(){
      this.setData({
        count:this.data.count+1
      })
      this.showCount()
    },
    _showCount(){
      wx.showToast({
        title:'count是' + this.data.count,
        icon:'none'
  })
 }
}

3.properties属性

在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据

<my-test1 max="10"></my-test1>

Component({
  properties: {
    // 第一种方式:简化方式
    // max:Number //简化定义属性的方式不需指定属性[当需要指定属性默认值,建议使用此方式]
    max:{
      type:Number,//完整定义属性的方式[当需要指定属性默认值时,]
      value:10//属性默认值
    }
  },
)}

4.data和properties的区别

在小程序的组件中,properties属性和data数据的用法,它们都是可读可写的

data更倾向于存储组件的私有数据

properties更倾向于存储外界传递到组件中得到数据

Component({
  methods:{
    showInfo(){
      console.log(this.data)    //输出结果:{count:0 ,max:10}
      console.log(this.properties)//输出结果:{count:0,max:10}
      //结果为true证明data数据和properties属性[在本质上是一样的、都是可读可写的]
      console.log(this.data === this.properties)
   }
  }
)}

5.使用setData修改properties的值

由于data数据和properties属性在本质上没有任何区别、
因此properties属性的值也可以用于页面渲染
或使用setData为properties中饿属性重新赋值

<view>max属性的值为:{{max}}</view>

自定义组件-数据监听器

1.什么是数据监听器

数据监听器用于箭头和响应任何属性和数据字段的变化,从而执行特定的操作
它的作用类似于vue中的watch侦听器。
语法:

Component({
   observers:{
      '字段a,字段b':function(字段A的新值,字段B的新值){
       //do something
    }
  }
)}

2.数据监听器的基本用法

组件的UI结构如下:
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button size="mini" bindtap="addN1">n1自增</button>
<button size="mini bindtap="addN2">n2自增</button>

组件的.js文件代码如下:
  methods: {
    addN1(){
      this.setData({
        n1:this.data.n1+1
      })
    },
    addN1(){
      this.setData({
        n2:this.data.n2+1
      })
    },
  },
  observers:{
    'n1,n2':function(newN1,newN2){
      this.setData({
        sum:newN1 + newN2
      })
    }
  }

3.监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化。

Component({
   observers:{
   '对象.属性A，对象.属性B':function(属性A的新值,属性B的新值){
    触发此监听器的3种情况
    //为属性A赋值 使用setData设置this.data对象.属性A时触发
    //为属性B赋值 使用setData设置this.data对象.属性B时触发
    //直接为对象赋值 使用setData设置this.data对象
    //do something...
    }
)}

自定义组件 - 纯数据字段

1.什么是纯数据字段

概念:纯属就字段指的是哪些不用于界面渲染的data字段

应用场景:某些data中的字段即不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。
带有这种特性的data字段适合被设置为纯数据字段

好处:纯数据字段有组于提升页面更新的性能

2.使用规则

在Component构造器的options节点中，指的purrDataPattern为一个正则表达式,字段名符合这个正则表达式的字段
将成为纯数据字段

Component({
  options:{
    //指定所有_开头的数据字段为纯数据字段
    purrDataPattern:/^_/
  },
  data:{
    a:true,//普通数据字段
    _b:true,//纯数据字段
  }

})

3.使用纯数据字段改造数据监听器案例

自定义组件 - 生命周期

1.组件全部的生命周期函数

小程序组件可以的全部生命周期如下表所示

生命周期函数    参数        描述说明
created         无        在组件实例刚刚被创建时执行
attached     无        在组件实例进入页面节点树时执行
ready         无        在组件在视图层布局完成后执行
moved         无        在组件实例被移动到节点树另一个位置时被执行
detached     无        在组件实例被从页面节点树移除时执行
error        Object Error    每当组件方法抛出错误时执行

2.组件主要的生命周期函数

在小程序组件中,最重要的生命周期函数有3个,分别是created、attached、detached。

组件实例刚被创建好的时候,created生命周期函数会被触发
    此时还不能调用setData
    通常在这个生命周期函数中,只应该用于给组件的this添加一些自定义的属性字段

在组件完全初始化完毕、进入页面节点树后,attached生命周期函数会被触发
    此时,this.data已被初始化完毕
    这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(发请求获取初始化数据)

在组件离开页面节点树后,detached生命周期函数会被触发
    退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
    此时适合做一些清理性质的工作

3.lifetimes节点

在小程序组件中,生命周期函数可以直接定义在Component构造器的第一级参数
可以在lifetimes字段内进行声明(这是推荐的方式,其优先级最高)。

Component({
//推荐用法
    lifetimes:{
    attached(){},//在组件实例进入页面节点树时执行
    detached(){},//在组件实例被页面节点树移除时执行
    }
//以下是旧的定义方式
     attached(){}
    detached(){}
})

自定义组件 -组件所在页面的生命周期

有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期 

例如:每当触发页面的show生命周期函数的时候,我们希望能够重新生成一个随机的RGB颜色值
在自定义组件中,组件所在页面的生命周期有如下3个,分别是:

生命周期函数    参数        描述
show        无        组件所在的页面被展示时执行
hide        无        组件所在的页面被隐藏时执行
resize        Object Size    组件所在的页面尺寸变化时执行

2.pageLifetimes节点

组件所在页面的生命周期函数,需要定义在pageLifetimes节点

Component({
   pageLifetimes:{
    show:function(){},//页面被展示
    hide:function(){},//页面被隐藏
    resize:function(size){}//页面尺寸变化
   }
})

自定义组件 - 插槽

1.什么是插槽

在自定义组件的wxml结构中,可以提供一个<solt>节点,用于承载组件使用者提供的wxml结构

在小程序中,默认每个自定义组件中只允许使用一个<solt>进行占位,这种个数上的限制叫做单个插槽

<my-test>
  插槽内容
</my-test>

2.启用多个插槽

在小程序的自定义组件中,需要使用多<slot>插槽时,可以在组件的.js文件中,通过如下方式进行启用

Component({
   optons:{
     multipleSlots:true //在组件定义时的选项中启用多slot支持
   },
   properties:{/**/},
   methods:{/**/}
})

4.定义多个插槽

可以在组件的.wxml中使用多个<slot>标签,以不同的name来区分不同的插槽

<solt name="before"></solt>
<solt name="after"></solt>

<view solt="before"></view>
<view solt="after"></view>

自定义组件 - 父子组件之间的通信

1 属性绑定
    用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据
2 事件绑定
    用于子组件向父组件传递数据,可以传递任意数据
3 获取组件实例
    父组件还可以通过this.selectComponent()获取子组件实例对象
    这样就可以直接访问子组件的任意数据和方法

2.属性绑定

属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。

父组件的data节点
data:{
  count:0
}

父组件的wxml结构
<my-test3 count="{{count}}"></my-test3>
<view>----</view>
<view>父组件中,count值为:{{count}}</view>

子组件在properties节点中声明对应的属性并使用。

//子组件的properties节点

properties:{
   count:Number
}

//子组件的wxml结构
<test>子组件中,count值为:{{count}}</view>

3.事件绑定

事件绑定用于实现子向父传值,可以传递任何类型的数据。

1 在父组件的js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件
2 在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件
3 在子组件的js中,通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件中
4 在父组件的js中,通过e.detail获取到子组件传递过来的数据

3.事件绑定

步骤1:在父组件的js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件
在父组件中定义syncCount方法
将来这个方法会被传递给子组件,供子组件进行调用
syncCount(){
   console.log('syncCount')
}

在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件

使用bind:自定义事件名称
<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>
<或在bind后面直接写上自定义事件名称>
<my-test3 count="{{count}}" bindsync="syncCount"></my-test3>

在子组件的js中,通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件中

子组件的wxml结构
<test>子组件中,count值为:{{count}}</test>
<button type="primary" bindtap="addCount">+1</button>

子组件的js代码
methods:{
  addCount(){
     this.setData({
       count:this.properties.count + 1
    })
    this.triggerEvent('sync',{value: this.properties.count})
  }
}

在父组件的js中,通过e.detail获取到子组件传递过来的数据

syncCount(e){
  this.setData({
     count:e.detail.value
  })
}

4.获取组件实例

可在父组件里调用this.selectComponent("id或class选择器"),获取子组件的实例对象,从而直接访问子组件
的任意数据和方法。调用时需要传入一个选择器,例如this.selectComponent(".my-component")

<my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3>
<button bindtap="getChild">获取子组件实例</button>

getChild(){
   const child = this.selectComponent('.customA')
   child.setData({count: child.properitex.count + 1})
   child.addCount()//调用子组件的addCount方法
}

自定义组件 - behaviors

1.什么是behaviors

behaviors是小程序中,用于实现组件间代码共享的特性,类型于Vue.js中的mixins

2.behaviors的工作方式

每个behaviors可以包含一组属性、数据、生命周期函数和方法。
组件引用它时,它的属性、数据和方法会被合并到组件中

每个组件可以引用多个behavior,behaviors也可以引用其他behavior

3.创建behavior

调用Behavior方法即可创建一个共享的behavior实例对象,供所有的组件使用

调用Behavior()方法 创建实例对象

并使用module.exports将behavior实例对象共享出去

module.exports = Behavior({
  //属性节点
  properites:{},
  //私有数据节点
  data:{username:'zs},
  //事件处理函数和自定义方法节点
  methods:{},
  //其他节点
})

4.导入并使用behavior

在组件中,使用require()方法导入需要的behavior,挂载后即可访问behavior中的数据或方法

使用require()方法导入需要的自定义behavior
const myBehavior = require("../../behaviors/my-behavior")

Component({
  //2.将导入的behavior实例对象,挂载到behaviors数组节点中,即可生效
  behaviors:[myBehavior],
  //组件的其他节点
})

5.behavior中所有可以的节点

可用的节点    类型        是否必填    描述
properties*    Object Map      否        同组件的属性
data*        Object          否        同组件的数据
methods*    Object          否        同自定义组件的方法
behaviors*    String Array      否        引用其他的behavior
created        Function      否        生命周期函数
attached    Function      否        生命周期函数
ready        Function      否        生命周期函数
moved        Function      否        生命周期函数
detached    Function      否        生命周期函数

6.同名字段的覆盖和组合规则*

组件和它引用的behavior中可以包含同名的字段,此时可以参考如下3种同名时的处理规则

1 同名的数据字段(data)
2 同名的属性(properties)或方法(methods)
3 同名的生命周期函数

使用npm包

小程序对npm的支持与限制

目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。
在小程序中使用npm包如下3个限制:

1 不支持依赖于Node.js内置库的包

2 不支持依赖于浏览器内置对象的包

3 不支持依赖于C++插件的包

总结: 虽然npm上的包有千千万,但是能供小程序使用的包却"为数不多"

使用npm包 - Vant Weapp

1.什么是Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发中快速搭建小程序应用。
它所使用的是MIT开源许可协议,对商业使用比较友好

2.安装Vant组件库

在小程序项目中,安装Vant组件库主要分为如下3步:

1 通过npm安装 建议指定版本为@1.3.3

2 构建npm包

3 修改app.json 

3.使用Vant组件

安装完Vant组件库之后,可以在app.json的usingComponents节点中引入需要的组件
即可在wxml中直接使用组件

// app.json
"usingComponents": {
  "van-button": "vant-weapp/button"
}

页面的.wxml结构
<van-button type="primary">按钮</van-button>

4.定制全局主体样式

Vant Weapp使用CSS变量来实现定制主题。关于CSS变量的基本用法

element{
  --main-bg-color:brown
}

var(--main-bg-color)

5.定制全局主题样式

在app.wxss中,写入CSS变量,即可对全局生效

page{
  --button-danger-background-color:#C00000:
  --button-danger-border-color:#D60000:
}

使用npm包 - API Promise化

1.基于回调函数的异步API的缺点

默认情况下,小程序官方提高的异步API都是基于回调函数实现的,例如,网络请求的API需要按照如下的方式

we.request({
  method:'',
  url:'',
  data:{},
  success:() => {},//请求成功的回调
  fail: () =>{},   //请求失败的回调
  complete:() =>{} //请求完成的回调
})

缺点:容易造成回调地狱的问题,代码的可读性、维护性差

2.什么是API Promise化

API Promise化,指的是额外的配置,
将官方提供的、基于回调函数的异步API,升级改造为基于Promise的异步API。
从而提高代码的可读性、维护性、避免回调地狱的问题。

3.实现API Promise化

在小程序中,实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包。

npm install -- save miniprogram-api-promise@1.0.4

在小程序入口文件(app.js)只需调用一次promisifyAll()方法

import{ promisifyAll }from 'miniprogram-api-promise'

const wxp = wx.p = {}

promisifyAll(wx,wxp)

4.调用Promise化之后的异步API

<van-button type="danger" bindtap="getInfo">vant按钮</button>

 async getInfo(){
    const res=await wx.request({
      method: 'GET',
      url:'https://www.escook.cn/api/get',
        data:{
          name:'zs',
          age:20
        }
    })
  }
console.log(res)

},

全局数据共享

1.什么是全局数据共享

全局数据共享(状态管理)是为了解决组件之间数据共享的问题

开发中常用二点全局数据共享方案有:Vuex Redux Mobx

2.小程序中的全局数据共享方案

在小程序中,可使用mobx-miniprogram-bindings实现全局数据共享。

mobx-miniprogram用来创建Store实例对象

mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用

全局数据共享-Mobx

1.按照Mobx相关的包

在项目中运行如下的命令,安装Mobx相关的包

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意:Mobx相关的包安装完毕之后,记得删除miniprogram_npm目录后,重新构建npm

2.创建Mobx的Store实例

import { observable } from 'mobx-miniprogram'

export const sotre = observable({
  // 数据字段
  // 计算属性
  // 方法
  //action方法修改里面的数据
  //
 })

3.将Store中的成员绑定到页面中

将Store中的成员绑定到页面中

import { store } from '../../store/store'
import { createStoreBindings } from 'mobx-miniprogram-bindings'

onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:[],//字段
      actions:[]//方法
    })
  },

  onUnload() {
    this.storeBindings.detroyStoreBindings()
  },

4.在页面上使用Store中的成员
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler1" data-step="{{-1}}">numA + 1</van-button>
5.将Store中的成员绑定到组件中

import { storeBindingsBehavior }from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
  behaviors:[storeBindingsBehavior],

  storeBindings:{
    store,
    fields:{
      numA:'numA',
      numB:'numB',
      sum:'sum'
    },
    actions:{
      updateNum2:'updateNum2'
    }
  }
methods: {
    btnHandler1(e){
      this.updateNum2(e.target.dataset.step)
    }
  }

6.在组件中使用Store中的成员
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler1" data-step="{{-1}}">numA + 1</van-button>

分包 - 基础概念

1.什么是分包

分包指的是把一个完整的小程序项目,按照需要划分为不同的子包。
在构建时打包成不同的分包，用户在使用时按需进行加载。

2.分包的好处

对小程序进行分包的好处主要有以下两点

可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦协作

3.分包前项目的构成

分包前,小程序项目中所有页面和资源都被打包到了一起。
导致整个项目体积过大,影响小程序首次启动的下载时间

4.分包后项目的构成

分包后,小程序项目由1个主包 + +多个分包组成:

主包:一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源

分包:只包含和当前分包有关的页面和私有资源

5.分包的加载规则

1 在小程序启动时,默认会下载主包并启动主包内页面
    tabBar页面需要放到主包中

2 当用户进入 分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
    非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

6.分包的体积限制

目前,小程序分包的大小有以下限制
    整个小程序所有分包大小
    单个分包/主包大小不能超过2M

分包 - 使用分包

1.配置方法

app.js
app.json
app.wxss
pages//主包的所有页面
     index
     logs
     packageA//第一个分包
        pages//第一个分包的所有页面
             cat    
             dog
     packageB//第二个分包
        pages//第二个分包的所有页面
             apple    
             banana
utils
     

在app.js的subpackages节点中声明分包的结构

subpackages{
 {
   "root":"packagesA",//根目录:根目录名字
   "name":"p1",//起别名
   "pages:[
    "pages/cat"
    "pages/dog"
    ]"
 }
}

2.打包原则

1 小程序会按subpackages的配置进行分包,subpackages之外的目录将被打包到主包
2 主包也可以有自己的pages(即最外层的pages字段)
3 tabBar页面必须在主包内
4 分包之间不能互相嵌套

3.引用原则

1 主包无法引用分包内的私有资源
2 分包之间不能相互引用私有资源
3 分包可以引用主包内的公共资源

分包 - 独立分包

1.什么是独立分包

独立分包本质上也分包,只不过它比较特殊,可以独立于主包和其他分包而单独运行

2.独立分包和普通分包的区别

最主要的区别:是否依赖于主包才能运行

普通分包必须依赖于主包才能运行
独立分包可以在不下载主包的情况下,独立运行

3.独立分包的应用场景

开发中可以按需,将某些具有一定功能独立性的页面配置到独立分包中。

而独立分包不依赖主包即可运行,可以很大程度上提升    分包页面的启动速度

4.独立分包的配置方法

app.js
app.json
app.wxss
pages//主包的所有页面
     index
     logs
     modeuleA//普通分包
        pages//第一个分包的所有页面
             cat    
             dog
     modeuleB//独立分包
        pages//第二个分包的所有页面
             apple    
             banana
utils

通过independent节点声明独立分包

通过independent:true节点声明

5.引用原则

独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源

1 主包无法引用独立分包内的私有资源
2 独立分包之间,不能相互引用私有资源
3 独立分包和普通分包之间,不能相互引用私有资源
4 特别注意:独立分包中不能引用主包内的公共资源

分包 - 分包预下载

1.什么是分包预下载

分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。

2.配置分包的预下载

预下载分包的行为,会在进入指定的页面时触发。在app.js中,使用preloadRule节点定义分包的预下载规则。

{
 "preloadRule":{
    "pages/contact/contact":{
     //network表示在指定的网络模式下进行预下载
     //可选值:all和wifi
     //默认值为:wifi
     "network":"all",
     //packages 表示进入页面后,预下载哪些分包
     //可以通过root 或 name 指定预下载哪些分包
     "packages":["pkgA"]
    }
  }
}

3.分包预下载的限制

同一个分包中的页面享有共有的预下载大小限额2M