小編給大家分享一下小程序執(zhí)行流程的案例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)專注于遵化企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站開發(fā)。遵化網(wǎng)站建設(shè)公司,為遵化等地區(qū)提供建站服務(wù)。全流程按需定制,專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)導(dǎo)語:
微信小程序,小程序的一種,英文名Wechat Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。
全面開放申請后,主體類型為企業(yè)、政府、媒體、其他組織或個(gè)人的開發(fā)者,均可申請注冊小程序。微信小程序、微信訂閱號(hào)、微信服務(wù)號(hào)、微信企業(yè)號(hào)是并行的體系。
我們這邊最近一直在做基礎(chǔ)服務(wù),這一切都是為了完善技術(shù)體系,這里對于前端來說便是我們需要做一個(gè)Hybrid體系,如果做App,React Native也是不錯(cuò)的選擇,但是一定要有完善的分層:
① 底層框架解決開發(fā)效率,將復(fù)雜的部分做成一個(gè)黑匣子,給頁面開發(fā)展示的只是固定的三板斧,固定的模式下開發(fā)即可
② 工程部門為業(yè)務(wù)開發(fā)者封裝最小化開發(fā)環(huán)境,最優(yōu)為瀏覽器,確實(shí)不行便為其提供一個(gè)類似瀏覽器的調(diào)試環(huán)境
如此一來,業(yè)務(wù)便能快速迭代,因?yàn)闃I(yè)務(wù)開發(fā)者寫的代碼大同小異,所以底層框架配合工程團(tuán)隊(duì)(一般是同一個(gè)團(tuán)隊(duì)),便可以在底層做掉很多效率性能問題。
稍微大點(diǎn)的公司,稍微寬裕的團(tuán)隊(duì),還會(huì)同步做很多后續(xù)的性能監(jiān)控、錯(cuò)誤日志工作,如此形成一套文檔->開發(fā)->調(diào)試->構(gòu)建->發(fā)布->監(jiān)控、分析 為一套完善的技術(shù)體系
如果形成了這么一套體系,那么后續(xù)就算是內(nèi)部框架更改、技術(shù)革新,也是在這個(gè)體系上改造,但很可惜,很多團(tuán)隊(duì)只會(huì)在這個(gè)路徑上做一部分,后面由于種種原因不在深入,有可能是感覺沒價(jià)值,而最恐怖的行為是,自己的體系沒形成就貿(mào)然的換基礎(chǔ)框架,戒之慎之?。?/p>
從第三方應(yīng)用接入來說,微信應(yīng)該是做的好的,百度這邊有直達(dá)號(hào)等類似的產(chǎn)品,但是其體系化感覺還是有待提高的,阿里應(yīng)該也有類似的技術(shù)產(chǎn)品誕生,從我們這層來說,都沒有太多知曉,所以要么是運(yùn)營的不好要么是做的不好。
而從小程序誕生以來,我這邊便一直在關(guān)注,至今整個(gè)小程序體系已經(jīng)十分完備了,騰訊小程序和騰訊云深度整合了,如果使用內(nèi)測的開發(fā)者工具,全免費(fèi),純js就搞定小程序前后端,不用服務(wù)器、存儲(chǔ)、cdn、服務(wù)代碼,都是免費(fèi),開發(fā)完后端不用自己運(yùn)維,大殺器的節(jié)奏,我有時(shí)候在想,騰訊的技術(shù)實(shí)力真的是強(qiáng)?。?/p>
小程序的結(jié)構(gòu)追溯
小程序的開發(fā)文檔還是比較完善的,依舊是 賬號(hào)申請->demo 流程,等熟悉后便可以走代碼上架等流程了,前端代碼用工具構(gòu)建后上傳,后臺(tái)服務(wù)自己維護(hù),配置地址映射,我們這里僅關(guān)注開發(fā)流程,所有使用其測試賬號(hào)即可。
1 appid wx0c387cc8c19bdf78 2 appsecret acd6c02e2fdca183416df1269d2e3fb9
經(jīng)過一年多的發(fā)展,小程序形成的文檔已經(jīng)比較完善了,我們可以從文檔和demo對小程序做出大概的判斷:
這里就是小程序給業(yè)務(wù)人員可以看到的代碼了,我們從這個(gè)代碼以及運(yùn)行,基本可以將小程序的梗概猜測一番,這里首先看看其全局控制器APP:
//app.js App({ onLaunch: function () { // 展示本地存儲(chǔ)能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登錄 wx.login({ success: res => { // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId } }) // 獲取用戶信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經(jīng)授權(quán),可以直接調(diào)用 getUserInfo 獲取頭像昵稱,不會(huì)彈框 wx.getUserInfo({ success: res => { // 可以將 res 發(fā)送給后臺(tái)解碼出 unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是網(wǎng)絡(luò)請求,可能會(huì)在 Page.onLoad 之后才返回 // 所以此處加入 callback 以防止這種情況 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null } })
一個(gè)應(yīng)用只會(huì)有一個(gè)APP實(shí)例,而小程序?yàn)檫@個(gè)單例提供了幾個(gè)基本的事件定義,我們用的最多的應(yīng)該是onLaunch、onShow、onHide(我還沒寫小程序,所以猜測):
我們這里來追溯一下小程序架構(gòu)層的執(zhí)行邏輯,從APP到一個(gè)view實(shí)例化是怎么做的,這里首先明確幾個(gè)點(diǎn):
① 微信小程序事實(shí)上依舊是提供的webview執(zhí)行環(huán)境,所以我們依舊可以在js環(huán)境中訪問window、location等屬性
② 微信小程序提供的展示的全部是Native定制化的UI,所以不要去想DOM操作的事
這里各位可以想象為,小程序界面中有一塊webview在執(zhí)行真正的代碼邏輯,只不過這個(gè)webview除了裝載js程序什么都沒做,而所有的頁面渲染全部是js通過URL Schema或者JSCore進(jìn)行的Native通信,叫Native根據(jù)設(shè)置的規(guī)則完成的頁面渲染。
全局控制器App
這里我們重點(diǎn)關(guān)注全局控制器App這個(gè)類做了什么,因?yàn)槟貌坏皆创a,我們這里也只能猜測加單步調(diào)試了,首先微信容器會(huì)準(zhǔn)備一個(gè)webview容器為我們的js代碼提供宿主環(huán)境,容器與構(gòu)建工具會(huì)配合產(chǎn)出以下頁面:
他在這里應(yīng)該執(zhí)行了實(shí)例化App的方法:
這一坨代碼,在這個(gè)環(huán)境下便相當(dāng)晦澀了:
y = function() { function e(t) { var n = this; o(this, e), s.forEach(function(e) { var o = function() { var n = (t[e] || i.noop).bind(this); Reporter.__route__ = "App", Reporter.__method__ = e, (0, i.info)("App: " + e + " have been invoked"); try { n.apply(this, arguments) } catch (t) { Reporter.thirdErrorReport({ error: t, extend: "at App lifeCycleMethod " + e + " function" }) } }; n[e] = o.bind(n) }); for (var r in t) !function(e) { g(e) ? (0, i.warn)("關(guān)鍵字保護(hù)", "App's " + e + " is write-protected") : v(e) || ("[object Function]" === Object.prototype.toString.call(t[e]) ? n[e] = function() { var n; Reporter.__route__ = "App", Reporter.__method__ = e; try { n = t[e].apply(this, arguments) } catch (t) { Reporter.thirdErrorReport({ error: t, extend: "at App " + e + " function" }) } return n } .bind(n) : n[e] = t[e]) }(r); this.onError && Reporter.registerErrorListener(this.onError); var l = function() { "hang" === (arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}).mode && (f = !0); var e = (0, a.getCurrentPages)(); e.length && (e[e.length - 1].onHide(), (0, u.triggerAnalytics)("leavePage", e[e.length - 1], !0)), this.onHide(), (0, u.triggerAnalytics)("background") } , h = function() { var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; if (0 === e.scene || "0" === e.scene ? e.scene = c : c = e.scene, e.query = e.query || {}, (0, i.hasExitCondition)(e) && (p = !0), this.onShow(e), (0, u.triggerAnalytics)("foreground"), d || e.reLaunch) d = !1; else { var t = (0, a.getCurrentPages)(); t.length && (t[t.length - 1].onShow(), (0, u.triggerAnalytics)("enterPage", t[t.length - 1], !0)) } }; if ("undefined" != typeof __wxConfig && __wxConfig) { var y = __wxConfig.appLaunchInfo || {}; y.query = y.query || {}, c = y.scene, (0, i.hasExitCondition)(y) && (p = !0), this.onLaunch(y), (0, u.triggerAnalytics)("launch"), h.call(this, y) } else (0, i.error)("App Launch Error", "Can not find __wxConfig"); wx.onAppEnterBackground(l.bind(this)), wx.onAppEnterForeground(h.bind(this)), _.call(this, "function" == typeof t.onPageNotFound) } return r(e, [{ key: "getCurrentPage", value: function() { (0, i.warn)("將被廢棄", "App.getCurrentPage is deprecated, please use getCurrentPages."); var e = (0, a.getCurrentPage)(); if (e) return e.page } }]), e }();
這里會(huì)往App中注冊一個(gè)事件,我們這里注冊的是onLaunch事件,這里對應(yīng)的是當(dāng)小程序初始化時(shí)候會(huì)執(zhí)行這個(gè)回調(diào),所以原則上應(yīng)該是Native裝在成功后會(huì)執(zhí)行這個(gè)函數(shù),這里再詳細(xì)點(diǎn)說明下H5與Native的交互流程(這里是我之前做Hybrid框架時(shí)候跟Native同事的交互約定,小程序應(yīng)該大同小異):
我們一般是在全局上會(huì)有一個(gè)對象,保存所有需要Native執(zhí)行函數(shù)的對象,比如這里的onLaunch,Native在執(zhí)行到一個(gè)狀態(tài)時(shí)候會(huì)調(diào)用js全局環(huán)境該對象上的一個(gè)函數(shù)
因?yàn)槲覀僯s注冊native執(zhí)行是以字符串key作為標(biāo)志,所以Native執(zhí)行的時(shí)候可能是window.app['onLauch...']('參數(shù)')
而我們在window對象上會(huì)使用bind的方式將對應(yīng)的作用域環(huán)境保留下來,這個(gè)時(shí)候執(zhí)行的邏輯便是正確的
這里在小程序全局沒有找到對應(yīng)的標(biāo)識(shí),這里猜測是直接在app對象上,Native會(huì)直接執(zhí)行APP對象上面的方法,但是我這里有個(gè)疑問是View級別如果想注冊個(gè)全局事件該怎么做,這個(gè)留到后面來看看吧,這里是Native載入webview時(shí),會(huì)執(zhí)行對象定義的onLaunch事件,在下面的代碼看得到:
這里會(huì)結(jié)合app.json獲取首先加載頁面的信息,默認(rèn)取pages數(shù)組第一個(gè),但是具體哪里獲取和設(shè)置的代碼沒有找到,也跟主流程無關(guān),我們這里忽略......然后我們看到代碼執(zhí)行了onShow邏輯:
然后流轉(zhuǎn)到注冊微信容器層面的事件,我覺得,無論如何,這里應(yīng)該是像微信容器注冊事件了吧,但是我找不到全局的key
Page流程
如果有微信小程序的同學(xué),麻煩這里指點(diǎn)一下,是不是猜測正確,順便可以幫忙說明下這里,這里也是我覺得全局key,被Native調(diào)用的點(diǎn),然后,邏輯上會(huì)獲取默認(rèn)view的類開始做實(shí)例化,我們這里來到view級別代碼:
//index.js //獲取應(yīng)用實(shí)例 const app = getApp() Page({ data: { motto: 'Hello Wor11ld', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, //事件處理函數(shù) bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 由于 getUserInfo 是網(wǎng)絡(luò)請求,可能會(huì)在 Page.onLoad 之后才返回 // 所以此處加入 callback 以防止這種情況 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在沒有 open-type=getUserInfo 版本的兼容處理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } })
他首先一來便獲取了當(dāng)前app實(shí)例:
const app = getApp()
其次開始了view實(shí)例化流程,這個(gè)是Page的類入口,大家要注意view.js只是定義的類,但是其實(shí)例化應(yīng)該在全局的控制器,其實(shí)例化在這里完成的:
總結(jié)
我們這里一起瞎子摸象一般對微信小程序架構(gòu)做了簡單的摸索,這里發(fā)現(xiàn)事實(shí)上小程序流程與自己所想有一些出入,這里初步認(rèn)為流程是這樣的:
① 我們寫好小程序代碼后,提交代碼
② 在發(fā)布流程中我們的代碼經(jīng)過構(gòu)建流程,app.json以及入口的index.html(偽造頁面),重新組裝為一個(gè)只有js代碼的空頁面
③ 這里開始載入流程,用戶點(diǎn)擊一個(gè)微信按鈕,進(jìn)入小程序
④ 微信容器開啟Hybrid容器,webview載入入口頁面(我感覺應(yīng)該有個(gè)規(guī)則可以通過url去打開固定一個(gè)小程序頁面,這里后續(xù)碰到開發(fā)案例再說)
⑤ webview執(zhí)行環(huán)境實(shí)例化App,其后自動(dòng)裝載默認(rèn)Page(這里默認(rèn)是index)
PS:這里我有個(gè)很疑惑的點(diǎn),微信Native容器的各個(gè)事件點(diǎn)什么時(shí)候執(zhí)行,由誰執(zhí)行?
⑥ 進(jìn)入頁面渲染邏輯
⑦ ......
這里我還比較在意,執(zhí)行事件后,對應(yīng)Native頁面是如何進(jìn)行更新的,所以我們這里關(guān)注下這段代碼:
1 debugger; 2 this.setData({ 3 userInfo: app.globalData.userInfo, 4 hasUserInfo: true 5 })
這里出現(xiàn)了一段非常關(guān)鍵的代碼:
可以看到,我們這里往微信容器注冊了一個(gè)appDataChange的異步事件,而這個(gè)時(shí)候就將所有的邏輯交給了Native本身,Native執(zhí)行結(jié)束后會(huì)根據(jù)webviewIds找到后續(xù)要執(zhí)行的回調(diào)繼續(xù)執(zhí)行。
以上是“小程序執(zhí)行流程的案例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!