微信小程序中组件components的使用

微信小程序中组件components的使用

1、在微信小程序的根目录中创建components文件夹，并创建相应的目录然后在目录中新建components；下面附上图片

在需要使用该组件的文件夹中的.json文件中

	"usingComponents": {
    	"shop-msg": "/components/shop-msg/shop-msg"
  	}
//需要使用多个组件的时候
{
  "usingComponents": {
    "w-swiper": "/components/w-swiper/w-swiper",
    "w-recommend": "./childCpns/w-recommend/w-recommend",
    "w-feature": "./childCpns/w-feature/w-feature",
    "w-tab-control": "/components/w-tab-control/w-tab-control",
    "w-goods": "/components/w-goods/w-goods",
    "w-back-top": "/components/w-back-top/w-back-top"
  }
}

	//在wxml中使用的话
	<shop-msg  />

组件中的样式只需要在组件的wxss中配置即可

组件化开发怎么能少的了js文件的配置和参数的传递呢

	//组件的wxml中
	<view class='goods-item' wx:for="{{ list}}" wx:key="index" data-id="{{ index}}"  bindtap='get_msg'>{{ item }}</view>
	//组件的js中
	Component({
	  properties: {
	    list: {      //调用处传来的参数
	      type: Boolean,	// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
	      value: [] 	// 属性初始值（可选），如果未指定则会根据类型选择一个
	    }
	  },
	  data: {
	  },
	  externalClasses: ["icon"],
	  methods: {
	    get_msg(){
	      //组件中事件
	      // 1.获取iid
	      const id = e.currentTarget.dataset.id;
	      // 2.跳转到对应的路径
	      wx.navigateTo({
	        url: '/pages/detail/detail?id=' + id,
	      })
	      //或者传递信息
	      this.triggerEvent('f_get_id', id)   //f_get_id是父组件中需要接受事件的名字
	
	    },
	  }
	})

//在父组件中的wxml
<shop list="{{ list}}" bing:f_get_id="get_id"/>     //get_id是在调用页面的js中实现的方法

//父组件的js中
get_id（a）{
	console.log(a);
}