小程序 组件操作

在小程序开发中，难免会遇到一些重复的显示功能，避免浪费开发资源就需要把公共的部分做成共享的功能，也就是组建。

在跟目录中，创建component目录，用于存放组件。

在component下创建组件文件夹。与页面一致包含四个文件。

在组件中编写的内容与页面中是一样的方式。

在其他页面调用时，需要在其他页面中的json文件下声明。

{
  "usingComponents": {
    "v-kap":"/component/kap/kap"  # 在调用的父页面json中，v-kap是父页面给组件起的名字，后面跟引用的组件路径。
  }
}

在父页面中，只需要使用:

　　<v-kap></v-kap>  # 就可以显示组建中的内容了

 

在小程序中 js文件最外层是Component 而在页面中最外层是 Page

在小程序组件中，定义方法，需要放到method里。

// pages/kap/kap.js
Component({
  data:{
    name: 'xxxx'
  },
  properties:{
    userinfo: {
      type: Object,
      value: ''
    }

  },
  onLoad:function(){
  },
  methods:{
    preview(res){  # 组件中的方法，需要放在methods，组件在被调用执行方法才可生效
      var url = res.currentTarget.dataset.src
      console.log(url)
      wx.previewImage({
        urls:[url],
      })
    }
  },
 
})