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 否则会无法显示，一个小坑，不是驼峰命名法，╮(╯▽╰)╭

设置组件的内容


    
       {
   {innerText}}
    
    复制代码

设置组件的css

.inner {  color: red}复制代码

通过设置页面的json数据，进行对组件的引用

{  "usingComponents": {    "component": "/component/component"  }}复制代码

设置component组件引用component文件夹下单component组件内容对组件进行引用


      
     
    复制代码

设置文字内容为some text，如果


      
     
    复制代码

设置的话，将会设置为默认的。

组件模板和样式

类似于页面，自定义组件拥有自己的wxml和wxss样式。

组件模板

组件模板的写法和页面模板相同，组件模板和组件数据组合生成节点树。将被插入到组件的引用位置上。组件模板中提供slot，用于承载组件引用时的子节点，即组件引用的时候，其内部的子节点，将会插入到slot节点内部组件的wxml文件如下


    
       {
   {innerText}}  这是内部节点
    复制代码

page的wxml文件如下

编译后即可生成

模板和数据绑定

使用数据绑定，向子组件的属性动态的传递数据即，向模板传递数据设置模板的wxml

设置模板的js文件

Component({  properties: {    // 这里定义了innerText属性，属性值可以在组件使用时指定    propA: {      type: String,      value: '1'    },    propB: {      type: String,      value: '2'    }  },  data: {    // 这里是一些组件内部数据    someData: {}  },  methods: {    // 这里是一个自定义方法    customMethod: function () { }  }})复制代码

设置page的wxml文件

完成对组件的使用。

设置组件的slot

slot为子节点的承载点。在Component函数中设置options对象的multipleSlots属性为true，确保支持多slot的支持即

options: {    multipleSlots: true  // 在组件中支持多slot子节点的支持  }复制代码

对于多个slot使用name来进行区分定义wxml文件如下


    
    
       {
   {propA}}  {
   {propB}}  这是内部节点
     
    复制代码

接着定义page的wxml文件

完成，至此完成多个节点的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


    
    
       {
   {propA}}  {
   {propB}}  这是内部节点
     
    复制代码

wxss

:host {  color: red}复制代码

page如下 wxml如下

wxss如下

.my-class {  color:yellow}复制代码

显示为黄色，因为默认的权重低于外部样式表

全局样式

设置addGlobalClass为true即可，当设置addGlobalClass的时候，其组件定义的css无效，只有外部的class影响，除此之外都不影响