您好,登录后才能下订单哦!
这篇文章主要讲解了“小程序怎么自定义开发组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序怎么自定义开发组件”吧!
第一种方式,下面是一个组件的基本组成部分,样式表就不写了,
组件的index.wxml
[html] view plain copy
我是组件
传入组件的值: {{text}}
组件内部的值{{data}}
调用了方法
组件的index.js
[javascript] view plain copy
Component({
properties: {
// 这里定义了组件对外的属性,属性值可以在组件使用时指定
text:{
type:String,
value:''
}
},
data: {
// 这里是一些组件内部数据
data: '我是组件',
show:false
},
methods: {
// 这里是一个自定义方法
show: function(){
this.setData({show:true})
}
}
})
组件的index.json
[javascript] view plain copy
{
"component": true
}
组件写好了,下面是引入写好的组件
页面的index.wxml
[html] view plain copy
下面是组件
按钮
页面的index.js
[javascript] view plain copy
Page({
onReady: function () {
//获得子组件
this.child = this.selectComponent("#child");
},
clickBtn:function(){
this.child.show();
}
})
页面的index.json
[javascript] view plain copy
{
"usingComponents": {
"child": "../child/index"
}
}
这就完成了一个组件.
第二种方式:
组件的index.wxml
[html] view plain copy
我是组件
我是从父组件传的值:{{text}}
我是组件本身的值{{data}}
调用了组件的方法
组件的index.js
[javascript] view plain copy
let data={
text:'',
data:'我是组件本身的值',
show:false
}
let childPanel={
show:function (text) {
let _this=this;
this.setData({
show:true,
text:text
})
}
}
function child() {
let pages=getCurrentPages();
let currentPage=pages[pages.length-1];
this.__page=currentPage;
Object.assign(currentPage,childPanel);
currentPage.childPanel=this;
currentPage.setData(data);
return this;
}
module.exports={
child
}
然后在app.js里引入上面的js文件,如下:
app.js
[javascript] view plain copy
import {child} from './child/index'
APP({child,
...
})
如果给组件写了wxss文件,要在app.wxss里引入,如下:
app.wxss
[css] view plain copy
@import './child/index.wxss'
在需要引入该组件的页面,如下:
[html] view plain copy
按钮
当前页面的js文件:
[html] view plain copy
let app=getApp();
Page({
data:{
data:'父组件传给子组件的值'
},
onLoad:function(){
new app.child();
},
clickBtn:function(){
this.show(this.data.data);
}
})
上面app.js和app.wxss是全局引用,如果想局部引用,也可以把全局的引入写到局部去。
感谢各位的阅读,以上就是“小程序怎么自定义开发组件”的内容了,经过本文的学习后,相信大家对小程序怎么自定义开发组件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。