微信小程序中组件components的使用
1、在微信小程序的根目录中创建components文件夹,并创建相应的目录然后在目录中新建components;下面附上图片![目录配置图片](https://i-blog.csdnimg.cn/blog_migrate/d81b2944b877f53ccf333dd8f3217412.jpeg)
![注意新建components前创建文件夹](https://i-blog.csdnimg.cn/blog_migrate/74ed75c885cce2b28f7bb8cb9358d642.jpeg)
在需要使用该组件的文件夹中的.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"
}
}
<shop-msg />
组件中的样式只需要在组件的wxss中配置即可
组件化开发怎么能少的了js文件的配置和参数的传递呢
<view class='goods-item' wx:for="{{ list}}" wx:key="index" data-id="{{ index}}" bindtap='get_msg'>{{ item }}</view>
Component({
properties: {
list: {
type: Boolean,
value: []
}
},
data: {
},
externalClasses: ["icon"],
methods: {
get_msg(){
const id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/detail/detail?id=' + id,
})
this.triggerEvent('f_get_id', id)
},
}
})
<shop list="{{ list}}" bing:f_get_id="get_id"/>
get_id(a){
console.log(a);
}