小程序8

1.function的参数arguments

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：

length: 传递给函数的参数个数。

[index]: 通过 index 下标可以遍历传递给函数的每个参数。

示例代码：

var a = function(){

    console.log(3 === arguments.length);

    console.log(100 === arguments[0]);

    console.log(200 === arguments[1]);

    console.log(300 === arguments[2]);

};

a(100,200,300);

或者用var func = function (a,b,c) { }

 

2.JSON

stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。

parse(string): 将 JSON 字符串转化成对象，并返回该对象。

 

3.{

  "pageOrientation": "auto"

}

如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。

 

4.自定义组件，一般就是组合控件。写法和正常的写页面是一致的。

区别：

①只不过要在.json添加属性

{

  "component": true

}

②在.js文件中不能使用Page({....}),而应该改成Component({...})

然后在使用这个组件的地方的.json中进行注册

"usingComponents": {

      "set-tab-bar": "components/set-tab-bar/set-tab-bar"

}

然后使用的时候就直接将名字作为标签名就可以了。

比如：

//这是定义的组件

<!-- 这是自定义组件的内部WXML结构 -->

<view class="inner">{{innerText}}</view>

<slot></slot>

//然后在使用的地方

<view>

  <!-- 以下是对一个自定义组件的引用 

    向组件中传递的数据的时候就使用和组件中定义的变量保持一致，比如inner-text-->

  <component-tag-name inner-text="Some text">

        <view>这是插入到slot中的内容</view>

  </component-tag-name>

</view>

 

4.组件wxml的slot

在组件的wxml中可以包含 slot 节点，用于承载组件使用者提供的wxml结构。

默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多slot支持

  },

  properties: { /* ... */ },

  methods: { /* ... */ }

})

此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

 

<!-- 组件模板 -->

<view class="wrapper">

  <slot name="before"></slot>

  <view>这里是组件的内部细节</view>

  <slot name="after"></slot>

</view>

 

使用时，用 slot 属性来将节点插入到不同的slot上。

<!-- 引用组件的页面模板 -->

<view>

  <component-tag-name>

    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->

    <view slot="before">这里是插入到组件slot name="before"中的内容</view>

    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->

    <view slot="after">这里是插入到组件slot name="after"中的内容</view>

  </component-tag-name>

</view>

 

自定义组件样式

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。

子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。

继承样式，如 font 、 color ，会从组件外继承到组件内。

除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

#a {

} /* 在组件中不能使用 */

[a] {

} /* 在组件中不能使用 */

button {

} /* 在组件中不能使用 */

.a > .b {

} /* 除非 .a 是 view 组件节点，否则不一定会生效 */

 

可以指定外部的样式类

/* 组件 custom-component.js */

Component({

  externalClasses: ['my-class']

})

<!-- 组件 custom-component.wxml -->

<custom-component class="my-class">

  这段文本的颜色由组件外的 class 决定

</custom-component>

 

使组件接受全局样式

/* 组件 custom-component.js */

Component({

  options: {

    addGlobalClass: true,

  }

})

<!-- 组件 custom-component.wxml -->

<text class="red-text">

  这段文本的颜色由 `app.wxss` 和页面 `wxss` 中的样式定义来决定

</text>