天天看點

微信小程式開發流程(适用于新手學習)

微信小程式開發類似于前端頁面開發,有前端開發經驗的同學能夠很快上手微信小程式的開發,但二者還是有些差別,具體内容可通過微信小程式開發文檔進行檢視學習——https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E4%BD%93%E9%AA%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F

微信小程式的開發過程如下:

一、環境搭建

小程式的開發要經過一下必要的兩步:

1、申請賬号

微信小程式開發流程(适用于新手學習)

小程式的賬号申請位址為:https://mp.weixin.qq.com/wxopen/waregister?action=step1

申請小程式賬号時要注意:每個郵箱僅能申請一個小程式賬号!!!

而且這個郵箱沒有綁定過微信公衆号(樓主之前踩過的坑——用綁定微信公衆号的郵箱申請小程式賬号,結果浪費了不少時間。這裡普及個知識,微信平台公衆平台的賬号一共有四種:服務号、訂閱号、小程式、企業微信号,服務号跟企業微信号時面向企業跟組織的,訂閱号個人也可擁有)

微信小程式開發流程(适用于新手學習)

 2、安裝開發者工具

微信小程式的開發者工具類似與前端的webStrom、dreamView,隻不過沒有前端開發工具好用,必須得吐槽一下!

小程式開發工具下載下傳位址及詳細介紹:https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E4%BD%A0%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%B0%8F%E7%A8%8B%E5%BA%8F

二、重要參數

AppId:這裡把AppId單獨列出來,是因為AppId相當于小程式平台的身份證号,有許多地方都需要用到它。登入小程式平台後,AppId可以在左側欄“開發”-“開發設定”中看到,也可以在點選左側“設定”後看到。

微信小程式開發流程(适用于新手學習)
微信小程式開發流程(适用于新手學習)
微信小程式開發流程(适用于新手學習)

在打開微信小程式開發工具後,在“項目目錄”中選擇代碼存盤路徑,然後需要填入小程式的AppId,給項目起好名字,最後勾選“QuickStart項目”。(注意: 你要選擇一個空的目錄才會有這個選項),點選确定,你就得到了你的第一個小程式了,點選頂部菜單編譯就可以在微信開發者工具中預覽你的第一個小程式。

微信小程式開發流程(适用于新手學習)

三、開發工具及目錄介紹

在小程式開發工具中建立好項目後,如下圖所示:

微信小程式開發流程(适用于新手學習)

小程式目錄結構包含描述整體程式的app 和多個描述各自頁面的pages。

目錄中以app開頭的檔案描述小程式的整體,可以了解為全局配置。app.js描述的是小程式的整體邏輯,app.json描述的是小程式的公共配置,這兩個檔案都是必須的。app.wxss是小程式的全局樣式表(類似與前端中的全局css),是非必需存在的。project.config.json是開發工具的配置檔案。

 pages用于指定小程式由哪些頁面組成,每一項都對應一個頁面的路徑(含檔案名) 資訊。檔案名不需要寫檔案字尾,架構會自動去尋找對于位置的 

.json

.js

.wxml

.wxss

 四個檔案進行處理。pages目錄中存放的是小程式要展示的頁面,每個頁面存放在一個檔案夾中,如index、logs檔案夾,以index為例,index.wxml為頁面(對應前端的html檔案),index.js處理頁面邏輯,index.wxss為頁面樣式表(對應前端的css檔案),index.json為頁面的配置檔案。注意:為了友善開發者減少配置項,描述頁面的四個檔案必須具有相同的路徑與檔案名。頁面檔案夾中,并不是所有檔案都是必須存在的,如果一個頁面為靜态頁面,不需要處理邏輯,那麼隻需要有.wxml檔案即可。pages中每個頁面都要在app.json中進行配置,如下圖所示,其中配置項的第一個檔案為首頁,如圖中index配置在第一項,首頁将展示其頁面。

微信小程式開發流程(适用于新手學習)

utils檔案為工具包,裡面可寫一些公用函數,可不存在。

----------------------------------------------------------------------------------------------------------------------------------------------------------

開發工具的使用:

1、代碼修改後按ctrl+s或點選編譯,會進行編譯,左側将展示編譯後的效果

微信小程式開發流程(适用于新手學習)

2、調試

點選調試後,會彈出控制台進行調試。具體調試方法與浏覽器中調試前端代碼類似,此處不再贅述。

微信小程式開發流程(适用于新手學習)

3、真機調試

點選真機調試,微信掃碼後可以在手機上看到小程式的效果

微信小程式開發流程(适用于新手學習)

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

微信小程式開發基本就是上述過程,具體文法及一些細節可參考“微信小程式開發文檔”。