小程序组件复用

2021-04-12 22:02:08 阅读：162 来源： 互联网

一.组件是什么

组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块
插件：通常是为了完成某项具体的业务功能而开发的js文件例如：swiper.js,弹框.js，。。。。
类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！例如：jQuery,lodash.js
框架:framework,分是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架
UI框架：boostStrap,Element UI,vant UI,iview,and Design…
javaScript框架：vue.js,React.js,Angular.js

二.小程序组件分类

1. 内置组件：小程序内置的组件，直接拿来就可以使用，无需安装

  例如：view,text,image,button,swiper,switch....

2. 第三方组件:需要安装，引入，再使用

推荐基于小程序的UI框架：vant UI

官方文档地址：https://vant-contrib.gitee.io/vant-weapp/#/intro

如何让小程序支持npm:

生成package.json:npm init -y

安装vant: npm i @vant/weapp -S --production

将 app.json 中的 "style": "v2" 去除

勾选开发者工具-详情–本地设置-npm模块

选择微信开发者工具-工具-构建npm

使用第三方vant组件

第一步：在app.json或当前页面的json文件中的usingComponents引入

第二步：在wxml页面上引入标签

3. 自定义组件:自己开发组件，然后再项目中多处复用，提高开发效率，这也是组件化的核心思想

  - 快速创建一个组件的步骤：

  1. 新建的组件构造器：

Component({

})

	2. 文件类型也有4个:wxml,json,js,wxss

    		3. 在需要的页面xxx.json或全局app.json配置文件中引入自定义组件，例如：cate.json

{
  "usingComponents": {
    "Dialog":"/components/dialog/dialog"
  }
}

将Dialog显示到wxml视图上例如：cate.wxml
```
 <Dialog-box />
```
- 组件之间如何通讯：
  思考一下：在Vue中，如何通过父级组件改变子组件中的值？？？
  
  A.vue
```
import .....
components:{B}

template
	<B ref="b" />
	
mehtods:{
	change() {
	   this.$refs.b.hello()
	}
}
```
  B.vue
```
methods:{
	hello() {...}
}
```

小程序如何获取子组件的实例呢

  ```
  this.selectComponent('选择器名称')
  
  例如： this.dialog=this.selectComponent('#dialog')  //通常写在onLoad
  ```

  

  - 小程序组件通讯实现方式

    - 第一种：父传子

      - 如何传

      ```
        <Dialog-box 
            id="dialog"
            title="订单信息"
            content="订单支付内容"
        />
      ```

      

      - 如何接

      ```
      Component({
       ...
        properties: {
          //要接收的属性
          title:{
            //接收的类型
            type:String,
            //接收的默认值
            value:"此处应该有一个标题"
          },
          content:{
            type:String,
            value:"此处应该是内容"
          }
        },
        ....
      })
      ```

      

    - 第二种：子传父

    ```
    主要通过事件派发，监听模式
    Vue：this.$emit('自定义的事件名',要传递的值)
    小程序：this.triggerEvent('自定义的事件名',要传递的值,事件选项)
    
    
    子派发事件：triggerEvent
     //确定逻辑
        confirm_btn() {
          //向父级派发confirm事件
          this.triggerEvent('confirm','您点击确定啦')
        },
    
    父监听：
    
    <Dialog-box 
          id="dialog"
          title="订单信息"
          content="订单支付内容"
          bind:confirm="myconfirm"
          bind:cancel="mycancel"
      />
    ```

    

    - 第三种：兄弟之间

    ```
    vue兄弟组件传值:bus,vuex
    
    小程序：主要通过利用父级组件当桥梁，来实现兄弟组件通讯
    
    A：父组件：cate
    
      <A bind:A="myA"/>
      <B mynum="{{ num }}"/>
      
      
    B传给C兄弟
    
    B传A:
    
    wxml:
    <view>
      <text>我是A组件-{{ num }}</text>
      <view><button size="mini" bindtap="goToParent">把A的数据发送给B组件</button></view>
    </view>
    
    JS:
      goToParent() {
          this.triggerEvent('A',this.data.num)
        }
      }
      
      
      
    A传C  
      <A bind:A="myA"/>
      
        myA(e) {
        this.setData({
          num:e.detail
        })
      }
      
     C再将A接的值再接收:
     
     //父级代码：cate
       <B mynum="{{ num }}"/>
     
     
     C内部的代码：
    Component({
      properties: {
        mynum:{
          type:Number,
          value:99
        }
      },
    })
    
    <view>
      <text>我是B组件--{{ mynum }}</text>
    </view>
    ```

标签：vant,程序,复用,js,json,num,UI,组件
来源： https://blog.csdn.net/mwm2378/article/details/115643109

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9