微信小程序（14）--上传图片公用组件

Posted 2020-12-04

想想将近半年没有打开博客园了，也将近半年没有留意阅读量是否又增长了。是啊，这半年来确实没有坚持记录，换了新工作，适应新的团队，新的项目，每天都很忙碌，但确实很充实。这不，这周末终于有勇气强迫自己重新写写博客了。

这周整理了一下做微信小程序页面时遇到的一些问题，先说说常见的上传图片吧。

上传图片公用组件

首先要了解的是父子传参。

1.A组件为父组件，B组件为子组件，以下是A组件向B组件传参：

在A组件的json中写入：

{
  "component": true,
  "usingComponents": {
    "componentB":"../common/chooseImage/index"
  }

}

在A组件的wxml中写入：

<view>我是组件A</view>
<view>
   <view>子组件内容：</view>
   <componentB paramGetB=‘我是A向B中传入的参数‘> </componentB>
</view>

在B组件的js中写入：

Component({
  behaviors: [],
  properties: {
    paramGetB:String    //properties中定义A组件要传过来的参数类型,A组件向B组件传参，实际上就是在A组件中引入B组件的时候，
带上一个属性paramGetB，并且给其赋值，然后B组件通过这个属性名称paramGetB，获取其值
  },
  data: {
  }, // 私有数据，可用于模版渲染
  methods: {
  }
})

在B组件的wxml中写入：

<view style=‘text-align:center;‘>我是组件B</view>
<view>A中传入的参数：{{paramGetB}}</view>

2.A组件为父组件，B组件为子组件，以下是B组件向A组件传参：

在父组件A中wxml:

<view>
   <view>A组件内容：</view>
   <view>B组件传入参数：{{paramGetA}}</view>
   <componentB bind:myevent="onMyEvent"> </componentB>   //myevent就是绑定的触发事件
 </view>

在父组件A中js:

Component({
  data: {
     paramGetA:‘‘
  }, // 私有数据，可用于模版渲染
  methods: {
    onMyEvent:function(e){
      this.setData({
        paramGetA: e.detail.paramGetA
      })
    }
  }
})

在子组件B中wxml:

<view >
  <button bindtap=‘changeEvent‘>向A中传入参数</button>
</view>

在子组件B中js:

Component({
  behaviors: [],
  properties: {
    paramGetB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染
  methods: {
    changeEvent:function(){
      this.triggerEvent(‘myevent‘, { paramGetA:123});    //this.triggerEvent就是按钮点击之后执行的事件，触发myevent事件，传入参数paramGetA进入父组件
    }
  }
})