微信小程序学习笔记 (小程序页面学习 四 逻辑层 模块化 基础食用方法)

目录结构

这是我小程序的目录结构
页面学习

逻辑层(App Service)

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

文件作用域

文件作用域这个东西其实主要是指 JavaScript 文件中声明的变量和函数只在该文件中生效; 不同文件可以声明相同名字的变量和函数, 不会相互影响.
在这里我们主要是说明 以下几点 : 模块化, 如何获取 app.js, 如何获取自定义的 .js 文件

模块化

   我们先说模块化是怎么回事, 模块化是将一些公共的代码抽离出来, 如登录操作, 与后台的 ajax 链接, 从 sessionStorage 中获取当前的登录信息, 还有时间显示 等等这些可能会多次出现的代码, 我们将其抽离出来形成函数, 之后将这些函数放在同一个js文件中, 作为一个模块, 提高代码的利用率, 减小代码量, 熟练使用模块化可以增快开发速度.
   在微信小程序中作为一个模块只可以通过 module.exports 或者exports 才可以对外暴露接口

   而在开发中我们需要注意的是 :
官方说明

exports 是 module.exports 的一个引用, 因此在模块里边随意更改 exports 的指向会造成未知的错误, 所以更推荐开发者使用module.exports 来暴露模块接口, 除非你清晰的知道这两者的关系
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

对此我只想说建议还是使用 module.exports 好, 至少是官方希望我们用这个, 而对于node_modules 我并不是十分了解没法给出更多的解释
接下来给个模块化代码演示

<button bindtap='clickme'>点一下button>
<text>{{msg}}text>

// pages/mypage/mypage.js
var base = require("../../static/js/base.js");
Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg : "null"
  },
  clickme : function(){
    var msg = base.sayHello("myPage");
    this.setData({
      msg : msg
    });
  }
 });

// static/js/base.js
function sayHello(name){
  var msg = `Hello ${name} !`;
  console.log(msg);
  return msg;
}
function sayGoodBye(name){
  console.log(`GoodBye ${name} !`);
}
module.exports = {
  sayHello : sayHello,
  sayGoodBye : sayGoodBye
}

效果演示

模块化的演示也正如我上面的代码和演示的效果, 但是模块化的提示真的是太差了, 我也不知道是什么原因,或许是我注释没加到位, 不管怎么说,这个比起HBuilder 还是差点, 不过就支持方面看着是比eclipse好多了, 不过不管怎么说就效果而言还是挺好的.

获取全局的应用实例

关于获取全局的应用实例, 我也不用多说, 该有的以前也都说过, 我们是通过 getApp() 函数来获取全局的应用实例, 若是需要全局的数据可以在App()中设置

代码示例

//pages/logs/logs.js
const util = require('../../utils/util.js')
var app = getApp();
Page({
  data: {
    logs: [],
    msg : "hello,world"
  },
  buttonTap : function(){
    //测试点击事件
    console.log("index-buttonTap");
    //测试 Page.prototype.route
    console.log(this.route);
    var test = app.globalData.test;
    app.globalData.test++;
    //测试 Page.prototype.setData()
    this.setData({
      msg: `buttonTap test ${test}`
    },
    //回调函数
    function(){
      console.log("logs-myCallback");
    });
  }
 })

// pages/mypage/mypage.js
var base = require("../../static/js/base.js");
var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg : "null"
  },
  clickme : function(){
    var msg = base.sayHello("myPage");
    var test = app.globalData.test;
    app.globalData.test++;
    this.setData({
      msg : `${msg} test ${test}`
    });
  }
 })

//app.js
App({
   ...
  globalData: {
    userInfo: null,
    test : 0
  }
})

效果演示

获取自定义的公共代码

   关于获取自定义的公共代码我在前面演示自定义代码的时候也带着演示过了,接下来我仅仅对如何获取做说明
注意 在我们需要引入公共的模块时可以通过 require(path) 来引入代码模块, 且这个path不支持绝对路径, 这个是十分重要的, 假如你问我们如何书写路径的话,其实微信的IDE在路径这个方面其实还是挺强大的,给出效果

但是在跳转时就没这么强大了,很是伤心,好了关于模块化就到这里了,不知道你是否明白了多少