由于以前主要写的是 app 和 pc 网页，对于小程序的接触比较少，最近由于公司接了几个小程序的项目，不可避免的要去学习小程序的一些语法和坑，在这里把这些经验总结出来分享给大家，希望对大家在日常的工作中有一定的帮助
页面使用自定义组件
- 1.创建自定义组件(component 文件夹下面)
类似于页面，一个自定义组件由 .json .wxml .wxss .js 4 个文件组成。要编写一个自定义组件，首先需要在 .json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：
{
"component": true//表示可以被使用成组件
}
- 2.在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。
Component({
behaviors: [],
properties: {
myProperty: {
// 属性名
type: String,
value: '',
},
myProperty2: String, // 简化的定义方式
},
data: {
}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function() {
},
moved: function() {
},
detached: function() {
},
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function() {
}, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() {
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function() {
},
hide: function() {
},
resize: function() {
},
},
//小程序的方法都写在这里面
methods: {
onMyButtonTap: function() {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
});
},
// 内部方法建议以下划线开头
_myPrivateMethod: function() {
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData',
});
},
_propertyChange: function(newVal, oldVal) {
},
},
});
- 3.然后在需要使用自定义组件的页面文件夹.json 文件里面添加下面的代码
{
// 表示使用自定义组件
"usingComponents": {
//自定义组件的路径
"component-tag-name": "path/to/the/custom/component"
}
}
- 4.这样就可以进行自定义组件的使用了，例如
<view>
/*dialog代表的就是自定义的组件*/
<dialog></dialog>
</view>
自定义组件父子之间传值
- 1.父组件向子组件传值(如果用过 vue 的话会发现，和 vue 的语法很是类似)
<view>
<!-- 传变量采用对象语法 -->
<dialog title="{
{title}}"></dialog>
<!-- 传固定的值 -->
<dialog title="我是标题"></dialog>
</view>
- 2.值是传过去了，子组件怎么接收呢，类似 vue 的 props，是在 properties(vue 中的 props)中进行接收操作的
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定,还可以在这里面进行值得类型验证
title: {
type: String, //值的类型，如果传的值不是此类型会报错
value: '我是一个标题', //默认值
required: true, //必须传，如果不传会报错
},
},
data: {
title: '',
},
//组件的初始化生命周期
ready() {
//使用setData方法进行设置值，这样就行
this.setData({
title: title });
},
});
自定义组件子组件向父组件传值(比如，我在子组件中点击了一个关闭按钮，要传递一个 false 状态过去)
- 1.事件触发
methods:{
change(){
//意思就是在点击关闭的时候，发射一个自定义事件过去，顺便把数据捎带过去
//这里的this.triggerEvent相当于一个发射器 发射一个事件给父组件
//（myevent）第一个参数是自定义事件，{msg:123}第二个参数是要传递的数据
this.triggerEvent('myevent', {
show:false});
}
}
- 2.父组件定义自定义事件接收
<!--子组件点击事件后传到父组件，父组件所处理数据的事件onMyEvent -->
<dialog bind:myevent="onMyEvent"></dialog>
-
- 父组件之中，自定义的事件执行就行了
methods:{
onMyEvent(e){
console.log(e.detail.show)//false,这样数据就传递过来了
}
}
如果有错误的地方欢迎大家来指出，大家一起来进步