微信小程序啟動過程

(轉)

小程序的啟動

小程序啟動前，會加載代碼到本地。通過讀取全局app.json里的pages，就能知道你所有注冊的頁面。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

如

pages/index/index:表示第一頁面所有內容在index下

pages/index/logs：表示第二頁面所有內容在logs下。

注：pages數組的第一注冊頁面為首頁，也就是pages/index/index時打開小程序的首頁。

小程序啟動后，在app.js里定義的App 實例的onLaunch函數就會執行：

App({
  onLaunch: function () {
    // 小程序啟動之后 觸發
  }
})

注意：整個小程序只有一個 App 實例，為所有的頁面共享。App實例有多個函數（onShow，onHide，onError等）。

 

程序和頁面

首先觀察下pages/logs/logs頁面有4個文件格式，包括

（1）logs.json（配置）,

（2）logs.wxml（內容）,

（3）logs.wxss（樣式）。

（4）,logs.js（交互）

順序：

（1）首先，根據 logs.json 配置生成一個界面，logs.json配置好頂部的顏色和文字。

（2）其次，裝載這個頁面的 WXML 結構和 WXSS 樣式。

（3）最后，裝載logs.js，渲染當前頁面。

舉例（logs.js）：

    Page({
      data: { // 參與頁面渲染的數據
        logs: []
      },
      onLoad: function () {
        // 頁面渲染后 執行
      }
    })

Page是頁面構造器（生成頁面），把data數據和wxml一起渲染得到最終結果。

至於onLoad函數會在渲染結束后執行，用來處理你的邏輯。

 

組件

小程序提供了豐富的組件，供開發者使用。

如地圖：

<map></map>

 

如果，我們希望地圖一開始的中心的經緯度是廣州，那么你需要聲明地圖的 longitude(中心經度) 和 latitude(中心緯度) 兩個屬性，通過給傳遞值給組件的屬性，讓組件可以以不同的狀態去展現。

<map longitude="廣州經度" latitude="廣州緯度"></map>

也可以，你可以在 js 編寫 markertap 函數來處理，用戶點擊了地圖上的某個標記的事件

<map bindmarkertap="markertap" longitude="廣州經度" latitude="廣州緯度"></map>

 

小程序的API接口

小程序提供了很多 API 給開發者去使用，例如獲取用戶信息、微信支付等等。

如，獲取位置：

    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        var latitude = res.latitude // 經度
        var longitude = res.longitude // 緯度
      }
    })

 

微信掃一掃：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

 

注意：多數 API 的回調都是異步，你需要處理好代碼邏輯的異步問題。

--------------------- 
作者：ssyes123 

原文：https://blog.csdn.net/ssyes123/article/details/79763817