百度智能小程序框架 邏輯層

邏輯層介紹

智能小程序的邏輯層由 JavaScript 編寫(xiě)。

邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的反饋。

在 JavaScript 的基礎(chǔ)上，我們提供了一些框架方法。

1、提供了 App 和 Page 方法

2、提供了 getApp 和 getCurrentPages 方法，分別用來(lái)獲取 App 實(shí)例和當(dāng)前頁(yè)面棧

3、提供了豐富的 API ，如掃一掃，ocrIdCard 等智能小程序能力

4、每個(gè)頁(yè)面有獨(dú)立的作用域 ，并提供模塊化

5、框架本身并非運(yùn)行在瀏覽器中，所以 JavaScript 在 Web 中的一些能力都無(wú)法使用，如 document , window 等

6、開(kāi)發(fā)者寫(xiě)的所有代碼，最終會(huì)被打包成一份 JavaScript ，并在智能小程序啟動(dòng)時(shí)運(yùn)行，直到智能小程序銷(xiāo)毀。

注冊(cè)程序

App()

解釋：App() 函數(shù)用來(lái)注冊(cè)一個(gè)智能小程序。接受一個(gè) Object 作為參數(shù)，用以指定智能小程序的生命周期函數(shù)等。

Object參數(shù)說(shuō)明：

App({
    onLaunch: function (options) {
        // do something when launch
    },
    onShow: function (options) {
        // do something when show
    },
    onHide: function () {
        // do something when hide
    },
    globalData: 'global data'
});

onLaunch，onShow 參數(shù)

getApp()全局的 getApp() 函數(shù)可以用來(lái)獲取到智能小程序?qū)嵗?/p>示例：

var appInstance = getApp()
console.log(appInstance.globalData)

1、App() 必須在 app.js 中注冊(cè)，且不能注冊(cè)多個(gè)。

2、不要在 App() 內(nèi)的函數(shù)中調(diào)用 getApp() 函數(shù)，使用 this 就可以拿到 app 實(shí)例

3、不要在 onLaunch 中調(diào)用 getCurrentPages() ，此時(shí)，page 還沒(méi)有生成

注冊(cè)頁(yè)面

Page()

解釋：Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

Object參數(shù)說(shuō)明：

Page({
    data: {
        text: 'swan data'
    },

    onLoad: function (options) {
        // do something 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 unload
    },

    onPullDownRefresh: function () {
        // do something when pull down
    },

    onReachBottom: function () {
        // do something when page reach bottom
    },

    onShareAppMessage: function () {
        // return custom share data
    },

    onPageScroll: function () {
        // do something when page scroll
    },
    
    onTabItemTap: function (item) {
        console.log(item.index);
        console.log(item.pagePath);
        console.log(item.text);
    },
    customData: {}
});

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

解釋：初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對(duì)象，數(shù)組。

渲染層，通過(guò)SWAN模板，對(duì)數(shù)據(jù)進(jìn)行綁定。

Page({
    data: {
        name: 'swan'
    }
});

<view>{{name}}</view>

生命周期函數(shù)

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

2、onShow：頁(yè)面顯示每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。

3、onReady：頁(yè)面初次渲染完成一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。對(duì)界面的設(shè)置如：swan.setNavigationBarTitle 請(qǐng)?jiān)趏nReady之后設(shè)置。

4、onHide：頁(yè)面隱藏當(dāng) navigateTo 或底部 tab 切換時(shí)或Home鍵離開(kāi)智能小程序時(shí)調(diào)用。

5、onUnload：頁(yè)面卸載當(dāng) redirectTo 或 navigateBack 的時(shí)候調(diào)用。

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

1、onPullDownRefresh: 下拉刷新監(jiān)聽(tīng)用戶下拉刷新事件。需要在 app.json 的 window 選項(xiàng)中或頁(yè)面配置中開(kāi)啟 enablePullDownRefresh 。當(dāng)處理完數(shù)據(jù)刷新后，swan.stopPullDownRefresh 可以停止當(dāng)前頁(yè)面的下拉刷新。

