天天看點

微信小程式開發入門教程

在這篇微信小程式開發教程中,我們将向你介紹快速試用和體驗微信小程式開發工具和官方示例Demo。

本系列教程将引導你完成如下任務:

下載下傳微信web開發者工具和小程式官方Demo。

添加小程式示例Demo到項目

體驗小程式常用元件及接口

第一部分 下載下傳開發者工具和官方Demo

微信小程式開發者工具

為了幫助開發者簡單和高效地開發微信小程式,微信官方推出了全新的微信小程式開發者工具,該工具內建了開發調試、代碼編輯及程式釋出等功能。

開發者工具根據作業系統類型選擇相應的下載下傳位址

微信小程式官方示例Demo

demo下載下傳後解壓即可。 

第二章 添加小程式Demo項目

啟動開發者工具後,如下圖所示

微信小程式開發入門教程

使用微信掃描二維碼登入

微信小程式開發入門教程

點選确認登入後,調試類型選擇“本地小程式項目”

微信小程式開發入門教程

點再擊添加項目

微信小程式開發入門教程

項目配置時

APPID點選“無AppID”

項目名稱,可以填“方倍工作室小程式開發入門教程”

項目目錄選擇官方Demo解壓後的位址

微信小程式開發入門教程

 最後點選“添加項目”按鈕。

第三章 體驗官方Demo元件和接口

 在上方的手機類型中,将手機型号選擇成适合螢幕分辨率大小或自己喜歡的類型,比如iPhone5

微信小程式開發入門教程

在底部的小程式預覽視窗中檢視點選各元件檢視官方自帶的類型,以及在接口中體驗各種接口的接口能力。

微信小程式開發入門教程
微信小程式開發入門教程

比如在“接口”->"開放接口"->“擷取使用者資訊”中,可以獲得目前登入使用者的昵稱和頭像。

微信小程式開發入門教程

第四章 總結

入門教程就這樣簡單?是的,做為入門來講,就隻有這些東西。但其實裡面已經包括很多了。

1. 下載下傳了微信小程式開發者工具,後續開發小程式都要使用這個。

2. 建立了小程式項目,雖然是本地的,但真實的也和這一樣。

3. 體驗了官方的Demo,并且使用接口獲得了使用者的個人資訊。

接下來該做什麼呢?你可以購買微信小程式開發視訊,書中包括了微信小程式開發幾乎所有的接口講解,總共内容有40多G,以及為0基礎初學者準備的前端開發視訊教程。

繼續閱讀