美文网首页
2021-09-24 字节小程序初上手

2021-09-24 字节小程序初上手

作者: 走花鹿 | 来源:发表于2021-09-24 14:18 被阅读0次

今天看了一下文档,和微信小程序很像,顺便做一些记录。


启动程序

App()

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

params 参数说明:

属性 类型 描述 触发时机
onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
onError Function 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
onPageNotFound Function 页面不存在监听函数 当小程序要打开的页面不存在时,触发事件的回调函数
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问

启动页面

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

params 参数说明:

属性 类型 描述
data Object 页面的初始数据
onLoad Function 生命周期函数--监听页面加载
onReady Function 生命周期函数--监听页面初次渲染完成
onShow Function 生命周期函数--监听页面显示
onHide Function 生命周期函数--监听页面隐藏
onUnload Function 生命周期函数--监听页面卸载
onResize Function 生命周期函数--监听页面尺寸变化,在直播小程序卡片、POI 详情页商品入口的七分屏场景中使用
onPullDownRefresh Function 页面相关事件处理函数--监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件的处理函数
其他 Any 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问

如果不注册 onShareAppMessage,会默认隐藏右上角胶囊按钮菜单里的分享按钮

示例代码:

// index.js
Page({
  data: {
    text: "This is page data.",
  },
  onLoad: function (options) {
    // Do some initialize when page load.
  },
  onReady: function () {
    // Do something when page ready.
  },
  onShow: function () {
    // Do something when page show.
  },
  onHide: function () {
    // Do something when page hide.
  },
  onUnload: function () {
    // Do something when page close.
  },
  onResize: function () {
    // Do something when page resize in seven split screen
  },
  onPullDownRefresh: function () {
    // Do something when pull down.
  },
  onReachBottom: function () {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function () {
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function () {
    this.setData(
      {
        text: "Set some data for updating view.",
      },
      function () {
        // this is setData callback
      }
    );
  },
  customData: {
    foo: "bar",
  },
});

相关文章

网友评论

      本文标题:2021-09-24 字节小程序初上手

      本文链接:https://www.haomeiwen.com/subject/mkqzgltx.html