Baidu small program development summary

1, template reference

Related to the same page layout, different content can be referenced by template

method one:

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

方式二：

< The include the src = "header.swan" />

 2.filter filter

Filter file is named: module name .filter.js;
Filter by export default way of external exposure of its internal private function;
Filter function can only export function;
Filter event callback function can not be used as components;
Filter module can be created independently too, may be in the form of inline;
Filter does not support global variables;
A plurality of identical filter tags not appear src attribute value, the attribute value is the identification module unique id module.

usage:

// 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. Public css file import

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

Note: For compatibility iPhoneX the bottom of the safe area, we offer a set of compatible styles directly

swan-security-padding-bottom class

< View class = "Security-Swan-padding-bottom"> Test </ view> 
<- iPhoneX in other models, the node will automatically get a view! "Padding-bottom: 34px" style ->

4. The custom component

Component is a small program which Dingding useful things

1, create components

<! - definition of internal self-assembly template (custom.swan) ->

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

// custom component logic (Custom.js) 
the Component ({ 
 Properties: { . // defines the name attribute may be used during assembly, the variable passed from an external component may be used directly in the template name: { type: String , value: 'Swan', } }, Data: { Age: . 1 }, Methods: { TAP: function ( ) {} } })

2. Call

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

<! - page template (home.swan) -> 
< View> <! - custom components referenced in the page -> < Custom name = "swanapp" Age = '18 '> </ Custom> </ View> . 3, the socket assembly slot statement, this thing is not a thorough understanding ,, ing ears pierced flexible gills

<! - component definitions ->

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

<! - page or component uses components -> 
< View>

< Custom-Component> < View slot = "slot1,"> I is inserted into the upper assembly </ View> < View slot = "slot2,"> I would be inserted under the assembly </ View> </ Custom-Component>

Baidu small program development summary

Guess you like