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>