字节跳动小程序笔记小结

字节跳动小程序note

缘由

公司想要开发今日头条小程序，争取站在风口上

官方文档

介绍

目录结构

大体跟小程序一致

小程序主体由3个单文件组成

文件	必填	作用
app.js	是	小程序入口逻辑
app.json	是	小程序全局设置
app.ttss	是	小程序公共样式

一个小程序页面由下面4个文件组成：

文件	必填	作用
js	是	页面逻辑
json	否	页面配置
ttss	否	页面样式
ttml	是	页面结构

逻辑层

启动程序

App(params) 是框架启动小程序的入口函数，需要开发者可以通过App(params)的参数指定小程序的生命周期函数和其他一些自定义参数。

let app = getApp() 获取App实例

启动页面

page(params) 是进入某个页面的时候会执行的页面入口函数，params是一个object类型的参数，定义了页面初始数据，生命周期钩子函数，事件处理函数等。

页面路由

框架以栈的形式维护了当前的所有页面。

• 跳转标签 <navigator url="跳转地址" open-type="跳转方式"></navigator>
• 方法跳转
  • tt.navigateTo({url: ''})
  • tt.redirectTo({url: ''})
  • tt.switchTab({url: ''})
  • tt.reLaunch()

文件作用域

在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

需要注意的是：

• exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
• 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

视图层

TTML

• 数据绑定 {{}}

• 列表渲染 tt:for index item

• 条件渲染 tt:if

• 模板

  <template name="tplName"> <view></view></template>

  • 有自己的作用域，只能使用data传入的数据

• 事件

  <view bindtap="add">{{count}}</view>
  Page({
      data: {
          count: 1
      },
      add: function(e) {
          this.setData({
              count: this.data.count + 1
          })
      }
  })
  

自定义组件

---

后续更新笔记