Mustache语法
小程序和vue一样提供了插值语法
但是小程序不能调用方法{{xxxx()}}
hidden属性
hidden是所有组件都默认拥有的属性，
hidden与wx:if的区别：
wx:if是控制组件是否渲染,hidden控制显示或隐藏是通过添加hidden属性。
wx:for
除了可以遍历数组还可以遍历字符串和数字
可以遍历字符串
也可以遍历数字
block是一个包装元素，类似与vue的template,不会渲染到页面上,可以定义item和index的名字
wxs
与js基本一致，它不依赖与运行的基础版本库，可以运行在所有版本的小程序。在wxs中不能调用其他js中的函数，也不能调用小程序提供的api
-
wxs可以写在
<wxs>标签中，也可以写在.wxs结尾的文件中。 -
wxs标签的属性 :
– module 当前标签的模块名
– src 应用.wxs文件的路径 -
每一个.wxs或
<wxs>文件都是一个单独的模块,模块中的变量和函数都是私有的，要想到处只能通过module.exports -
<wxs>标签形式
-
.wxs形式
.wxs文件
引入.wxs文件
事件监听
以bind或catch开头如bindtap=“cli”,1.5.0后可以在bind或catch后加:
<view bindtap="cli">+</view>cli(e){console.log(e.target) //事件触发对象console.log(e.currentTarget) //事件处理对象
}
事件冒泡和捕获
捕获:capture-bind:tap=“cli”
组织事件进一步传播 capture-catch:
传参 的两种方式：
1.data-xx 自定义属性
2. mark
<view mark:age="111" data-index="1"> </view>组件化
通过新建Component建立组件
js文件
json文件
自定义组件也可以引用其他的组件，目录不能以wx-开头，在app.json中声明的可以直接在其他页面中使用
组件的样式
组件内的样式不会影响组件外的样式
组件内不能使用Id选择器、属性选择器、标签选择器。
Component对象中可以传入options,options有一个属性stylesolation可以让样式相互影响:
- isolated
- apply-shared
- shared
Component({options:{styleIsolation:"shared" }})组件间的通信
向组件传递properties
父组件向子组件传递值，子组件通过properties来定义传递的值的类型和默认值
支持String,Number,Boolean,Object,Array等
可以通过value设置默认值
<Test name="aaa" age="10"> </Test>Component({properties:{name:{type:Stringvalue:"nnn"},age:{type:Number,value:10} }})向组件传递外部样式 externalClasses
如果希望组件的样式有外部决定可以使用 externalClasses
//外部的css.test{color:red}// 作为属性传递给子组件
<Test color="test"></Test>
//子组件
Component({options:{},externalClasses:['test']
})
<view class="test"></view>
自定义事件
子组件通过triggerEvent来定义
onCli(){this.triggerEvent("triggerCli",{name:"aa"})
}
父组件 bind: xxxx
//子组件为test<Test bind:triggerCli="cli"> </Test>
cli(e){console.log(e)
}
插槽
单个插槽
<Test><view>name</view>
</Test>
//在子组件中使用
<view><slot></slot>
</view>
小程序的默认情况下不支持默认值，需要自己设置
<view class="content"><slot></slot>
</view>
<view class="default"></view>
//在content为空时，设置default为block
.default{display:none
}
.content:empty + .default{display:block
}
多个插槽
<Test><view slot="left">left</view><view slot="center">center<view><Test>使用多个插槽时要在options中把multipleSlots设为true
<view> <slot name="left"></slot>
</view>
<view><slot name="center"></slot>
</view>
behavier
// customBehavior.js
module.exports = Behavior({ properties: { property1: { type: String, value: 'default value' } }, data: { data1: 'data value' }, methods: { method1() { console.log('This is method1'); } }
});
在组件中使用 Behavior
// myComponent.js ,import
const customBehavior = require('./customBehavior.js'); Component({ behaviors: [customBehavior], properties: { componentProperty: { type: String, value: 'component default value' } }, methods: { callMethod() { this.method1(); // 调用来自 Behavior 的方法 console.log(this.property1); // 使用 Behavior 中的属性 } }
});
组件的生命周期和页面的生命周期
组件的生命周期
页面的生命周期
