小程序?qū)W習(xí)(四)之邏輯層(主要說的是對應(yīng)的js文件)

小程序?qū)W習(xí)(四)之邏輯層(主要說的是對應(yīng)的js文件)

本節(jié)知識(shí)點(diǎn):

  • 注冊小程序

  • 場景值

  • 注冊頁面

  • 路由

  • 模塊化

  • API

App()

App()函數(shù)用來注冊一個(gè)小程序，接受一個(gè)object參數(shù)，其指定小程序的生命周期函數(shù)等。

object參數(shù)說明:

  • onLaunch

    類型是function 作用監(jiān)聽小程序初始化，觸發(fā)時(shí)機(jī)就是當(dāng)小程序初始化加載，會(huì)觸發(fā)onLaunch(全局只觸發(fā)一次)

  • onReady

    類型function 作用監(jiān)聽小程序加載。觸發(fā)時(shí)機(jī)當(dāng)小程序初次渲染完成。

  • onShow

類型是Function 作用是監(jiān)聽小程序顯示。觸發(fā)時(shí)機(jī)當(dāng)小程序啟動(dòng)后，或者從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā)onShow

  • onHide

類型是Function 作用是監(jiān)聽小程序隱藏，觸發(fā)時(shí)機(jī)當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)候，會(huì)觸發(fā)onHide

  • OnError

類型function 作用錯(cuò)誤監(jiān)聽函數(shù) , 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者api調(diào)用失敗。會(huì)觸發(fā)onError并帶上錯(cuò)誤信息

  • 其他

類型Any 開發(fā)者可以添加任意的函數(shù)或者數(shù)據(jù)到object參數(shù)中，用this可以訪問

前臺(tái)，后臺(tái)定義。當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者來電話的時(shí)候，小程序并沒有直接銷毀，而是進(jìn)入了后臺(tái)。當(dāng)再次進(jìn)入小程序就又會(huì)從后臺(tái)進(jìn)入前臺(tái)。
特別注意：只有當(dāng)小程序進(jìn)入后臺(tái)一定的時(shí)間，或者系統(tǒng)資源占用過高，才會(huì)被真正的銷毀。

getApp()

我們提供了全局的getApp()函數(shù)，可以獲取到小程序?qū)嵗?/p> 

var app = getApp();
console.log(app.globalData)   //I am global data

特別注意:App()必須在app.js中注冊，且不能是多個(gè)
不要在定義于App()內(nèi)的函數(shù)調(diào)用getApp()使用this 就可以拿到app實(shí)例
不要在onlauch的時(shí)候調(diào)用getCurrentPages(),此時(shí)page還沒有生成
通過getApp() 獲取到實(shí)例后，不要私自調(diào)用或者啟用生命周期函數(shù)

Page

Page()函數(shù)用來注冊一個(gè)頁面，接受一個(gè)object參數(shù)，其指定的頁面的初始數(shù)據(jù)，生命周期函數(shù)，事件處理函數(shù)等等

Object參數(shù)說明:

  • data 類型object 作用頁面的初始數(shù)據(jù)

  • onLoad 類型Function 作用監(jiān)聽頁面加載(只執(zhí)行一次)

  • onReady 類型Function 作用監(jiān)聽頁面初次渲染完成

  • onShow 類型Function 作用監(jiān)聽頁面顯示

  • onHide 類型Function 作用監(jiān)聽頁面隱藏

  • onUnload 類型Function 作用監(jiān)聽頁面卸載

  • onPullDownRefresh 類型Function 作用監(jiān)聽用戶下拉動(dòng)作

  • onReachBottom 類型Function 作用頁面上拉觸底事件的處理函數(shù)

  • onShareAppMessage 類型Function 作用用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)

  • onPageScroll 類型Function 作用頁面滾動(dòng)觸發(fā)事件的處理函數(shù)

  • 其他 類型 Any 作用開發(fā)者可以添加任意的函數(shù)或者數(shù)據(jù)到object參數(shù)中。在頁面的函數(shù)中用this可以訪問

示例代碼:

//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.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

初始化數(shù)據(jù)

初始化數(shù)據(jù)將作為頁面的第一次渲染。data將會(huì)以JSON的形式由邏輯層傳輸?shù)戒秩緦印Ｋ詳?shù)據(jù)必須是可以轉(zhuǎn)成JSON格式的。字符串，數(shù)字，布爾值，對象，數(shù)組

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

對應(yīng)的在JS里面的data數(shù)據(jù)應(yīng)該寫成

Page({
 data:{
  text:"今天",
  array:[{msg:'1'},{msg:'2'}]
 }
})

生命周期函數(shù)

  • onLoad :頁面加載

    一個(gè)頁面只會(huì)調(diào)用一次，可以在onLoad中獲取打開當(dāng)前頁面所調(diào)用的query參數(shù)

  • onShow:頁面顯示

    每次打開頁面都會(huì)調(diào)用一次

  • onReady: 頁面初次渲染完成

    一個(gè)頁面只會(huì)調(diào)用一次，代碼頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層交互
    對界面的設(shè)置如:wx.setNavigationBarTitle請?jiān)趏nReady之后設(shè)置

  • onHide 頁面隱藏

    當(dāng)navigateTo或者底部tab切換的時(shí)候調(diào)用

  • onUnload: 頁面卸載

    當(dāng)redirectTo或者navigateBack的時(shí)候調(diào)用

