微信小程序逻辑层

创建时间:2019-08-28 16:45

字数:2.1k 阅读:

评论:

微信小程序逻辑层

微信小程序逻辑层

总览

本文接上期的大众点评点餐小程序开发经验 - 视图层，本期想要和大家分享一下大众点评点餐小程序开发中的逻辑层的经验。

与视图层微信自己定义了一套与 HTML 对应的 WXML 和 WXSS 不同，小程序的逻辑层还是使用 javascript 编写的。不过与我们普通的编写 js 还是有一些区别的。接下来我会根据实践进行说明。逻辑层代码结构为

menu
menu.js
app.js

App 和 Page

小程序提供了 App 方法来注册整个小程序，在 App 方法里我们可以传入一个对象，指定小程序的生命周期函数以及自定义的函数或者数据。注意这个函数只能被调用一次。

如上图所示，App 拥有着 4 个生命周期函数，我们可以在 launch 的时候进行一些全局信息的获取，比如用户信息，门店信息等等，然后存入到全局数据中。这里的数据可以被每个页面访问到。

小程序针对每个页面提供了 Page 的函数。整个逻辑层大部分的代码都会写在 Page 函数中，Page 中承接着整个页面的数据，生命周期函数，以及在视图中绑定的事件的触发函数，例如各点击事件。整个 Page 函数允许的参数为下图所示：

如图，Page 函数因为是页面级别的，所以拥有着更多的生命函数，会有下拉刷新事件，会有页面到达底部的事件。这里我们需要区别好各个生命周期函数。onLoad 只会在初始化的时候调用一次，onShow 是每次打开页面都会调用，onReady 只有页面初次渲染完成才会被调用。onHide 会在 navigateTo(微信提供的跳转 API)或者底部 tab 切换时调用，onUnload 会在 redirectTo(微信提供的 redirect 的 API)或者 navigateBack(微信提供的回退的 API)的时候调用。Page 更具体的渲染过程可以参考下面这张图：

简单描述下就是：视图层和逻辑层同时进行初始化，视图层 init 之后通知逻辑层发送数据。逻辑层执行 onload 和 onShow，然后接收到视图层的通知之后发送数据给视图层，视图层进行初次渲染后通知逻辑层渲染完毕，逻辑层此时调用 onReady 方法。然后逻辑层可以通过再次发送数据重新渲染视图层。

Page 的整个工作流程可以参照下面的图：

首先 Page 的 data 会被用于页面的初始化渲染。然后用户会在页面上，也就是展示层触发事件，比如我们点餐的话，点击了加菜按钮。页面监听到这个事件之后，会触发在 Page 函数中申明的自定义事件。然后根据具体情况可能会调用微信的 Api 发起请求，根据请求的结果，我们调用 setData 方法，来改变页面的数据，小程序就会监听到数据的改变而重新执行渲染的过程。这个写过 React 的朋友，应该会很熟悉，React 也是在 Component 里面申明自定义方法，触发后通过 setState 来重新渲染页面。我们之前的 H5 就是使用 React 写的，所以逻辑层迁移到小程序的代价并不是很大~

getApp 和 getCurrentPages

小程序内申明的变量和函数只在该文件内有效，不同的文件可以申明相同名字的变量和函数，并不会相互影响。上面提到 App 内可以设置全局数据。我们在每个 Page 里面都可以通过全局函数 getApp()来拿到全局的引用实例。然后就可以访问页面的数据。比如我们在购物车下完单之后回到菜单页可能会需要进行菜单的刷新，我们在购物车页面就会调用 getApp().data.menuRefresh = true，然后在菜单页的 onShow 方法进行判断，例如:

let app = getApp();
Page(
    requestMenu () {
        //刷新菜单
    };
    onShow () {
        if (.data.menuRefresh === true) {
            getApp().data.menuRefresh === false;
            this.requestMenu();
        }
    }
);

在每个 Page 内，我们还可以用 getCurrentPages 来获取当前页面栈的实例，数组形式，第一个元素为首页，最后一个元素为当前页面。页面栈的表现情况如下图所示：

注意我们不能手动去尝试修改页面栈，我们只能根据页面栈，来分析是使用哪种微信的 API 来跳页面。这里的跳转 API 还会在下面进行讲解。

模块化

小程序是支持模块化的，支持 commonjs 的模块化写法，也就是 module.exports 或者 exports，这两个的区别这里就不细讲了，不了解的可以去看下 nodejs 的 module 那块的文档。小程序目前并不支持引入 node_modules，也就是并不支持第三方的模块，当我们需要使用到外部的依赖的时候，建议直接将代码拷贝到小程序的目录中，然后通过相对路径的 require 函数进行引入。

微信 API

小程序作为微信的一个重要功能，微信的框架提供了非常丰富的微信原生 API，可以方便的调起微信提供的能力，除了视图层的一些原生组件外，还有一些功能性的 API，如扫码，定位，媒体播放，本地存储以及支付功能等等。

我们这次使用的较多的是通过微信发起网络请求以及微信的数据存储。

发起请求

微信提供了 wx.request 来发起请求，注意这个方法发起的是 HTTPS 请求。所以在开发微信小程序之前，大家得先迁一下 HTTPS~我们自己在使用 API 的时候，还用了 pinkie 这个包将 request 包装成了 Promise 的形式方便我们使用。比较重要的一点是微信的运行环境并不是浏览器，并不提供 cookie 的功能，我们解决用户鉴别的问题是带上用户的 token，用户的 token 是在用户登录的时候后端生成好了放置到 App 的全局数据中。

数据存储

我们大众点评点餐页面上有大量的菜单数据，这部分数据之前在 H5 上实现的时候用的是浏览器的 localstorage。这次切换到微信的 storage，代价很小，用了一下适配器模式，将微信的数据接口适配成我们需要的接口就好了。这样也是为了以后的迭代慢慢让 H5 与小程序使用同一套代码。

module.exports = function go2Page(opts) {
  if (!opts) return;
  if (!opts.url) return;
  let url = opts.url;
  const history = getCurrentPages();
  let path = url.split("?");
  let params;
  if (path.length === 2) {
    params = path[1];
  }
  let page = path[0].split("/").pop();
  let index = -1;
  for (var i = 0; i < history.length; i++) {
    let hPath = history[i].__route__;
    let hPage = hPath.split("/").pop();
    if (page == hPage) {
      index = i;
      break;
    }
  }
  if (index === -1) {
    wx.navigateTo({
      url: url
    });
  } else {
    if (params) {
      params = query(params);
    }
    app.store(page, params);
    wx.navigateBack({
      delta: history.length - (index + 1)
    });
  }
};

还有就是由于框架并非运行在浏览器中，所以 javascript 在 web 端的一些能力都无法使用，除了上面提到的 cookie，还有 document，window 等等。开发者所有代码最终会被打包成一份 javascript，在小程序启动的时候运行，直到小程序销毁。这一点类似于浏览器的 ServiceWorker，所以逻辑层也称之为 App Service。

本文时间为 2017-03-02，所提小程序暂不支持属性或碰到的 bug 以此时间为准，后续更新或修复请查看官方文档。

参考资料：
微信小程序开发者文档

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com

微信小程序逻辑层

微信小程序逻辑层

总览

App 和 Page

getApp 和 getCurrentPages

模块化

微信 API

发起请求

数据存储

导航

推荐文章