微信小程序(14)--上传图片公用组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序(14)--上传图片公用组件相关的知识,希望对你有一定的参考价值。

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

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

上传图片公用组件

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

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进入父组件
    }
  }
})

 





以上是关于微信小程序(14)--上传图片公用组件的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序组件库解析:图片上传与排序组件yImgPro

微信小程序 - 上传图片组件

微信小程序图片上传组件“mp-uploader“(weui)

微信小程序图片上传组件“mp-uploader“(weui)

微信小程序实现文件上传

微信小程序图片压缩