頁面相關(guān)事件處理函數(shù)

  • onPullDownRefresh :下拉刷新

    （1）監(jiān)聽用戶下拉刷新事件。
    （2）必須需要在app.json的window選項(xiàng)中，或者在頁面配置中開啟enablePullDownRefresh
    （3）當(dāng)處理完數(shù)據(jù)刷新后。wx.stopPullDownRefresh可以停止當(dāng)前頁面的刷新

  • onReachBottom:上拉觸底

    (1)監(jiān)聽用戶上拉觸底事件。
    (2)可以在app.json里面的window選項(xiàng)中或者頁面配置中設(shè)置觸發(fā)距離onReachBottomDistance
    (3)在觸發(fā)距離內(nèi)滑動(dòng)期間，本事件只會(huì)觸發(fā)一次.

  • onPageScroll：頁面滾動(dòng)

    (1)監(jiān)聽用戶滑動(dòng)頁面事件
    (2)參數(shù)為object包含以下字段.
    scrollTop 類型Num 頁面在垂直方向已滾動(dòng)的距離(單位Px)
    (3)代碼如下:

onPageScroll:function(options){
    console.log(options.scrollTop);
    }

  • onShareAppMessage : 用戶轉(zhuǎn)發(fā)

    (1)只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示轉(zhuǎn)發(fā)按鈕.
    (2)用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候就會(huì)調(diào)用
    (3)此事件需要return一個(gè)object用戶自定義轉(zhuǎn)發(fā)內(nèi)容

  onShareAppMessage: function () {
  return {
    title: '頁面的主標(biāo)題',
    desc: '頁面的描述',
    path: '/pages/index/index?id=123'
        }
      }

事件處理函數(shù)

(1)除了初始化數(shù)據(jù)和生命周期函數(shù)，我們還可以自定義事件處理函數(shù)，在組件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件就會(huì)執(zhí)行Page中定義的事件處理函數(shù).

示例代碼:

<view bindtap = "clickme">點(diǎn)擊我</view>

在邏輯層(js)

Page({
  clickme:function(){
  console.log('Hello world!')
  }
})

this.setData()

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層(異步)，同時(shí)改變對應(yīng)的this.data的值(同步)

setData()參數(shù)格式

  • data

類型object 必填:是 描述需要改變的數(shù)據(jù)

  • callback 類型function 必填:否 描述回調(diào)函數(shù)

object以key,value的形式表示將this.data中的key對應(yīng)的值變成value！callback是一個(gè)回調(diào)函數(shù)，在這次setData對界面渲染完畢后使用。
其中key可以非常靈活，以數(shù)據(jù)路徑的形式給出。如arr[2].message,a.b.c.d并且不需要再this.data中預(yù)先定義.

注意:
直接修改this.data而不調(diào)用this.setData 是無法改變頁面的狀態(tài)的。還會(huì)造成數(shù)據(jù)不一致。
單次設(shè)置的數(shù)據(jù)不能超過1024KB，避免一次設(shè)置過多的數(shù)據(jù).

示例代碼:

<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </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',
    num: 0,
    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'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  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'
    })
  }
})

頁面路由

在小程序中所有的頁面的路由全部由框架進(jìn)行管理

getCurrentPages()

getCurrentPages()函數(shù)用于獲取到當(dāng)前頁面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁，最后一個(gè)元素為當(dāng)前頁。

重要的事情說三遍。千萬不要修改頁面棧。千萬不要修改頁面棧。千萬不要修改頁面棧。

路由方式

  • 打開新頁面:

    調(diào)用API wx.navigateTo
    或者組件<navigator open-type="navigateTo">

  • 頁面重定向

    調(diào)用API wx.redirecTo
    或者使用組件<navigator open-type="redirectTo">

  • 頁面返回

    調(diào)用API wx.navigateBack
    或者使用組件<navigator open-type="navigateBack">

  • Tab切換

    調(diào)用API wx.switchTab
    或者使用組件<navigator open-type="switchTab">

  • 重啟動(dòng)

    調(diào)用API wx.reLaunch
    或者使用組件<navigator open-type="reLaunch">

這幾種路由跳轉(zhuǎn)方式。對于前頁面來說:
wx.navigateTo 對應(yīng)的 onHide
wx.redirecTo 對應(yīng)的 onUnload
wx.navigateBack 對應(yīng)的onUnload

特別注意

  • navigateTo,redirectTo只能打開不是底部導(dǎo)航指定的頁面
  • SwitchTab 只能打開tabBar頁面
  • reLaunch 可以打開任意頁面
  • 頁面底部的tabBar由頁面決定，即只要是定義了tabbar的頁面，底部就有tabBar
  • 調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 昨天看了一下微信小程序官方文檔,總結(jié)一下自己學(xué)習(xí)的個(gè)人心得. 首先從官方文檔給的框架說起,微信小程序官方文檔給出了...
    Mr大大大閱讀 47,243評論 9贊 68
  • 微信小程序在無論在功能、文檔及相關(guān)支持方面，都是優(yōu)于前面幾種微信賬號類型，它提供了很多原生程序才有的接口，使得我們...
    未央大佬閱讀 2,329評論 0贊 12
  • 前言: 上一篇文章我們介紹了.wxml和.wxss文件，這篇文章對js文件進(jìn)行詳細(xì)的講解，首先貼上一個(gè)簡單的js文...
    Smile__EveryDay閱讀 20,318評論 0贊 7
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,923評論 18贊 139
  • 目標(biāo)：4215 完成：399.8 差比：3815.2 累計(jì)沒完成：18765 今天休息第一天上班，早上把倉庫整理了...
    譚甜閱讀 169評論 0贊 0