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.jsexport 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.jsPage({ 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>转载于:https://www.cnblogs.com/937522zy/p/11127957.html
