Android开发者学习小程序之旅《一》逻辑层

发布者: smg | 发布时间: 2017-11-12 19:30| 查看数: 7137| 评论数: 1|帖子模式

作者：Garment1991，来自原文地址

由于本人是一个Android开发者，所以是带着和Android Native 应用开发做比较的想法来学习微信小程序的开发，这样子学习可以更好的理解微信小程序。

小程序开发框架的逻辑层是由JavaScript编写的。逻辑层的代码都是写在.js文件中，顾名思义，就是业务逻辑的处理，就是对需要展示的数据进行处理，然后处理完成后就发送到视图层，进行视图渲染；同时，逻辑层也需要接受视图层的事件反馈，进行相应的逻辑处理。

举个例子：我想在应用登录后的界面显示用户的头像和名称。

那么，逻辑层需要的处理就是在登录成功后启动页面时候，需要去获取并保存用户的头像信息，名称；在成功获取数据之后，就发送到视图层进行渲染。

在JavaScript的基础上，小程序开发框架做了一些修改，用以方便地开发小程序。

* 增加了App和Page方法，进行程序和页面的注册。这就类似于Android开发中的Application和Activity，Android中Application就代表一个应用，这个对象在启动应用时会创建，只是在应用第一次启动时被创建，而且这个对象是全局的，单例的；Activity就是向用户展示的一个界面。小程序中的App就类比Android的Application，代表的是一个微信小程序；Page就类比Android中的Activity，就是一个页面，用于向用户展示数据。

* 提供丰富的API，如微信用户数据的获取，扫一扫，支付等微信特有能力。因为这个小程序是依赖着微信而存在的，所以，一些微信的基本功能都会有，其实这就是一种微信系的轻应用。

等等.....

1）App()

App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。其生命周期函数有onLaunch、onShow、onHide。

小程序开发框架提供了了全局的getApp()函数，可以获取到小程序实例。

所以我们在开发小程序的时候，一些需要全局调用的函数可以定义在App中，还有一些全局使用的变量也可以在App中定义。还有一些初始化操作可以放在onLaunch函数中调用。

2）Page

Page就类似与Android中的Activity，就是向用户展示数据的一个页面。Page()函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

示例代码：

[javascript] view plaincopy
//index.js  
Page({  
  data: {  
    text: "This is page data."  
  },  
  onLoad: function(options) {  
    // Do some initialize when page load.  
  },  
  onReady: function() {  
    // Do something when page ready.  
  },  
  onShow: function() {  
    // Do something when page show.  
  },  
  onHide: function() {  
    // Do something when page hide.  
  },  
  onUnload: function() {  
    // Do something when page close.  
  },  
  onPullDownRefresh: function() {  
    // Do something when pull down.  
  },  
  onReachBottom: function() {  
    // Do something when page reach bottom.  
  },  
  // Event handler.  
  viewTap: function() {  
    this.setData({  
      text: 'Set some data for updating view.'  
    })  
  },  
  customData: {  
    hi: 'MINA'  
  }  
})  

初始化数据

data数据是作为页面的第一次渲染，data将会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成JSON的格式：字符串，数字，布尔值，对象，数组。

渲染层可以通过WXML对数据进行绑定。

实例代码：

[javascript] view plaincopy
<view>{{text}}</view>  
<view>{{array[0].msg}}</view>  
Page({  
  data: {  
    text: 'init data',  
    array: [{msg: '1'}, {msg: '2'}]  
  }  
})  

数据刷新

setData函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。注意：直接手动修改this.data是无效的，无法改变页面的状态，还会造成页面展示的数据和this.data保存的数据不一致的问题。

setData()函数的参数格式

接受一个对象，以key,value的形式表示将this.data中的key对应的值改变成value。

单次设置的数据不能超过1024kb，请尽量避免一次设置过多的数据。
（注意，当this.data中不存在对应的key值，则该key属性会添加到this.data中，一般不要这样使用）

[javascript] view plaincopy
<!--index.wxml-->  
<view>{{text}}</view>  
<button bindtap="changeText"> Change normal data </button>  
  
//index.js  
Page({  
  data: {  
    text: 'init data',  
    array: [{text: 'init data'}],  
    object: {  
      text: 'init data'  
    }  
  },  
  changeText: function() {  
    // this.data.text = 'changed data'  // bad, it can not work  
    this.setData({  
      text: 'changed data'  
    })  
  },  
})  

b76636f70457c6a2b97522fea82f714d.png (2.66 KB, 下载次数: 49)

下载附件

2017-11-12 19:30 上传

PS：微信小程序开发中，逻辑层的处理是最重要的；深刻地理解开发框架的逻辑层的原理，有利于我们写出优雅的代码。在这里，我只是列出了逻辑层一些需要重要了解的知识点，需要更详细的了解，还是需要去到小程序官方开发网站。

小程序开发者

收藏0

Android开发者学习小程序之旅《一》逻辑层

最新评论

浏览过的版块

轻源码让程序更轻更快