溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“微信小程序怎么制作組件”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序怎么制作組件”文章吧。
第一種方式，下面是一個組件的基本組成部分，樣式表就不寫了，
組件的index.wxml
[html] view plain copy
組件的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
組件的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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
