微信小程序模块化与page函数

本文相关合集：跳坑《一百六十六》模块化、组件化及封装相关知识及组件

一. 模块化

如果学过Android的，应该对模块不陌生，我们通常会把一些业务功能抽取成独立的一个模块，然后根据业务模块进行分组开发。微信小程序也有模块化的概念，但是微信小程序的对模块化定义有些不同，官方文档对模块的定义是：

“我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。”

也就是将公共代码进行封装起来，避免重复代码，可以重复调用。

微信小程序的模块化机制跟JavaScript的模块化机制非常相似，都是通过module.exports暴露对象，然后再通过通过require来获取对象。下面来了解一下微信小程序的模块化开发。

1.定义一个在页面定义个公共方法：比如在utils包创建一个common.js，然后在里面定义方法

function printHello(){
    console.log("first printHello");
}

2.通过 module.exports 暴露模块接口

module.exports={
    printHello:printHello
};

3.在其它模块通过 require(path) 进行引用模块，然后调用方法

//引入comm.js文件
var comm=require('../../utils/common.js')

//在onLoad方法进行调用
onLoad: function () {
    comm.printHello();
}

4.编译后就可以在调试界面看到输出的文字了。

dfea5fc4012cc4a7a072384b36039de7.png (9.41 KB, 下载次数: 60)

下载附件

2017-9-3 08:08 上传

好了，经过上面几步，我们的模块化开发就完成了。

二. page函数

在每个js文件里面，都一个固定函数 page() ,这个函数主要作用是用来注册一个页面，接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。示例如下：

Page({
     data:{

      },
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
            // 页面隐藏
        },
          onUnload:function(){
            // 页面关闭
         }
    })

• 初始化数据：

  data :初始化页面数据

• 生命周期函数

  onLoad: 监听页面加载，一个页面只会调用一次

  onReady: 监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

  onShow: 监听页面显示，每次打开页面都会调用一次

  onHide: 监听页面隐藏，页面隐藏的时候调用

  onUnload: 监听页面卸载，页面卸载的时候调用

• 事件处理

  onPullDownRefresh: 监听用户下拉动作，需要在config的window选项中开启enablePullDownRefresh

  onReachBottom: 页面上拉触底事件的处理函数，需要在config的window选项中开启enablePullDownRefresh

  onShareAppMessage: 用户点击右上角分享

• 自定义

  可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

关于data,这里要说个两个点

1. 如何在wxml使用data里面初始化的值。

   在js文件的data参数定义相关 key-value 的值后，在wxml文件加上 {{key}} 就可以使用data里面的值了。

   示例代码：

   在js文件以及在wxml定义：

Page({
     data: {
        text: 'init data',
        array: [{text: 'init data'}],
        object: {
        text: 'init data'
                }
        }......

        <view>{{text}}view>
        <view>{{array[0].text}}view>
        <view>{{object.text}}view>

1. 如何在其他函数修改初始化data里面的值

   在函数里面使用setData() ，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。

   示例代码：

   Page({
    data: {
        text: 'init data',
        array: [{text: 'init data'}],
        object: {
         text: 'init data'
                }
          },
         changeText: function() {
            this.setData({
              text: 'changed data'
            })
          }
   

三.总结

看完这篇文章，模块化理解起来不是很难，至于page函数，是微信小程序中一个很关键的点，因为里面涉及了初始化数据，生命周期等函数，特别是生命周期，我们在之后的文章也是会专门讲生命周期这个点。