微信小程序基础教程(逻辑层 APP Service)

作者:日期:2017-01-18 11:35:25 点击:1612

 小程序二【逻辑层 App Service

小程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序

·        增加 App  Page 方法,进行程序和页面的注册。

·        增加 getApp getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。

·        提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。

·        每个页面有独立的作用域,并提供模块化能力。

·        由于框架并非运行在浏览器中,所以 JavaScript web 中一些能力都无法使用,如 documentwindow 等。

·        开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service

程序 App

App()

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

 

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。

只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

?App({
onLaunch: function() {
生命周期函数--监听小程序初始化,当小程序初始化完成时,会触发onLaunch(全局只触发
一次)
},
onShow: function() {
生命周期函数--监听小程序显示,当小程序启动,或从后台进入前台显示,会触发 onShow
},
onHide: function() {
生命周期函数--监听小程序隐藏,当小程序从前台进入后台,会触发 onHide
},
onError: function(msg) {
错误监听函数,当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误
信息
},
其他: '开发者可以添加任意的函数或数据到 Object 参数中,用this 可以访问'
})
getApp()
我们提供了全局的 getApp() 函数,可以获取到小程序实例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意:

App() 必须在 app.js 中注册,且不能注册多个。

不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。

通过 getApp() 获取实例之后,不要私自调用生命周期函数。

 

注册页面page

page()

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

 

Page({
  data: {
    //Object       页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
  },
  onReady: function() {
    //生命周期函数--监听页面初次渲染完成
  },
  onShow: function() {
    //生命周期函数--监听页面显示
  },
  onHide: function() {
    //生命周期函数--监听页面隐藏
  },
  onUnload: function() {
    //生命周期函数--监听页面卸载
  },
  onPullDownRefresh: function() {
    //页面相关事件处理函数--监听用户下拉动作
  },
  onReachBottom: function() {
    //页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
   //页面上拉触底事件的处理函数
  },
  // 其他:开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问例如:
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

【注意】

data初始化数据

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

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

【生命周期函数】

onLoad: 页面加载
一个页面只会调用一次。
接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。

【页面相事件处理函数】

onPullDownRefresh: 下拉刷新

   监听用户下拉刷新事件。

   需要在configwindow选项中开启enablePullDownRefresh

   当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onShareAppMessage: 用户分享

   只有定义了此事件处理函数,右上角菜单才会显示分享按钮

   用户点击分享按钮的时候会调用

   此事件需要 return 一个 Object,用于自定义分享内容

 

自定义分享字段

Page({
onShareAppMessage: function () {
return {
title: '自定义分享标题 默认值当前小程序名称',
desc: '自定义分享描述 默认值当前小程序名称',
path: '分享路径,默认值当前页面 path ,必须是以 / 开头的完整路径'
}
}
})

【事件处理函数】

   除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。

示例代码:

<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})

?

Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。

【注意】

1.     直接修改 this.data 无效,无法改变页面的状态会造成据不一致。

2.     次设置的据不能超1024kB请尽量避免一次设置多的

 

setData() 格式

   接受一个对象,以 keyvalue 的形式表示将 this.data 中的 key 对应的值改变成 value 其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].messagea.b.c.d,并且不需要在 this.data 中预先定义。

 

示例代码:

 

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new 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'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})
getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

Tip:不要尝试修改页面栈,会导致路由以及页面状态错误。

模块化

【文件作用域】

JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置,如:

//app.js
App({ globalData: 1 })
// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js. var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2. console.log(getApp().globalData)

【模块化】

我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

需要注意的是:

exports  module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。

小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

?在需要使用这些模块的文件中,使用 require(path) 将公共代码引入

var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})

上一篇: 微信小程序基础教程(目录结构与配置)

下一篇: 使用webpack搭建前端工作流