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

发布：2018-02-02 10:57浏览：次来源：网络作者：cola

一. 模块化

如果学过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.编译后就可以在调试界面看到输出的文字了。

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

二. 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,这里要说个两个点

如何在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>

如何在其他函数修改初始化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'
         })
       }