• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序中的自定义组件以及相关的坑

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Step1

我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件,因此,我们在 components 组件中新建一个 home 文件夹来存放我们的弹窗组件,在 home 下右击新建 Component 并命名为 home 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时你的项目结构应该如下图所示:


 

 

Step2

组件初始化工作准备完成,接下来就是组件的相关配置,首先我们需要声明自定义组件,也就是将 dialog.json 中 component 字段设为 true :

{
  "component": true,        // 自定义组件声明
  "usingComponents": {}     // 可选项,用于引用别的组件
}

 

Step3

编写组件这里就不在演示了

 

step4

截至目前为止,你应该完成了一个自定义弹窗组件的大部分,可是你保存后并没有发现任何变化,因为我们还需要在 index.wxml 文件中引入它!

首先需要在 index.json 中引入组件:

{
    "usingComponents": {
        "home": "/components/home/index"
    },
    "navigationBarTitleText": "首页"
}

这里切记引入组件一定要加  /  要不然会报各种奇怪的错误

然后我们在 index.wxml 中引入它

<home></home>

 

二、 父组件向子组件传递数据

父组件

<annicate bindtap='detailFun' wx:for="{{notice_list}}" wx:key="index" jsonDate="{{item}}"></annicate>

子组件

Component({
    properties: {
        status: {
            type: String,
            value: 0,
        },
        bastList: {
            type: Object,
            value: [],
        }
    },
    data: {

    }
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-页面路由发布时间:2022-07-18
下一篇:
怎么封装微信小程序的数据请求发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap