美文网首页
3.1小程序框架

3.1小程序框架

作者: 棠人科技 | 来源:发表于2020-12-15 17:00 被阅读0次

     一个页面的JS文件主要包括:

    1. data:页面数据

    2. 生命周期函数(钩子函数):自动调用

    3. 页面事件监听函数:自动调用

    4. 用户自定义函数(自定义事件处理程序、其它方法)


    生命周期函数:

       * 生命周期函数--监听页面加载

       * 用途:1. 初始化页面(变量) 2. 请求数据并处理(从服务器端获取页面所需的数)

       */

      onLoad: function (options) {

        // 1. 发起网络请求swiper相关数据

        this.getSwiper()

        // 

        // 3. 发起网络请求articlelist相关数据

        this.getArticleList(1)

        // 4. 将数据处理之后赋值给页面变量

        // console.log("onLoad");

      },

      /**

       * 生命周期函数--监听页面初次渲染完成

       */

      onReady: function () {

        // console.log('onReady')

      },

      /**

       * 生命周期函数--监听页面显示

       */

      onShow: function () {

        // console.log('onShow')

      },

      /**

       * 生命周期函数--监听页面隐藏

       */

      onHide: function () {

        // console.log('onHide')

      },

      /**

       * 生命周期函数--监听页面卸载

       */

      onUnload: function () {

        // console.log('onUnload')

      },

      /**

       * 页面相关事件处理函数--监听用户下拉动作

       */

      onPullDownRefresh: function () {

        // 重新请求swiper的数据并更新data.swiperList

        // 重新请求博文列表的数据并更新data.articleList

        this.page = 1

        this.getSwiper()

        // 3. 发起网络请求articlelist相关数据

        this.getArticleList(1)

      },

      /**

       * 页面上拉触底事件的处理函数

       */

      onReachBottom: function () {

        // page为页面级的变量 

        ++this.page

        this.getArticleList(this.page)

      },

      /**

       * 用户点击右上角分享

       */

      onShareAppMessage: function () {

      },

    相关文章

      网友评论

          本文标题:3.1小程序框架

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