小程序（三）

十三、自定义组件

（二）数据方法声明位置

在js文件中

A、数据声明位置：data中

B、方法声明位置methods中，这点和普通页面不同！

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
   isChecked: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
   //更新复选框的值
   updateValue(){
    this.setData({
      isChecked:!this.data.isChecked
    })
    console.log(this.data.isChecked)
   }
  }
})

（三）Properties

Properties是指组件的对外属性，主要用来接受组件使用者传递给组件内部的数据，和data一同用于组件的模版渲染。

注意：

1. 设置属性类型需要使用type属性，属性类型是必填项，value属性为默认值。
2. 属性类型只可以为五种，分别是：String、Number、Boolean、Object、Array。也可以为null表示不限制类型。

我们现在要将数据传递给组件，然后再组件中显示：

• 在组件中声明要接收的数据和默认值

  properties: {
 
      firstValue:{
      value:'我是默认值',//我是默认值
      style: String
      },
      age:{
        value:23,
        style: Number
      }
  },

• 在组件中使用

<view>{{firstValue}}、{{age}}</view>

• 在页面中使用并传递数据

<my_view firstValue="杨大炮" age="23"></my_view>

（四）插槽（slot）

在使用基础组件时，可以在组件中间书写基础组件，这些基础组件会根据在组件中声明的slot位置，插入组件进行显示。

插槽分为默认插槽和具名插槽。如果要开启具名插槽需要再组件js中开启配置项：

options:{
    multipleSlots:true   
  },

然后多个插槽需要增加name属性以区分，在页面中使用时，使用slot属性来确定插入位置。

下面例子：

• 开启具名插槽（见上）
• 声明插槽位置：

<text>我是组件中的内容</text>
<view>占位</view>
<slot name="topSlot"></slot>
<text>我是组件中的内容</text>
<view>占位</view>
<slot name="bottomSlot"></slot>

• 页面中使用，并插入组件

<my_view>
<text slot="topSlot">长安陌上无穷树，</text>
<view></view>
<text slot="bottomSlot">唯有垂杨管别理。</text>
</my_view>

（五）自定义组件数据监视

要在js文件中使用observers属性声明要监视的属性：

• key:要监视的属性名、value:一个函数，会传入一个参数，参数值是最新改变的值。

observers:{
  'people.name':function(newValue){
    //监视器可以监视对象内部，或者数组内部的数据变化
    console.log(newValue);
  },
  num: function(newValue){
    //监视数据时会传入变化后的数据。
    console.log(newValue);
  }
},

数据：

data: {
    people:{
      name:"陈大炮",
      age: 22
    },
    num: 23
  },

可见，监视属性也可以监视对象属性的变化。监视多个属性可以如上声明多个key:value，也可以如下面方式。

• 如果要统一监视多个属性

