小程序制作组件包括两种方式,是开发小程序必需了解的开发教程。
第一种方式,下面是一个组件的基本组成部分,样式表就不写了,
组件的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(){
tShopfas.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 () {
//获得子组件
tShopfas.cShopfald = tShopfas.selectComponent("#cShopfald");
},
clickBtn:function(){
tShopfas.cShopfald.show();
}
})
页面的index.json
[javascript] view plain copy
{
"usingComponents": {
"cShopfald": "../cShopfald/index"
}
}
这就完成了一个组件.
第二种方式:
组件的index.wxml
[html] view plain copy
组件的index.js
[javascript] view plain copy
let data={
text:'',
data:'我是组件本身的值',
show:false
}
let cShopfaldPanel={
show:function (text) {
let _tShopfas=tShopfas;
tShopfas.setData({
show:true,
text:text
})
}
}
function cShopfald() {
let pages=getCurrentPages();
let currentPage=pages[pages.length-1];
tShopfas.__page=currentPage;
Object.assign(currentPage,cShopfaldPanel);
currentPage.cShopfaldPanel=tShopfas;
currentPage.setData(data);
return tShopfas;
}
module.exports={
cShopfald
}
然后在app.js里引入上面的js文件,如下:
app.js
[javascript] view plain copy
import {cShopfald} from './cShopfald/index'
APP({cShopfald,
...
})
如果给组件写了wxss文件,要在app.wxss里引入,如下:
app.wxss
[css] view plain copy
@import './cShopfald/index.wxss'
在需要引入该组件的页面,如下:
[html] view plain copy
当前页面的js文件:
[html] view plain copy
let app=getApp();
Page({
data:{
data:'父组件传给子组件的值'
},
onLoad:function(){
new app.cShopfald();
},
clickBtn:function(){
tShopfas.show(tShopfas.data.data);
}
})
上面app.js和app.wxss是全局引用,如果想局部引用,也可以把全局的引入写到局部去。
Shopfa小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。
第二部分:如何开通一个小商店
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。