本篇文章為大家?guī)?lái)了關(guān)於微信小程式開(kāi)發(fā)的相關(guān)知識(shí)，主要介紹了微信小程式開(kāi)發(fā)的步驟，起哄包括了準(zhǔn)備工作、框架介紹、程式開(kāi)發(fā)以及設(shè)計(jì)規(guī)範(fàn)的相關(guān)問(wèn)題，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程式開(kāi)發(fā)教學(xué)】

本文簡(jiǎn)述微信小程式開(kāi)發(fā)步驟,詳細(xì)資訊請(qǐng)參考微信開(kāi)發(fā)文件

1、準(zhǔn)備工作

1：註冊(cè)https://mp.weixin.qq.com/wxopen/waregister?action=step1
用沒(méi)有註冊(cè)過(guò)微信公眾平臺(tái)的郵箱註冊(cè)一個(gè)微信公眾號(hào)， 申請(qǐng)帳號(hào), 根據(jù)指引填寫(xiě)資訊和提交相應(yīng)的資料，就可以擁有自己的小程式帳號(hào)。註冊(cè)完成之後開(kāi)始登入。

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

我們可以在選單 「設(shè)定」-「開(kāi)發(fā)設(shè)定」 看到小程式的 AppID 了 。小程式的 AppID 相當(dāng)於小程式平臺(tái)的身分證，後續(xù)你會(huì)在很多地方要用到 AppID (注意這裡要區(qū)別於服務(wù)號(hào)碼或訂閱號(hào)碼的 AppID)。有了小程式帳號(hào)之後，我們需要一個(gè)工具來(lái)開(kāi)發(fā)小程式。
依照官方教學(xué)進(jìn)行開(kāi)發(fā)https://developers.weixin.qq.com/miniprogram/dev/framework/

3：安裝開(kāi)發(fā)工具?

前往開(kāi)發(fā)者工具下載頁(yè)面，根據(jù)自己的作業(yè)系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝，有關(guān)開(kāi)發(fā)者工具更詳細(xì)的介紹可以查看《開(kāi)發(fā)者工具介紹》 。開(kāi)啟小程式開(kāi)發(fā)者工具，用微信掃碼登入開(kāi)發(fā)者工具，準(zhǔn)備開(kāi)發(fā)你的第一個(gè)小程式吧！
關(guān)於開(kāi)發(fā)工具的相關(guān)信息，可透過(guò)【微信開(kāi)發(fā)者工具】了解詳情

4：開(kāi)啟第一個(gè)小程式

新專(zhuān)案選擇小程式項(xiàng)目，選擇程式碼存放的硬碟路徑，填入剛申請(qǐng)到的小程式的AppID，給你的專(zhuān)案一個(gè)好聽(tīng)的名字，最後，勾選「建立QuickStart 專(zhuān)案」 (注意: 你要選擇一個(gè)空的目錄才會(huì)有這個(gè)選項(xiàng)) ，點(diǎn)擊確定，你就得到了你的第一個(gè)小程式了，點(diǎn)擊頂部選單編譯就可以在IDE 預(yù)覽你的第一個(gè)小程式。

5：編譯預(yù)覽

點(diǎn)擊工具上的編譯按鈕，可以在工具的左側(cè)模擬器介面看到這個(gè)小程式的表現(xiàn)，也可以點(diǎn)選預(yù)覽按鈕，透過(guò)微信的掃一掃在手機(jī)上體驗(yàn)?zāi)愕牡谝粋€(gè)小程式。

以上版塊內(nèi)容可在 微信開(kāi)放文件 中【起步】-【開(kāi)始】中檢視。

2、框架介紹

小程式開(kāi)發(fā)框架的目標(biāo)是透過(guò)盡可能簡(jiǎn)單、高效的方式讓開(kāi)發(fā)者可以在微信中開(kāi)發(fā)具有原生 APP 體驗(yàn)的服務(wù)。

整個(gè)小程式框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）。小程式提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了資料傳輸和事件系統(tǒng)，讓開(kāi)發(fā)者能夠?qū)Ｗ㈧顿Y料與邏輯。

回應(yīng)的資料綁定
框架的核心是一個(gè)回應(yīng)的資料綁定係統(tǒng)，可以讓資料與視圖非常簡(jiǎn)單地保持同步。當(dāng)做資料修改的時(shí)候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會(huì)做相對(duì)應(yīng)的更新。

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

基礎(chǔ)元件
框架提供了一套基礎(chǔ)的元件，這些元件自帶微信風(fēng)格的樣式以及特殊的邏輯，開(kāi)發(fā)者可以透過(guò)組合基礎(chǔ)元件，創(chuàng)造出強(qiáng)大的微信小程式。

豐富的 API
框架 提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶(hù)信息，本地存儲(chǔ)，支付功能等。

3、程式開(kāi)發(fā)

當(dāng)你學(xué)會(huì)了HTML CSS js,看了微信開(kāi)發(fā)文檔，你就可以很簡(jiǎn)單地開(kāi)始微信小程式的開(kāi)發(fā)啦~~

• 入口
  每個(gè)小程式都需要在app.js 中呼叫App 方法註冊(cè)小程式實(shí)例，綁定生命週期回呼函數(shù)、錯(cuò)誤監(jiān)聽(tīng)和頁(yè)面不存在監(jiān)聽(tīng)函數(shù)等。

//?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'})

整個(gè)小程式只有一個(gè) App 實(shí)例，是全部頁(yè)面共享的。開(kāi)發(fā)者可以透過(guò) getApp 方法取得到全域唯一的 App 實(shí)例，取得App上的資料或呼叫開(kāi)發(fā)者註冊(cè)在 App 上的函數(shù)。

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

• 全局配置
  小程序根目錄下的 app.json 文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
  詳見(jiàn)【全局配置】

• 頁(yè)面配置
  每一個(gè)小程序頁(yè)面也可以使用同名 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。
  詳見(jiàn)【頁(yè)面配置】

• 小程序生命周期
  注冊(cè)小程序。接受一個(gè) Object 參數(shù)，其指定小程序的生命周期回調(diào)等。
  詳細(xì)api詳見(jiàn)https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

• 頁(yè)面生命周期
  注冊(cè)小程序中的一個(gè)頁(yè)面。接受一個(gè) Object 類(lèi)型參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。
  生命周期對(duì)象詳見(jiàn)https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

• 組件
  自帶組件庫(kù)weUI

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

詳細(xì)信息可具體參考《小程序開(kāi)發(fā)指南》

【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

以上是總結(jié)分享微信小程式的開(kāi)發(fā)步驟的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！