Introduction:

WeChat mini program, a kind of mini program, the English name is Wechat Mini Program, is an application that does not require downloading and installation. It realizes the dream of having applications “at your fingertips”, allowing users to open applications by scanning or searching.

After the application is fully open, developers who are enterprises, governments, media, other organizations or individuals can apply to register mini programs. WeChat mini programs, WeChat subscription accounts, WeChat service accounts, and WeChat enterprise accounts are parallel systems.

We have been doing basic services recently, all of which are to improve the technical system. For the front end, we need to build a Hybrid system. If you are building an App, React Native is also a good choice. But there must be complete layering:

① The underlying framework solves the problem of development efficiency, turning the complex parts into a black box, and only showing three fixed tools for page development, and it can be developed in a fixed mode

② The engineering department encapsulates a minimal development environment for business developers. The best is a browser. If it is not possible, it will provide a browser-like debugging environment.

In this way, the business can Rapid iteration, because the codes written by business developers are similar, so the underlying framework and the engineering team (usually the same team) can solve many efficiency and performance problems at the bottom level.

A slightly larger company and a slightly more generous team will also do a lot of subsequent performance monitoring and error logging work simultaneously, thus forming a set of documents ->Development->Debugging->Build-> ;Release->Monitoring and analysis are a complete technical system

If such a system is formed, then even subsequent internal framework changes and technological innovations will be based on this system, but it is a pity , many teams will only do part of this path, but will not go deeper due to various reasons. They may feel that it is worthless, and the most terrifying behavior is to rashly change the basic framework before their own system is formed, so be careful!

In terms of third-party application access, WeChat should be the best. Baidu has direct accounts and other similar products, but its systematic feel still needs to be improved. Alibaba should also have similar products. When technical products are born, from our perspective, we don’t know much about them, so they are either poorly operated or poorly done.

Since the birth of mini programs, I have been paying attention to them. So far, the entire mini program system is very complete. Tencent mini programs and Tencent Cloud are deeply integrated. If you use the developer tools for internal testing, all It’s free. Pure JS can handle the front-end and back-end of the mini program. No servers, storage, CDN, or service codes are needed. It’s all free. After developing the back-end, you don’t need to operate and maintain it yourself. The rhythm of the big killer. I sometimes think about Tencent’s technical strength. It’s really strong!

Structure traceability of the mini program

The development documentation of the mini program is relatively complete. It is still the account application->demo process. Once you are familiar with it, you can start coding. The process of putting it on the shelves is ready. The front-end code is built with tools and then uploaded. The back-end service is maintained by itself and the address mapping is configured. We only focus on the development process here, and all can be done using its test account.

1 appid wx0c387cc8c19bdf78
2 appsecret acd6c02e2fdca183416df1269d2e3fb9

After more than a year of development, the documentation formed by the mini program has been relatively complete. We can make a rough judgment about the mini program from the documentation and demo:

Here is the code of the mini program that business personnel can see. From this code and operation, we can basically guess the outline of the mini program. Here, first take a look at its global controller 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ò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

An application will only have one APP instance, and the applet provides several basic event definitions for this single instance. The ones we use most should be onLaunch, onShow, and onHide (I haven’t written the applet yet, so I’m guessing ):

Let’s trace the execution logic of the applet architecture layer and how to instantiate it from APP to a view. Here we first clarify a few points:

① In fact, the WeChat applet still provides a webview execution environment, so we can still access properties such as window and location in the js environment

② All the displays provided by the WeChat applet are Native Customized UI, so don’t think about DOM operations

You can imagine that there is a webview in the mini program interface that executes the real code logic, but this webview does nothing except load js programs. Do it, and all page rendering is Native communication performed by js through URL Schema or JSCore, which is called Native to complete the page rendering according to the set rules.

Global Controller 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事件，這里對(duì)應(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è)對(duì)象，保存所有需要Native執(zhí)行函數(shù)的對(duì)象，比如這里的onLaunch，Native在執(zhí)行到一個(gè)狀態(tài)時(shí)候會(huì)調(diào)用js全局環(huán)境該對(duì)象上的一個(gè)函數(shù)
因?yàn)槲覀僯s注冊native執(zhí)行是以字符串key作為標(biāo)志，所以Native執(zhí)行的時(shí)候可能是window.app['onLauch...']('參數(shù)')
而我們在window對(duì)象上會(huì)使用bind的方式將對(duì)應(yīng)的作用域環(huán)境保留下來，這個(gè)時(shí)候執(zhí)行的邏輯便是正確的

這里在小程序全局沒有找到對(duì)應(yīng)的標(biāo)識(shí)，這里猜測是直接在app對(duì)象上，Native會(huì)直接執(zhí)行APP對(duì)象上面的方法，但是我這里有個(gè)疑問是View級(jí)別如果想注冊個(gè)全局事件該怎么做，這個(gè)留到后面來看看吧，這里是Native載入webview時(shí)，會(huì)執(zhí)行對(duì)象定義的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級(jí)別代碼：

//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ò)請(qǐng)求，可能會(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é)

我們這里一起瞎子摸象一般對(duì)微信小程序架構(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í)行事件后，對(duì)應(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í)行。

至于，容器如何使用webviewId找到對(duì)應(yīng)函數(shù)的代碼，我沒有找到。至此，我們對(duì)小程序結(jié)構(gòu)的初步探索便結(jié)束了，我們本周后面時(shí)間繼續(xù)來對(duì)小程序進(jìn)行深入學(xué)習(xí)。

相關(guān)推薦：小程序開發(fā)教程

The above is the detailed content of Mini program execution process analysis. For more information, please follow other related articles on the PHP Chinese website!