美文网首页
微信小程序(三)

微信小程序(三)

作者: HeroXin | 来源:发表于2018-06-11 22:40 被阅读0次

小程序自定义组件使用

第一步:创建自定义组件

  创建compoents目录,在该目录下创建要复用的组件,例如:dialog组件

 其中dialo.js参数说明:

 properties:接收父级传递过来的值

   例如:
        properties: {
           title:{
             type:String,
             value:"标题"
           },
           content:{
             type:String,
             value:"内容"
           },
           cancelText:{
             type:String,
             value:"取消"
           },
           confirmText:{
             type:String,
             value:"确定"
           }

        }

第二步:如何引入组件

例如:在login页面中引入dialog组件

在dialog.json中引入

例如:

        {
            "usingComponents":{
                "dialog":"/components/dialog/dialog"
            }
        }

然后再dialog页面上使用dialog组件:

    例如:

          <dialog id="dialog"
                title="这是一个标题"
                bind:confirmEvent="_queding"
                bind:cancelEvent="_quxiao"
        ></dialog>

注意:
如何派发事件: this.triggerEvent('自定义事件名',要传递的数据);

     triggerEvent相当于vue的$emit

 例如: this.triggerEvent('confirmEvent',{name:"确定"});

如何监听事件:用bind监听派发过来的事件 相当于vue中的@

           例如:   bind:confirmEvent="_queding"

小程序支持单slot和多slot::与vue类似

    参考:[https://developers.weixin.qq.com/miniprogram/dev/framework/custom- 
    component/wxml-wxss.html] 
   (https://developers.weixin.qq.com/miniprogram/dev/framework/custom- 
   component/wxml-wxss.html)

数据持久化:

 cookie,H5本地存储(localstrorage,sessionStorage),webSql

相关文章

网友评论

      本文标题:微信小程序(三)

      本文链接:https://www.haomeiwen.com/subject/kkskeftx.html