商城系統(tǒng) 注冊(cè)

小程序 App() 和 Page() 函數(shù)調(diào)用時(shí)的初始化流程

2018-06-27|HiShop
導(dǎo)讀:內(nèi)部實(shí)現(xiàn) 在__appServiceEngine__對(duì)象中,對(duì)App和getApp屬性的定義如下: // 其中的 t 就是 __appServiceEngine__ 對(duì)象var i = n(17);Object.defineProperty(t, App, { enumerable: !0, g...

內(nèi)部實(shí)現(xiàn)

在 __appServiceEngine__ 對(duì)象中,對(duì) App 和 getApp 屬性的定義如下:

// 其中的 t 就是 __appServiceEngine__ 對(duì)象
var i = n(17);
Object.defineProperty(t, "App", {
  enumerable: !0,
  get: function() {
      return i.appHolder
  }
}),
Object.defineProperty(t, "getApp", {
  enumerable: !0,
  get: function() {
      return i.getApp
  }
}),

而這兩個(gè)屬性對(duì)應(yīng)的實(shí)現(xiàn)分別為 appHolder() 和 getApp() 方法,定義如下:

l = void 0,

t.appHolder = (0, i.surroundByTryCatch)(function(e) {
   l = new y(e)
}, "create app instance"),

t.getApp = function() {
   return l
},

由上可知,在 appHolder() 方法中,把外部傳入的 object 對(duì)象傳給 y(...) 方法進(jìn)行初始化一個(gè)小程序?qū)嵗龑?duì)象,并把結(jié)果賦給變量 l 緩存起來(lái),而在 getApp() 方法中則直接 return l,返回當(dāng)前小程序?qū)ο蟆?/p>

App 實(shí)例初始化流程

在上述 page-frame.html 中,我們知道,在 app.js 被加載完后,小程序框架會(huì)立即執(zhí)行 require('app.js') 進(jìn)行注冊(cè)小程序?qū)嵗磳?duì) App() 函數(shù)進(jìn)行調(diào)用(開(kāi)發(fā)者已經(jīng)在 app.js 中定義好了入?yún)?duì)象),如下:

<script src="./app.js"></script>
<script>require("app.js")</script>

在 App() 函數(shù)中,最終會(huì)調(diào)用 y(...) 方法進(jìn)行初始化,其中 y(...) 的定義比較長(zhǎng),我們這里不再貼出代碼,詳情請(qǐng)自行查閱 WAService.js ,它的處理流程如下:

Page() 和 getCurrentPages() 函數(shù)

根據(jù) 文檔 , Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面,接收一個(gè) object 對(duì)象參數(shù),其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。 Page() 函數(shù)的聲明如下:

function Page(page: PageOptions): void

對(duì)于入?yún)?nbsp;object 對(duì)象(PageOptions)的屬性說(shuō)明如下:

 小程序 App() 和 Page() 函數(shù)調(diào)用時(shí)的初始化流程

此外, getCurrentPages() 函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁(yè),最后一個(gè)元素為當(dāng)前頁(yè)面。它的聲明如下:

function getCurrentPages(): object[]

內(nèi)部實(shí)現(xiàn)

同樣地,在 __appServiceEngine__ 對(duì)象中,對(duì) Page 和 getCurrentPages 屬性的定義如下:

var r = n(2);
Object.defineProperty(t, "Page", {
  enumerable: !0,
  get: function() {
      return r.pageHolder
  }
}),
Object.defineProperty(t, "getCurrentPages", {
  enumerable: !0,
  get: function() {
      return r.getCurrentPages
  }
}),

而這兩個(gè)屬性對(duì)應(yīng)的實(shí)現(xiàn)分別為 pageHolder() 和 getCurrentPages() 方法,定義如下:

var k = void 0, // 保存當(dāng)前顯示的頁(yè)面(棧頂)
x = [], // 保存已加載過(guò)的頁(yè)面歷史棧數(shù)組

// 其中的 t 就是 __appServiceEngine__ 對(duì)象

t.getCurrentPage = function() {
    return k
},
t.getCurrentPages = function() {
    var e = [];
    return x.forEach(function(t) {
        e.push(t.page)
    }),
    e
},

M = {}, // 緩存所有已經(jīng)注冊(cè)的頁(yè)面

t.pageHolder = function(e) {
   if (!__wxRouteBegin) throw (0, f.error)("Page 注冊(cè)錯(cuò)誤", "Please do not register multiple Pages in " + __wxRoute + ".js"),
   new a.AppServiceEngineKnownError("Please do not register multiple Pages in " + __wxRoute + ".js");
   __wxRouteBegin = !1;
   var t = __wxRoute;
   if (!A(t)) throw (0, f.error)("Page 注冊(cè)錯(cuò)誤", __wxRoute + " has not been declared in app.json."),
   new a.AppServiceEngineKnownError(__wxRoute + " has not been declared in app.json.");
   var n = "undefined" != typeof __wxAppCode__ ? __wxAppCode__[t + ".json"] || {}: {};
   if ("Object" !== (0, f.getDataType)(e)) throw (0, f.error)("Page 注冊(cè)錯(cuò)誤", "Options is not object: " + JSON.stringify(e) + " in " + __wxRoute + ".js"),
   new a.AppServiceEngineKnownError("Options is not object: " + JSON.stringify(e) + " in " + __wxRoute + ".js"); (0, f.info)("Register Page: " + t),
   void 0 !== n.usingComponents ? (__virtualDOM__.Page(e), M[t] = exparser.Component._list[t]) : M[t] = e
},

分析上述代碼,我們可以總結(jié) pageHolder 方法的處理流程如下:

此外,我們可以發(fā)現(xiàn),與 App() 不同的是, 外部通過(guò) Page() 函數(shù)傳入的(生命周期)代碼并不會(huì)在這里被執(zhí)行,而是等待頁(yè)面 Ready 并進(jìn)入頁(yè)面進(jìn)行實(shí)例化后才執(zhí)行。

頁(yè)面初始化流程

同樣地,根據(jù) page-frame.html 的加載順序,在 app.js 被加載并執(zhí)行后,小程序之后會(huì)先依次按順序加載所有的自定義組件代碼(如果有)并自動(dòng)注冊(cè)。自定義組件(Component)在小程序開(kāi)發(fā)中具有重要地位,它可以豐富小程序的基礎(chǔ)功能,擁有的能力比 

您可能感興趣:小程序開(kāi)發(fā)
上一篇:京東小程序怎么裝修(適用移動(dòng)端) 下一篇:微信小程序封裝get和post操作流程

電話咨詢 預(yù)約演示 0元開(kāi)店