總結分享微信小程式的開發步驟

【相關學習推薦：】

本文簡述微信小程式開發步驟,詳細資訊請參考微信開發檔案

1、準備工作

1：註冊 https://mp.weixin.qq.com/wxopen/waregister?action=step1
用沒有註冊過微信公眾平臺的郵箱註冊一個微信公眾號， 申請帳號 , 根據指引填寫資訊和提交相應的資料，就可以擁有自己的小程式帳號。註冊完成之後開始登入。

2：登入 https://mp.weixin.qq.com

我們可以在選單 「設定」-「開發設定」 看到小程式的 AppID 了 。小程式的 AppID 相當於小程式平臺的一個身份證，後續你會在很多地方要用到 AppID (注意這裡要區別於服務號或訂閱號的 AppID)。有了小程式帳號之後，我們需要一個工具來開發小程式。
根據官方教學進行開發 https://developers.weixin.qq.com/miniprogram/dev/framework/

3：安裝開發工具

前往 開發者工具下載 頁面，根據自己的作業系統下載對應的安裝包進行安裝，有關開發者工具更詳細的介紹可以檢視 《開發者工具介紹》 。開啟小程式開發者工具，用微信掃碼登入開發者工具，準備開發你的第一個小程式吧！
關於開發工具的相關資訊，可通過 【微信開發者工具 】瞭解詳情

4：開啟第一個小程式

新建專案選擇小程式專案，選擇程式碼存放的硬碟路徑，填入剛剛申請到的小程式的 AppID，給你的專案起一個好聽的名字，最後，勾選 「建立 QuickStart 專案」 (注意: 你要選擇一個空的目錄才會有這個選項)，點選確定，你就得到了你的第一個小程式了，點選頂部選單編譯就可以在 IDE 預覽你的第一個小程式。

5：編譯預覽

點選工具上的編譯按鈕，可以在工具的左側模擬器介面看到這個小程式的表現，也可以點選預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小程式。

以上版塊內容可在 微信開放檔案 中【起步】-【開始】中檢視。

2、框架介紹

小程式開發框架的目標是通過儘可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。

整個小程式框架系統分為兩部分：邏輯層（App Service）和 檢視層（View）。小程式提供了自己的檢視層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在檢視層與邏輯層間提供了資料傳輸和事件系統，讓開發者能夠專注於資料與邏輯。

響應的資料繫結
框架的核心是一個響應的資料繫結系統，可以讓資料與檢視非常簡單地保持同步。當做資料修改的時候，只需要在邏輯層修改資料，檢視層就會做相應的更新。

頁面管理
框架 管理了整個小程式的頁面路由，可以做到頁面間的無縫切換，並給以頁面完整的生命週期。開發者需要做的只是將頁面的資料、方法、生命週期函數註冊到 框架 中，其他的一切複雜的操作都交由 框架 處理。

基礎元件
框架 提供了一套基礎的元件，這些元件自帶微信風格的樣式以及特殊的邏輯，開發者可以通過組合基礎元件，建立出強大的微信小程式 。

豐富的 API
框架 提供豐富的微信原生 API，可以方便的調起微信提供的能力，如獲取使用者資訊，本地儲存，支付功能等。

3、程式開發

當你學會了HTML+CSS+js,看了微信開發檔案，你就可以很簡單地開始微信小程式的開發啦~~

• 入口
  每個小程式都需要在 app.js 中呼叫 App 方法註冊小程式範例，繫結生命週期回撥函數、錯誤監聽和頁面不存在監聽函數等。

// app.jsApp({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'})

整個小程式只有一個 App 範例，是全部頁面共用的。開發者可以通過 getApp 方法獲取到全域性唯一的 App 範例，獲取App上的資料或呼叫開發者註冊在 App 上的函數。

// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data

• 全域性設定
  小程式根目錄下的 app.json 檔案用來對微信小程式進行全域性設定，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。
  詳見【全域性設定】

• 頁面設定
  每一個小程式頁面也可以使用同名 .json 檔案來對本頁面的視窗表現進行設定，頁面中設定項會覆蓋 app.json 的 window 中相同的設定項。
  詳見【頁面設定】

• 小程式生命週期
  註冊小程式。接受一個 Object 引數，其指定小程式的生命週期回撥等。
  詳細api詳見https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

• 頁面生命週期
  註冊小程式中的一個頁面。接受一個 Object 型別引數，其指定頁面的初始資料、生命週期回撥、事件處理常式等。
  生命週期物件詳見https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

• 元件
  自帶元件庫weUI

• API
  豐富的api
  https://developers.weixin.qq.com/miniprogram/dev/api/

詳細資訊可具體參考《小程式開發指南》

【相關學習推薦：】

以上就是總結分享微信小程式的開發步驟的詳細內容，更多請關注TW511.COM其它相關文章！