observers:{
  'people.name, num':function(newValue,newValueTwo){
    //监视器可以监视对象内部，或者数组内部的数据变化
    console.log(newValue,newValueTwo);
  },

• 监视对象中所有属性

observers:{
  'people.**':function(newPeople){
    //参数传入的是新的对象
    console.log(newPeople);
  },

（六）子组件向父组件传递数据

子组件通过triggerEvent方法将自定义事件名，和要传递的数据，页面组件（父组件）使用bind触发子组件传递的事件，则子组件传递的数据就会被放在父组件的event对象的detail属性中。

1、组件中绑定点击事件，触发后将自定义事件传递到父组件

<button type="primary" bind:tap="sendData">发送数据</button>

2、sendData方法如下：

sendData(){
//第一个参数是要发送给父组件的自定义事件名字
//第二个参数是要发送的数据
     this.triggerEvent('giveData',this.data.people);
   }  

3、在父组件中绑定自定义事件，并自定义方法处理得到的子组件状态

<scanme bind:giveData="getData"></scanme>

4、getData方法逻辑如下：

getData(event){
  //得到的子组件状态保存在event.detail中，detail是自定义事件的属性值
      console.log(event.detail);
  }

（七）获取子组件对象

获取子组件对象后，就可以获取子组件对象的所有数据和方法，非常的奈斯！父组件通过调用this.selectComponent方法获取子组件对象。

1、给子组件定义class属性或者id属性

<scanme bind:giveData="getData" class="son"></scanme>

2、通过函数获取子组件对象

<button bind:tap="getMySon" type="warn" plain>获取我的Son</button>

getMySon(){
     let mySon = this.selectComponent(".son");
     //this.selectComponent("#son");//也可以使用ID选择器
     console.log(mySon);
   }

（八）组件的生命周期

生命周期常用的有：created、attached、detached；show、

hide（关于组件所在页面的生命周期）

lifetimes:{
    //创建组件之后执行的函数
    created(){
     //这里不能调用setData函数，但是可以声明组件要使用的属性，供后续生命周期函数使用
     var smallName = "";
     this.setData({
       smallName:"天下无双，谁与争锋！"
     }) //无效,但属性仍存在
    },
    //组件准备完毕，挂在到页面后执行的函数
    //1、这里可以使用setData函数，并且可以使用created函数中声明的属性
    attached(){
       this.setData({
         'people.name':this.data.smallName,
       })
    },
    //组件被销毁，会调用该函数
    detached(){
      console.log("我是你的组件，我被你销毁了，啊啊！");
    },
    //组件所在页面从后台切前台的时候被调用
    show(){
      console.log("我被人从后台切到前台了！");
    },
    //组件被从前台切到后台，或者切换到其他tabBar页面时会被调用！
    hide(){
      console.log("我被人从后台切到前台了！");
    }
    
  }

• 如何模拟组件被销毁？

<scanme wx:if="{{isShow}}"> </scanme>
<!--通过函数改变isShow的值即可，控制销毁还是重建！-->
<button bind:tap="destroyComponent">销毁组件</button>

（九）使用Component开发页面（Page）

Pages文件夹中的页面中js中Page可以用Component来代替，这样也可以开发页面，使用组件开发页面可以实现更强大的功能！

1、若用此方式，配置项中要和组件的配置项一致，同时json文件中一定要有usingComponent配置项。

2、js文件中声明的方法要跟Component一样放在methods配置项中

3、可以使用Properties配置项来接收从其他页面跳转过来时的数据。

• Component({
    methods:{
     //方法应该放在此处
    },
      data:{
        isShow: true //控制组件的生死！
      },
      //使用properties来接收从其他页面跳转过来的数据
      properties:{
        name:String,
        age: Number,
      },
      //监视页面，当数据发生变化时，从控制台展示数据
      observers:{
        "name,age":function(newName,newAge){
          console.log(newName,newAge);
        }
      }
      
  })

  （十）组件逻辑的复用

如果我们创建的很多组件中都有相同的逻辑，将一样的逻辑多次书写，不仅会造成内容的重复，造成代码冗余，更重要的是咱们累呀！哈哈！

使用behavior可以实现组件代码复用；这里假设我们要在组件scanyou中使用组件scanme的逻辑。

一个behavior中可以包含多个属性、方法、声明周期函数等（一句话，组件js中有的，这里都可以有）

1、将要复用的代码提取到behavior.js文件（该文件需要自己创建）中

const behavior =Behavior({

 
  data: {
    people:{
      name:"陈大炮",
      age: 22
    },
    num: 23
  },
observers:{
  
},
  /**
   * 组件的方法列表
   */
  methods: {
   sendData(){
     this.triggerEvent('giveData',this.data.people);
   }   
  },
  lifetimes:{
    //创建组件之后执行的函数
    created(){
     //这里不能调用setData函数，但是可以声明组件要使用的属性，供后续生命周期函数使用
     var smallName = "";
     this.setData({
       smallName:"天下无双，谁与争锋！"
     }) //无效,但属性仍存在
    },
    //组件准备完毕，挂在到页面后执行的函数
    //1、这里可以使用setData函数，并且可以使用created函数中声明的属性
    attached(){
       this.setData({
         'people.name':this.data.smallName,
       })
    },
    //组件被销毁，会调用该函数
    detached(){
      console.log("我是你的组件，我被你销毁了，啊啊！");
    },
    //组件所在页面从后台切前台的时候被调用
    show(){
      console.log("我被人从后台切到前台了！");
    },
    //组件被从前台切到后台，或者切换到其他tabBar页面时会被调用！
    hide(){
      console.log("我被人从后台切到前台了！");
    }
    
  }
});
//暴露
export default behavior;

2、导入到要使用的组件中

import behavior from "./behavior";

// components/scanme/scanme.js
Component({
  //使用
  behaviors:[behavior]
})

3、注意点：

        （1）当组件内properties、data中单层属性或者方法与behaviors属性、方法发生冲突时，以组件内部属性值为主（就近原则）

        （2）当有对象属性发生冲突时，会组合对象中的属性，成为一个新的对象。

        （十一）引入外部样式

当页面使用某个组件，想要将自己的样式应用到组件上时，需要用到外部样式！

1、在组件js文件中声明，接受到外部样式后的命名：

  //2、使用外部样式,当组件被使用时通过open-class传入外部样式
  externalClasses:['open-class']

2、在父组件（页面组件）中将自己的样式传入（类名）：

<scanme open-class="out-div"> </scanme>

3、在组件中要用到样式之地使用open-class作为类名即可：

<text class="open-class">{{people.name}}</text>

问题：当自己样式和外部样式发生冲突应该如何抉择？

解答：没有规定，需要声明优先级来解决，这里将外部优先级提高：

        两个冲突样式：

/* components/scanme/scanme.wxss */
.in-color{
  color: yellow  !important/*这里给内部样式声明了优先级*/
}

/**index.wxss**/

.out-div{
  color:green
}

故，上面例子，如果两者同时应用了，则以声明优先级的in-color类对应的属性为主！

（十二）使用npm引入外部包

前情提要：小程序现在支持通过npm下载的第三方包（前提是开发者要遵循小程序npm包开发标准），但是下载后的npm包在node_modules中的内容不会被小程序编译，上传，使用，故在使用npm下载完包后，还要多出一步构建的步骤：

1、初始化npm对项目的构建：

npm init -y

• 完成后，项目中会多出如下三个文件：package.json 、package-lock.json 、node_modules

2、使用npm安装vant-webapp组件（该组件仅举例，其支持小程序）

 npm i @vant/weapp -S --production

3、点击工具栏构建按钮，构建：

• 构建完成后，会在项目根目录下生成文件夹miniprogram_npm，其中是构建后的项目包。

（十三）复杂项目下目录结构的整理

当我们的小程序项目大小达到一定规模之后，一定需要对文件夹进行整理，将核心代码放到一个文件夹中等等。这时候我们就需要在project.config.json中进行配置：

首先我们需要将相关文件夹都放在miniprogram中，然后把如下文件夹都移进去作为项目的源码。

这时，小程序当然会报错！因为我们变换结构之后，没有告诉项目，新的项目结构逻辑。

• 更改配置文件project.json如下：

"miniprogramRoot": "miniprogram/", 
"setting": {
    "packNpmManually": true,    
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ]

后两项配置意思为指定npm包json路径，和项目构建后npm包存放位置。packNpmManually意味开启自定义npm包路径。miniprogramRoot指定跟路径所在位置。

（十四）使用组件库（vant）

该组件库是有赞团队开发的使用于小程序的组件库。上面已经将该库引入并npm构建完毕了！

A、图片组件

下面我们参考文档中图片组件内容进行演示​​​​​​​Vant Weapp - 轻量、可靠的小程序 UI 组件库

1、引入

"usingComponents": {
  "van-image": "@vant/weapp/image/index"
}

2、使用

<!-- 这里注意，src以项目跟路径为/，则要使用静态图片不需要./直接/即可 -->
<van-image width="333" height="250" src="/static/suolong.jpg" />

3、圆角

<van-image width="333" height="250" 
round
src="/static/suolong.jpg" />

4、利用插槽使用加载中组件

 "van-loading": "@vant/weapp/loading/index"

         4.1、在组件中添加属性，并使用加载组件：

<van-image width="333" height="250" 
round
use-loading-slot
src="/static/suolong.jpg" >
<van-loading slot="loading" type="spinner" size="20" vertical />
</van-image>

5、绑定点击事件

<van-image width="333" height="250" 
src="/static/suolong.jpg" 
bind:click="showMeInto">
</van-image>

showMeInto(){
    console.log("我最喜欢02了！")
  }

B、按钮组件

使用步骤略过，这里重点介绍如何使用外部样式引入，参考：Vant Weapp - 轻量、可靠的小程序 UI 组件库

1、首先关闭最新小程序样式，因为小程序最新样式无法完全覆盖。app.js中删除如下选项：

 "style": "v2",

 2、根据文档使用custom-class传入页面需要组件实现的属性：

<van-button type="primary" custom-class="me">主要按钮</van-button>

.me{
  background-color: yellow;
}

这样就可以应用外部属性了。

注意：若要在组件中使用vant则需要关闭组件的样式隔离，在js文件中将：

  // 解除样式隔离
  options:{
    styleIsolation:'shared'
  },

因为解除了样式隔离，所以要注意，不要让组件被页面同名样式污染。

3、可以使用全局变量来应用样式：

首先在app.wxss中声明全局变量：

page{
  --color: green;
}

在局部样式中使用：

  color: var(--color) !important;