前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >百度小程序开发总结

百度小程序开发总结

作者头像
用户3055976
发布2019-07-04 12:13:21
5950
发布2019-07-04 12:13:21
举报
文章被收录于专栏:知道一点点

1,template 引用

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

方式一:

代码语言:javascript
复制
<import src="./person-card.swan" />
<template is="person-card" data="{{person}}" />

方式二:
代码语言:javascript
复制
<include src="header.swan" />

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

用法:

代码语言:javascript
复制
// 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;
    }
};
代码语言:javascript
复制
// index.js
Page({
  data: {
    array: [1, 3, 6, 8, 2, 0]
  }
});
代码语言:javascript
复制
<!-- swan模版 -->
<view>{{swan.maxin(array)}}</view>
<filter src="./maxVal.filter.js" module="swan"></filter>
代码语言:javascript
复制
3.公共css文件导入
代码语言:javascript
复制
/* index.css */
@import "header.css";
代码语言:javascript
复制
注意:为了兼容iPhoneX底部安全区,我们提供了一组兼容样式直接用
代码语言:javascript
复制
swan-security-padding-bottom这个类
代码语言:javascript
复制
<view class="swan-security-padding-bottom">test</view>
<!--在iPhoneX等机型下,该view节点会自动获得一个“padding-bottom:34px”的样式-->

4.  自定义组件

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

1,创建组件

代码语言:javascript
复制
<!-- 自定义组件内部的模板 (custom.swan) -->
代码语言:javascript
复制
<view class="name" bindtap="tap">
    {{name}}{{age}}
</view>
代码语言:javascript
复制
// 自定义组件逻辑 (custom.js)
Component({
    properties: {
        // 定义了name属性,可以在使用组件时,由外部传入。此变量可以直接在组件模板中使用
        name: {
            type: String,
            value: 'swan',
        }
    },
    data: {
        age: 1
    },
    methods: {
        tap: function(){}
    }
})
代码语言:javascript
复制
2.调用
代码语言:javascript
复制
// 页面json配置 home.json
{
    "usingComponents": {
        "custom": "/components/custom/custom"
    }
}
代码语言:javascript
复制
<!-- 页面模板 (home.swan) -->
<view>
    <!-- 在页面中对自定义组件进行引用 -->
    <custom name="swanapp" age='18'></custom>
</view>
3,组件slot插槽声明,这个东西还没理解透彻,,扎耳挠腮ing
代码语言:javascript
复制
<!-- 组件中的定义 -->
代码语言:javascript
复制
<view>
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>
</view>
代码语言:javascript
复制
<!-- 使用组件的页面或者组件 -->
<view>
代码语言:javascript
复制
<custom-component>
        <view slot="slot1">我会被插入到组件上方</view>
        <view slot="slot2">我会被插入到组件下方</view>
</custom-component>
代码语言:javascript
复制
代码语言:javascript
复制
代码语言:javascript
复制
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档