2、onReachBottom: 上拉觸底監(jiān)聽(tīng)用戶上拉觸底事件?？梢栽?app.json 的 window 選項(xiàng)中或頁(yè)面配置中設(shè)置觸發(fā)距離 onReachBottomDistance 。在觸發(fā)距離內(nèi)滑動(dòng)期間，本事件只會(huì)被觸發(fā)一次。

3、onPageScroll：頁(yè)面滾動(dòng)監(jiān)聽(tīng)用戶滑動(dòng)頁(yè)面事件。參數(shù)為 Object，包含以下字段：

Object參數(shù)說(shuō)明：

4、onShareAppMessage：用戶點(diǎn)擊分享用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候會(huì)調(diào)用此事件需要 return 一個(gè) Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容

自定義轉(zhuǎn)發(fā)字段

Page({
    onShareAppMessage: function () {
        return {
            title: '標(biāo)題',
            path: '/pages/path/path'
        }
    }
});

事件處理函數(shù)

解釋：除了初始化數(shù)據(jù)和生命周期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在組件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(zhí)行 Page 中定義的事件處理函數(shù)。

<view bindtap="tap"> tap </view>

Page({
    tap: function() {
        console.log('tap')
    }
})

Page.prototype.setData()

解釋：setData 函數(shù)，用于將數(shù)據(jù)，從邏輯層發(fā)送到視圖層，當(dāng)開(kāi)發(fā)者調(diào)用 setData 后，數(shù)據(jù)的變化，會(huì)引起視圖層的更新。

<view>{{name}}</view>
<view bindtap="tap">{{age}}</view>

Page({
    data: {
        name: '',
        age: 0
    },
    tap: function () {
        this.setData({'age', 1});
    }
});

頁(yè)面路由

解釋：在智能小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理。

頁(yè)面棧

解釋：框架以棧的形式維護(hù)了當(dāng)前的所有頁(yè)面。 當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下：

頁(yè)面棧

getCurrentPages()

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

路由方式

對(duì)于路由的觸發(fā)方式以及頁(yè)面生命周期函數(shù)如下：

生命周期函數(shù)

Tab 切換對(duì)應(yīng)的生命周期（以 A、B 頁(yè)面為 Tabbar 頁(yè)面，C 是從 A 頁(yè)面打開(kāi)的頁(yè)面，D 頁(yè)面是從 C 頁(yè)面打開(kāi)的頁(yè)面為例）：

生命周期函數(shù)詳解

1、navigateTo, redirectTo 只能打開(kāi)非 tabBar 頁(yè)面。

2、switchTab 只能打開(kāi) tabBar 頁(yè)面。

3、reLaunch 可以打開(kāi)任意頁(yè)面。

4、頁(yè)面底部的 tabBar 由頁(yè)面決定，即只要是定義為 tabBar 的頁(yè)面，底部都有 tabBar。

5、調(diào)用頁(yè)面路由帶的參數(shù)可以在目標(biāo)頁(yè)面的 onLoad 中獲取。

文件作用域

解釋：

在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數(shù)，不會(huì)互相影響。

通過(guò)全局函數(shù) getApp() 可以獲取全局的應(yīng)用實(shí)例，如果需要全局的數(shù)據(jù)可以在 App() 中設(shè)置

// app.js
App({
  data: 1
});

// page.js
var app = getApp();
app.data++;

// page2.js
var app = getApp();
console.log(app.data);
// 2

模塊化

解釋：

可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js 文件，作為一個(gè)模塊。模塊只有通過(guò) module.exports 或者 exports 才能對(duì)外暴露接口。

// utils.js
var name = 'swan';
var age = 0;
function logName() {
    console.log(name);
}
function logAge() {
    console.log(age);
}
module.exports.logName = logName;
module.exports.logAge = logAge;

可以在需要使用這些模塊的文件中，對(duì)模塊進(jìn)行引用：

var utils = require('./utils');
Page({
    onLoad: function () {
        utils.logName();
    }
});