本文将带你了解微信小程序开发之模块化与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.编译后就可以在调试界面看到输出的文字了。好了，经过上面几步，我们的模块化开发就完成了。二.   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选项中开启enablePullDownRefreshonReachBottom:   页面上拉触底事件的处理函数，需要在config的window选项中开启enablePullDownRefreshonShareAppMessage:   用户点击右上角分享自定义可以添加任意的函数或数据到 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'
             })
           }
      三.总结看完这篇文章，模块化理解起来不是很难，至于page函数，是微信小程序中一个很关键的点，因为里面涉及了初始化数据，生命周期等函数，特别是生命周期，我们在之后的文章也是会专门讲生命周期这个点。    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！