百度小程序开发总结

1，template 引用

涉及到页面布局相同，内容不同的可以用template引用

方式一：

<import src="./person-card.swan" />
<template is="person-card" data="{{person}}" />

方式二：

<include src="header.swan" />

2.filter过滤器

Filter 文件命名方式为:模块名.filter.js;
Filter 通过 export default 方式对外暴露其内部的私有函数;
Filter 只能导出function函数;
Filter 函数不能作为组件的事件回调;
Filter 可以创建独立得模块，也可以通过内联的形式;
Filter 不支持全局变量;
多个 filter 标签不能出现相同的 src 属性值， module 属性的值也是标识模块的唯一 id 。

用法：

// maxVal.filter.js
export default {
 maxin: arr => {
 var max = undefined;
 for (var i = 0; i < arr.length; ++i) {
 max = max === undefined ?
 arr[i] :
 (max >= arr[i] ? max : arr[i]);
 }
 return max;
 }
};

// index.js
Page({
  data: {
    array: [1, 3, 6, 8, 2, 0]
 }
});

<!-- swan模版 -->
<view>{{swan.maxin(array)}}</view>
<filter src="./maxVal.filter.js" module="swan"></filter>

3.公共css文件导入

/* index.css */
@import "header.css";

注意：为了兼容iPhoneX底部安全区，我们提供了一组兼容样式直接用

swan-security-padding-bottom这个类

<view class="swan-security-padding-bottom">test</view>
<!--在iPhoneX等机型下，该view节点会自动获得一个“padding-bottom:34px”的样式-->

4. 自定义组件

组件是小程序里面顶顶好用的东西了

1，创建组件

<!-- 自定义组件内部的模板 (custom.swan) -->

<view class="name" bindtap="tap">
 {{name}}{{age}}
</view>

// 自定义组件逻辑 (custom.js)
Component({
    properties: {
        // 定义了name属性，可以在使用组件时，由外部传入。此变量可以直接在组件模板中使用
 name: {
 type: String,
 value: 'swan',
 }
 },
 data: {
 age: 1
 },
 methods: {
 tap: function(){}
 }
})

2.调用

// 页面json配置 home.json
{
    "usingComponents": {
 "custom": "/components/custom/custom"
 }
}

<!-- 页面模板 (home.swan) -->
<view>
 <!-- 在页面中对自定义组件进行引用 -->
 <custom name="swanapp" age='18'></custom>
</view>
3,组件slot插槽声明,这个东西还没理解透彻,,扎耳挠腮ing

<!-- 组件中的定义 -->

<view>
    <slot name="slot1"></slot>
 <slot name="slot2"></slot>
</view>

<!-- 使用组件的页面或者组件 -->
<view>

<custom-component>
        <view slot="slot1">我会被插入到组件上方</view>
 <view slot="slot2">我会被插入到组件下方</view>
</custom-component>

百度小程序开发总结

猜你喜欢