金狮贵宾会

登录
免费开通

小程序自界说组件实例教程

小程序自界说组件实例教程

一 小程序提供了许多api和基础组件,, ,,,但为镌汰代码的重漂后和提高复用率,, ,,,小程序也提供了自己的代码复用机制:

    小程序复用:页面模版(template),, ,,,组件模版(component,, ,,,使用时用标签的形式)。。。

这两种模版的写法和之前页面的写法是一样的,, ,,,都有四个文件 wxml,, ,,,js,, ,,,wxss, json

二我们在使用基础组件时好比 <view bindtap="" catchtap="" data-name="" id="" class="" ></view> 总会写事务和属性值,, ,,,

自界说组件也一样需要有自己的属性和事务,, ,,,

属性分内下属性和外下属性,, ,,,这两种属性配合设置了组件的样式。。。内下属性可以明确为手机的预装软件。。。外下属性可以明确为手机的应用市肆,, ,,,可以自己手动治理。。。虽然我们也会提供接口供使用者来修改内下属性。。。

三,, ,,,生命周期:

组件也有生命周期函数,, ,,,和页面一样。。。

页面有:onload   onready    onshow    onhide       onunload

组件有:created   attached   ready       detached    move

新建component组件:

四,, ,,,自界说组件,, ,,,这是官方提供的例子

Component({ //自界说组件的专有形式,, ,,,如page页面的page({}),, ,,,app文件的App({})

behaviors: [],

properties: {

myProperty: { // 属性名

type: String, // 类型(必填),, ,,,现在接受的类型包括:String, Number, Boolean, Object, Array, null(体现恣意类型)

value: '', // 属性初始值(可。。。,, ,,,若是未指定章会凭证类型选择一个

observer: function(newVal, oldVal){} // 属性被改变时执行的函数(可。。。,, ,,,也可以写成在methods段中界说的要领名字符串, 如:'_propertyChange'

},

myProperty2: String // 简化的界说方式

},

data: {}, // 私有数据,, ,,,可用于模版渲染

// 生命周期函数,, ,,,可以为函数,, ,,,或一个在methods段中界说的要领名

attached: function(){},

moved: function(){},

detached: function(){},

methods: {

onMyButtonTap: function(){

this.setData({

// 更新属性和数据的要领与更新页面数据的要领类似

})

},

_myPrivateMethod: function(){

// 内部要领建议以下划线开头

this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'

this.applyDataUpdates()

},

_propertyChange: function(newVal, oldVal) {

}

}

})

      在使用组件的页面的json文件中设置

       {  useComponents:{"自界说组件名字":"组件的绝对路径"}}     如{  useComponents:{"p":"../page/page"}}

需求:自界说组件中放其他的基础组件。。。

要领:在自界说组件的wxml文件中使用<slot name="">标签

自界说组件:<slot name="test"></slot>,将此标签放入想要安顿的位置。。。

引用页面 :<view style="background: _ _ _" slot="test"></view>//若是想要设置样式的话写在<slot>标签中是无效的。。。

 组件岂论是自界说组件照旧基础组件,, ,,,都有自己的属性,, ,,,事务。。。

小程序自界说组件实例教程

注重:若是组件wxml文件中的slot标签中写了name属性,, ,,,那么就必需在组件的js文件中写上options:{multipleSlots:true},, ,,,否则不起作用。。。

小程序工具提供多类型商城/门店小程序制作,, ,,,可视化编辑 1秒天生5步上线。。。通过拖拽、拼接??榻峁剐〕绦蛏坛且趁,, ,,,所看即所得,, ,,,只需要美工就能做出细腻商城。。。更多小程序市肆请审查:小程序市肆


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,, ,,,由于未联系到知识产权人或未发明有关知识产权的挂号,, ,,,若有知识产权人并不肯意我们使用,, ,,,若是有侵权请连忙联系。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,, ,,,仅系客观性形貌,, ,,,如您需要相识该类商品/服务详细的资讯,, ,,,请您直接与该类商品/服务的提供者联系。。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,, ,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。

KESION 一直通过手艺立异,, ,,,提供产品和服务,, ,,,助力企业向数字化转型,, ,,,通过科技驱动商业刷新,, ,,,让商业变得更智慧!



▼点击进入金狮贵宾会官网相识更多



热门标签
SaaS
上/下篇
  • 关于小程序app.js生命周期的介绍

  • 小程序名称注册规则

换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
小程序自界说组件实例教程 - KESION 金狮贵宾会