飞书小程序

# 飞书小程序

# 注意事项

• 小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等
• 所有组件与属性都是小写，以连字符`-`连接
• 事件传参时 以 data- 开头，多个单词由连字符-连接，不能有大写(大写会自动转成小写)如 data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰 elementType。
• 在 properties 定义中，属性名采用驼峰写法（propertyName）；在 ttml 中，指定属性值时则对应使用连字符写法（my-component property-name="value"），应用于数据绑定时采用驼峰写法（attr="{{propertyName}}"）

# 大致目录结构

├── pages
│   │── home
│   │   ├── home.ttml   //页面结构（必须）
│   │   ├── home.js   //页面逻辑（必须）
│   │   ├── home.json  //页面结构
│   │   └── home.ttss  //页面样式表
│   └── user
│       ├── user.ttml
│       └── user.js
├── app.js       //小程序入口逻辑（必须）
├── app.json    //小程序公共设置，例如：所有页面路径等（必须）
├── app.ttss   //小程序公共样式（必须）
└── project.config.json

# 基本介绍

# 程序与页面

• App
  • pages里配置的第一个值，就是小程序应用的打开时看到的第一个页面。

  // app.json
  {
    "pages":[
      "pages/home/home",
      "pages/index/index"
    ]
  }
  
  • 当小程序启动之后，会触发 app.js里定义的onLaunch方法

  // app.js
  App({
    onLaunch: function () {
      // 小程序启动之后执行
    }
  })
  
• Page

// index.js
Page({

   /**
    * 页面的初始数据
    */
   data: {

   },

    // 事件响应函数
   viewTap: function() {
       this.setData({
       text: 'Set some data for updating view.'
       }, function() {
       // this is setData callback
       })
   }, 

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {

   },

   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {

   },

   /**
    * 生命周期函数--监听页面显示
    */
   onShow: function () {

   },

   /**
    * 生命周期函数--监听页面隐藏
    */
   onHide: function () {

   },

   /**
    * 生命周期函数--监听页面卸载
    */
   onUnload: function () {

   },

   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh: function () {

   },

   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {

   },

   /**
    * 用户点击右上角分享
    */
   onShareAppMessage: function () {

   }
})

# 父子组件

# 父子传值

// father.json

{
    "usingComponents": {
        "child":"/components/child/child"
    }
}

<!-- father.ttml -->

.....
<child parmasss="传递的参数" bindtoParmas="getParmas"></child>
.....

// father.js

Page({
    getParmas(e){
        console.log(e);// e.detail获取传递过来的参数
    }
})

<!-- child.ttml -->

.....
<view class="my-custom-component">
    <view class="content">
        <view>{{parmasss}}</view>
        <button bindtap="toPramas">给父组件传值</button>
    </view>
</view>
.....

// child.js

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        parmasss:{
            type:String,
            value:'properties',
            observer(newval,oldVal, changedPath){
                console.log(newval,oldVal, changedPath)
            }
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        toPramas(){
            // bubbles是否冒泡，默认false;后面两个参数非必要
            this.triggerEvent('toParmas',111111, { bubbles: false });
        }
    }
})

# 插槽slot

// father.json

{
    "usingComponents": {
        "child":"/components/child/child"
    }
}

<!-- father.ttml -->

.....
<child>
    <view>slot的值</view>
    <view slot="aa">name为aa的slot的值</view>
    <view slot="bb">name为bb的slot的值</view>
</child>
.....

<!-- child.ttml -->

.....
<view class="my-custom-component">
    <view class="content">
        <slot></slot>
        <slot name="aa"></slot>
        <slot name="bb"></slot>
    </view>
</view>
.....

# 使用模板

<!-- father.ttml -->

<!-- 引入模板 -->
<import src="../../template/test-template.ttml" />

<!-- 使用模板 -->
<template is="test" data="{{a:'传给模板的a',b:'传给模板的b'}}"/>
<template is="test1"/>

<!-- include 可以将目标文件除了 <template/> 外的整个代码引入，相当于是拷贝到 include 位置 -->
<!-- 被"我是没有template标签包裹的元素"替换 -->
<include src="../../template/test-template.ttml" />

<!-- test-template.ttml -->

<template name="test">
   <view>我是test的模板</view>
   <view>{{a}}</view>
   <view>{{b}}</view>
</template>

<template name="test1">
   <view>我是test1的模板</view>
   <!-- 不显示 -->
   <view>{{b}}</view>
</template>



<view>我是没有template标签包裹的元素</view>

# 使用sjs

<!-- father.ttml -->

<!-- 引入sjs语法 -->
<sjs module="test" src="../../sjs/test-sjs.sjs" />

<!-- 使用引入的sjs -->
<view>{{test.fullName(1,2)}}</view>

<!-- 使用内联的sjs -->
<view>{{test2.fullName(1,'2')}}</view>

<!-- 使用正常的方法--不显示 -->
<view>{{fullName(1,2)}}</view>
<view>双大括号不能使用js定义的方法</view>

<!-- 内联sjs -->
<sjs module="test2">
    function fullName(a, b) {
        return a + b;
    }
    module.exports = { fullName: fullName }
</sjs>

// father.js

Page({
    fullName(a, b) {
        return a + b;
    },
})

// test-sjs.sjs

function fullName(a, b) {
    return a + b;
}
//不能简写（好像不能写es6语法）
module.exports = {
    fullName: fullName
};

# json文件配置

# 页面路由操作

# TTML语法总览

# 事件系统

# App页面函数

# Page页面函数

# Component页面函数

# API总览