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

小程式開發快速入門教程(附原始碼)

五分鐘上手-微信小程式

image

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

image

3:安裝開發工具

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

image

4:安裝完成之後

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

image.gifimageimage

5:編譯預覽

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

圖片.png

小程式初始化目錄:

1:page 頁面資料夾 存放專案頁面渲染相關檔案


圖片.png

2:utils 存放js庫和數字格式化檔案


圖片.png

3: 配置檔案


圖片.png

我是分割線===開發ing

接下來就要開始開發了,我是第一次開發微信小程式,所以顯得特別的生疏,以至於無從下手,糾結了很久,找朋友要了一套模板,匯入自己的小程式開發工具裡面,對整個小程式目錄檔案結構有了一定的瞭解,就能很快的上手。

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

小程式的思想是:小程式開發框架的目標是通過儘可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。框架提供了自己的檢視層描述語言 WXML 和 WXSS,以及基於 JavaScript 的邏輯層框架,並在檢視層與邏輯層間提供了資料傳輸和事件系統,可以讓開發者可以方便的聚焦於資料與邏輯上。

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


圖片.png

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


完成一個最簡易的介面

3:第三個簡單小程式:傳送祝福


圖片.png

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


網易雲音樂

示例步驟:

1:右鍵鍵盤開啟



2:把原始碼複製黏貼進去,替換掉原來初始化目錄,點選普通編譯,即可檢視左側效果,根據需要,作相應的增刪


圖片.png

到此為止小程式順利入門,三天上手,接下來就是一系列的邊學學習開發文旦邊開發邊踩坑的過程了,多讀小程式原始碼,想想也不是那麼難的一件事情咯

直接匯入原始碼,即可檢視左側對應頁面顯示資訊,關注公眾號【程式設計微刊】,點擊發現,即可獲取小程式原始碼,持續關注,後續會有更多原始碼上線哦

關注「程式設計微刊」公眾號 ,在微信後臺回覆「領取資源」,獲取IT資源200G乾貨大全。