百度小程序开发总结

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>