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

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

WBOY
發布: 2022-02-24 17:44:33
轉載
8966 人瀏覽過

本篇文章為大家帶來了關於微信小程式開發的相關知識,主要介紹了微信小程式開發的步驟,起哄包括了準備工作、框架介紹、程式開發以及設計規範的相關問題,希望對大家有幫助。

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

【相關學習推薦:小程式開發教學

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

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/

详细信息可具体参考《小程序开发指南

【相关学习推荐:小程序开发教程

以上是總結分享微信小程式的開發步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板