wxs
一种类似于js的小程序脚本语言。
注意；
- wxs 文件不依赖于运行时的库。
- wxs 与js是另外一门语言。
- wxs于js的运行时完全隔离的，不能调用js中的函数，不能调用小程序提供的api
- 不能进行回调
总结一下
总结一下当前的内容
wxs类似于一门脚本语言，使用的是导出的方式来进行和wxml进行连接，类似于node.js
wxml为页面显示的文件，类似于网页中的html文件
json为配置文件，可以进行对页面内容的配置。
wxss为css配置文件，可以进行css的配置。
js 为进行处理回调，以及页面数据绑定的文件
自定义组件
使用自定义组件，将页面的功能抽象成为组件，在不同的页面中重复使用，将复杂的页面抽象成为多个模块。即达到高内聚，低耦合的目标。
总诉
创建自定义组件
一个组件由json，wxml，wxss，js四个文件组成，要编写一个自定义组件，需要在json中自定义组件声明，声明这一组文件为自定义组件。
json文件如下
{
"usingComponents": {
"component": "/component/component"
}
}
即上方中设置该文件夹为组件文件夹
命名有点不规范，应该命名为components
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: '默认文字',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function () { }
}
})
使用component函数进行设置
ps 这里需要重要component为大写。必须写为Component 否则会无法显示，一个小坑，不是驼峰命名法，╮(╯▽╰)╭
设置组件的内容
<view class="inner">
{{innerText}}
</view>
<slot></slot>
设置组件的css
.inner {
color: red
}
通过设置页面的json数据，进行对组件的引用
{
"usingComponents": {
"component": "/component/component"
}
}
设置component组件引用component文件夹下单component组件内容
对组件进行引用
<view>
<component inner-text="Some text"></component>
</view>
设置文字内容为some text，
如果
<view>
<component></component>
</view>
设置的话，将会设置为默认的。
组件模板和样式
类似于页面，自定义组件拥有自己的wxml和wxss样式。
组件模板
组件模板的写法和页面模板相同，组件模板和组件数据组合生成节点树。将被插入到组件的引用位置上。
组件模板中提供slot，用于承载组件引用时的子节点，即组件引用的时候，其内部的子节点，将会插入到slot节点内部
组件的wxml文件如下
<view class="inner">
<slot></slot>
{{innerText}}
这是内部节点
</view>
page的wxml文件如下
<view>
<component>
<view>这是内部节点</view>
</component>
</view>
编译后即可生成
模板和数据绑定
使用数据绑定，向子组件的属性动态的传递数据
即，向模板传递数据
设置模板的wxml
<view>
<component propA="hello" propB="world">
<view>这是内部节点</view>
</component>
</view>
设置模板的js文件
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
propA: {
type: String,
value: '1'
},
propB: {
type: String,
value: '2'
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function () { }
}
})
设置page的wxml文件
<view>
<component propA="hello" propB="world">
<view>这是内部节点</view>
</component>
</view>
完成对组件的使用。
设置组件的slot
slot为子节点的承载点。
在Component函数中设置options对象的multipleSlots属性为true，确保支持多slot的支持
即
options: {
multipleSlots: true // 在组件中支持多slot子节点的支持
}
对于多个slot使用name来进行区分
定义wxml文件如下
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
<slot name="before"></slot>
{{propA}}
{{propB}}
这是内部节点
<slot name="after"></slot>
</view>
接着定义page的wxml文件
<view>
<component propA="hello" propB="world">
<view slot="after">这是after</view>
<view slot="before">这是before</view>
</component>
</view>
完成，至此完成多个节点的slot的插入
组件样式
组件对应于wxss文件的样式，只对组件内部的wxml节点生效。
注意
- 组件只能使用class
- 组件避免使用后代选择器
:host选择器
使用host选择器，可以设置组件的默认样式
:host {
color: yellow;
}
即上方设置该页面的全部的host值为yellow
外部样式
普通样式和外部样式尽量避免同时使用，因为这样会造成两个类的优先级为未定义的
设置externalClasses 为class的样式。
commpont文件如下
js
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
propA: {
type: String,
value: '1'
},
propB: {
type: String,
value: '2'
}
},
options: {
multipleSlots: true // 在组件中支持多slot子节点的支持
},
externalClasses: ['my-class'] // 设置允许外部样式的my-class的使用
})
wxml
<!-- 这是自定义组件的内部WXML结构 -->
<view>
<slot name="before"></slot>
{{propA}}
{{propB}}
这是内部节点
<slot name="after"></slot>
</view>
wxss
:host {
color: red
}
page如下
wxml如下
<view>
<component propA="hello" propB="world" class="my-class">
<view slot="after">这是after</view>
<view slot="before">这是before</view>
</component>
</view>
wxss如下
.my-class {
color:yellow
}
显示为黄色，因为默认的权重低于外部样式表
全局样式
设置addGlobalClass为true即可，当设置addGlobalClass的时候，其组件定义的css无效，只有外部的class影响，除此之外都不影响
