1. 程式人生 > >小程序開發快速入門教程(附源碼)

小程序開發快速入門教程(附源碼)

五分鐘上手-微信小程序

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

2:登錄 https://mp.weixin.qq.com

我們可以在菜單 “設置”-“開發設置” 看到小程序的 AppID 了 。小程序的 AppID
相當於小程序平臺的一個身份證,後續你會在很多地方要用到 AppID (註意這裏要區別於服務號或訂閱號的
AppID)。有了小程序帳號之後,我們需要一個工具來開發小程序。

根據官方教程進行開發https://mp.weixin.qq.com/debug/wxadoc/dev/

3:安裝開發工具

前往 開發者工具下載頁面 ,根據自己的操作系統下載對應的安裝包進行安裝,有關開發者工具更詳細的介紹可以查看 《開發者工具介紹》 。打開小程序開發者工具,用微信掃碼登錄開發者工具,準備開發你的第一個小程序吧!我的電腦是64位的:



4:安裝完成之後

你的第一個小程序開啟:新建項目選擇小程序項目,選擇代碼存放的硬盤路徑,填入剛剛申請到的小程序的
AppID,給你的項目起一個好聽的名字,最後,勾選 "創建 QuickStart 項目" (註意:

你要選擇一個空的目錄才會有這個選項),點擊確定,你就得到了你的第一個小程序了,點擊頂部菜單編譯就可以在 IDE 預覽你的第一個小程序。


5:編譯預覽

點擊工具上的編譯按鈕,可以在工具的左側模擬器界面看到這個小程序的表現,也可以點擊預覽按鈕,通過微信的掃一掃在手機上體驗你的第一個小程序。OK,你已經成功創建了你的第一個小程序,並且在微信客戶端上體驗到它流暢的表現。

小程序初始化目錄:

1:page 頁面文件夾 存放項目頁面渲染相關文件


2:utils 存放js庫和數字格式化文件


3: 配置文件


我是分割線===開發ing

接下來就要開始開發了,第一次開發微信小程序都顯得特別的生疏,以至於無從下手,糾結了很久,找朋友要了一套模板,導入自己的小程序開發工具裏面,對整個小程序目錄文件結構有了一定的了解,就能很快的上手。

另外也在網站,GitHub上找了很多完整的小程序源碼,學習起來速度也是相當快。

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

框架提供了自己的視圖層描述語言 WXML 和 WXSS,以及基於 JavaScript 的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統,可以讓開發者可以方便的聚焦於數據與邏輯上。

1:第一個簡單小程序:極客小寨

2:第二個簡單小程序:輸入網址生成相應的二維碼

完成一個最簡易的界面

3:第三個簡單小程序:發送祝福


4:第四個簡單小程序:仿網易雲音樂

網易雲音樂

示例步驟:直接導入源碼,即可查看左側對應頁面顯示信息

1:右鍵鍵盤打開

2:把源碼復制黏貼進去,替換掉原來初始化目錄,點擊普通編譯,即可查看左側效果,根據需要,作相應的增刪。

到此為止小程序順利入門,三天上手,接下來就是一系列的邊學學習開發文旦邊開發邊踩坑的過程了,多讀小程序源碼,前面也說了,和傳統開發模式有一定的差別,多看多百度,總結經驗,花些時間,項目也會越做越好。

關註【編程微刊】,點擊發現,即可獲取小程序源碼,持續關註,後續會有更多源碼上線哦

小程序開發快速入門教程(附源碼)