微信小程序学习笔记 (小程序页面学习二逻辑层 page.js 基础食用方法)

最新推荐文章于 2020-06-28 14:08:18 发布

cdhjava

最新推荐文章于 2020-06-28 14:08:18 发布

阅读量602

点赞数 2

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/cdhjava/article/details/80418634

版权

微信小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

目录结构

这是我小程序的目录结构

页面学习

逻辑层(App Service)

   小程序开发框架的逻辑层由 JavaScript 编写。
   逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
   在JavaScript 的基础上，我们做了一些修改，以方便地开发小程序。
    ¤ 增加App和 Page方法，进行程序和页面的注册。
    ¤ 增加getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
    ¤ 提供丰富的API，如微信用户数据，扫一扫，支付等微信特有能力。
    ¤ 每个页面有独立的作用域，并提供模块化能力。
    ¤ 由于框架并非运行在浏览器中，所以JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
    ¤ 开发者写的所有代码最终将会打包成一份JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

page.js

page,js 是指每一个页面的js文件, 名字不一定是page.js, 但是必须和页面的名字一致, 让我们先看看官方对page.js内容的解释

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

哦,原来和那个 app.js 差不多,也是需要有一个函数, 而且和 App() 差不多, 都需要一个object 参数,这个经历过app.js我们也能明白这个参数的意思了, 让我们看看官方的解释

属性	类型	描述
data	`Object`	页面的初始数据
onLoad	`Function`	生命周期函数-监听页面加载
onReady	`Function`	生命周期函数-监听页面初次渲染完成
onShow	`Function`	生命周期函数-监听页面显示
onHide	`Function`	生命周期函数-监听页面隐藏
onUnload	`Function`	生命周期函数-监听页面卸载
onPullDownRefresh	`Function`	页面相关事件处理函数-监听用户下拉动作
onReachBottom	`Function`	页面上拉触底事件的处理函数
onShareAppMessage	`Function`	用户点击右上角转发
onPageScroll	`Function`	页面滚动触发事件的处理函数
onTabitemTap	`Function`	当前是tab页时,点击tab时触发
其他	Any	开发者可以添加任意的函数或数据到object参数中,在页面的函数中用`this` 可以访问

接下来我将对上面的函数进行分步测试 data, onTabitemTap 不做测试, 以后会有演示的

初始化数据

data
说明作为页面的第一次渲染, 传递的是一个对象, data将会以json数据的形式由逻辑层传至渲染层, 所以数据必须是可以转化为json的格式, 字符串, 数字, 布尔值, 对象, 数组, 渲染层的绑定,在渲染层我们再说.
data代码演示
```
data: {
        logs: []
      }
```

生命周期函数

onLoad :
说明页面加载,每个页面仅仅只会调用一次,可以获取打开当前页面的query参数,query没测试到用处,暂时没说明
示例代码

/**
*监听页面加载
*/
onLoad: function () {
    console.log("logs-页面加载");
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
}

运行效果
onLoad

onReady
说明每个页面只会调用一次
示例代码

/**
*生命周期函数监听页面初次渲染完成
*/
onReady: function () {
  console.log("index-onReady");
}

运行效果
onReady

onShow
说明每次打开都会调用一次
示例代码

/**
*生命周期函数-监听页面显示 --- 此页面显示时调用
*/
onShow: function () {
console.log("index-onShow");
}

运行效果
onShow

onHide
示例代码

 /**
*生命周期函数-监听页面隐藏
*/
onHide: function () {
    console.log("index-onHide");
}

运行效果
onHide

onUnload
说明当页面从页面栈中弹出时调用
示例代码

/**
 *生命周期函数-监听页面卸载
 */
onUnload: function () {
    console.log("index-onUnload");
}

运行效果

onUnload

页面相关事件处理函数

onPullDownRefresh
说明下拉刷新
示例代码

/**
 *下拉监听事件
 */
onPullDownRefresh: function () {
    console.log("index-下拉");
}

运行效果
onPullDownRefresh

onReachBottom
说明上拉触底,具体设置在 json 中配置
示例代码

/**
 *页面上拉触底监听事件
 */
onReachBottom: function () {
    console.log("index-上拉触底");
}

运行效果

onReachBottom

onShareAppMessage
说明用户转发, 只有定义了此事件处理函数, 转发菜单才会显示“转发”按钮, 需要return 一个 Object, 自定义转发内容
示例代码
```
/**
 *用户点击右上角转发并选择转发时触发触发
 */
onShareAppMessage: function () {
    console.log("用户点击转发");
    return {
      title : "自定义转发器",
      path : "/pages/index/index"
    }
}
```
运行效果
我先编译没写的, 之后又编译了加上的,可以发现没写这个函数,是没法进行转发操作的,没有返回标题和路径版

返回标题和路径的

onPageScroll
说明页面滚动, 可以接收一个参数参数中的scrollTop表明页面垂直距顶部距离
示例代码

/**
 *在用户滚动页面时触发, 频率极高
 */
onPageScroll: function (scrollTop) {
    console.log("用户滚动页面 已滚动距离->" +scrollTop +"px")
}

运行效果
onPageScroll

事件处理函数

当然在page.js中也可以定义事件处理函数, 只需在渲染层中加入事件绑定即可,当达到触发事件时就会执行对应的处理函数
代码示例
logs.wxml

    <view>
        <button bindtap='buttonTap' >click</button>
    </view>

logs.js

    buttonTap : function(){
        console.log("index-buttonTap");
    }

运行效果
事件处理

Page.prototype.route

route使用方式, 在js文件内通过 this.route 来调用
代码演示

buttonTap : function(){
    console.log("index-buttonTap");
    console.log(this.route);
}

效果
Page.prototype.route

Page.prototype.setData()

字段	类型	必填	描述	最低版本
data	`Object`	是	要修改的数据	无
callback	`Function`	否	回调函数	1.5.0

Object 是以 key:value键值对的形式表示, 作用就是讲this.data 对应的值改为value , callback 是一个回调函数,在设置值结束后调用, 其中key十分的灵活,以数据路径给出, 等会儿会给出演示, 而且不需要再this.data中预先定义
注意事项

   直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
   单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
   请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

友情提示 :
callback 不能调用js中的方法, 估计是因为,在函数对象被传过去后, 无法找到原来的函数,暂时未找到解决方案

代码展示
logs.wxml

    <view>
        <button bindtap='buttonTap' >click</button>
        <text>{{msg}}</text>
    </view>

logs.js

    buttonTap : function(){
        //测试点击事件
        console.log("index-buttonTap");
        //测试 Page.prototype.route
        console.log(this.route);
        //测试 Page.prototype.setData()
        this.setData({
          msg:"buttonTap"
        },
        //回调函数
        function(){
          console.log("logs-myCallback");
        });
    }