微信小程序學習筆記(一)-- 了解微信小程序

一、什么是小程序(了解)

小程序是一種不需要下載安裝即可使用的應用,它實現(xiàn)了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。也體現(xiàn)了“用完即走”的理念,用戶不用關心是否安裝太多應用的問題。應用將無處不在,隨時可用,但又無需安裝卸載。

二、小程序的種類(了解)

微信小程序、支付寶小程序、頭條小程序、百度小程序、QQ小程序

三、小程序的發(fā)展史(了解)

image

四、小程序的優(yōu)勢(了解)

對于開發(fā)者而言,小程序開發(fā)門檻相對較低,難度不及APP,能夠滿足簡單的基礎應用,適合生活服務類線下商鋪以及非剛需低頻應用的轉換。 對于用戶來說,能夠節(jié)約使用時間成本和手機內存空間;對于開發(fā)者來說也能節(jié)約開發(fā)和推廣成本。

五、小程序展示(熟悉)

微信小程序 - 微信首頁下拉
支付寶小程序 - 朋友 - 小程序
QQ小程序 - QQ首頁下拉
頭條小程序 - 今日頭條搜索 - 小程序入口 點擊左上角圖標
百度小程序 - 百度APP下拉

六、微信小程序介紹(了解)

微信小程序提供了一個簡單、高效的應用開發(fā)框架和豐富的組件及API,幫助開發(fā)者在微信中開發(fā)具有原生 APP 體驗的服務。

七、準備工作(掌握)

1、申請賬號

進入小程序注冊頁 根據(jù)指引填寫信息和提交相應的資料,申請自己的微信小程序帳號

登陸小程序后臺,在“設置” - “開發(fā)設置”中查看自己的APPID

小程序的 AppID 相當于小程序平臺的一個身份證,后續(xù)你會在很多地方要用到 AppID

2、安裝開發(fā)者工具

開發(fā)者工具下載頁面 下載微信開發(fā)者工具

根據(jù)自己的硬件環(huán)境選擇穩(wěn)定版本下載即可

八、體驗小程序

打開開發(fā)者工具,使用自己的微信掃碼登錄即可


開發(fā)者工具登錄之后可以看到有兩個大的分類,分別是【小程序項目】和【公眾號項目】

【小程序項目】包括“小程序”、“小游戲”、“代碼片段”,主要用來開發(fā)、調試、發(fā)布微信小程序以及微信小游戲;

【公眾號項目】主要用來開發(fā)和調試微信公眾號、訂閱號以及服務號等的網(wǎng)頁應用。我在這里主要帶大家學習的是【小程序項目】中的小程序。

點擊“+”號

頁面中我們需要添加的選項有【項目名稱】、【目錄】、【AppID】、【開發(fā)模式】、【后端服務】、【語言】,

重中之重的是AppID這個選項,在第七步中我們已經(jīng)知道如何獲取自己的AppID,只需要正確填入即可。

【項目名稱】填寫為lesson_01

【目錄】即為自己的項目地址

【AppID】正確填寫即可

【開發(fā)模式】選擇“小程序”即可

【后端服務】選擇“不使用云服務”

【語言】選擇“javascript”。

點擊【新建】,將成功創(chuàng)建一個微信官方所提供的示例項目

點擊工具上的編譯按鈕,可以在工具的左側模擬器界面看到這個小程序的表現(xiàn),也可以點擊預覽按鈕,通過微信的掃一掃在手機上體驗你的第一個小程序。

九、開發(fā)者工具界面功能介紹(掌握)

創(chuàng)建項目成功后,在主界面頂部有13個選項卡,分別為【模擬器】、【編輯器】、【調試器】、【云開發(fā)】、【小程序模式】、【編譯】、【真機調試】、【切后臺】、【清緩存】、【上傳】、【版本管理】、【社區(qū)】、【詳情】。

1、 模擬器選項卡

點擊【模擬器】選項卡,可以打開和關閉模擬器,在模擬器的頂部有一個狀態(tài)欄

“iPhone5”這一欄可以讓開發(fā)者選擇模擬器的機型,可以測試代碼在各機型上的運行情況;“100%”這一欄可以調整模擬器的大小,讓開發(fā)者可以清楚的看到效果的全貌;“WiFi”這一欄可以讓我們選擇不同的網(wǎng)絡環(huán)境測試代碼;“模擬操作”這一欄默認為Home選項和返回選項;再往右為模擬器的聲音的開關;中間的點擊可以把模擬器單獨作為一個頁面顯示;最右側的點擊可以調整模擬器的位置,默認在左,點擊可以調整到右側,

2、編輯器選項卡

點擊【編輯器】選項卡,可以打開和關閉編輯器

3、調試器選項卡

點擊【調試器】選項卡,可以打開和關閉調試器

4、云開發(fā)選項卡

點擊【云開發(fā)】選項卡,可以開通是“小程序·云開發(fā)”

云開發(fā)為開發(fā)者提供完整的原生云端支持和微信服務支持,弱化后端和運維概念,無需搭建服務器,使用平臺提供的 API 進行核心業(yè)務開發(fā),即可實現(xiàn)快速上線和迭代,同時這一能力,同開發(fā)者已經(jīng)使用的云服務相互兼容,并不互斥。

5、小程序模式選項卡

點擊【小程序】選項卡,可以選擇插件模式

6、編譯選項卡

點擊【編譯】選項卡,指定編輯哪一個頁面,小程序默認編輯的是app.json文件中“pages”選項中的第一個頁面,使用該功能可以提高開發(fā)的效率。

點擊【預覽】可以使用手機微信掃碼進行真機預覽效果。

7、真機調試選項卡

點擊【真機調試】選項卡,可以在手機上微信掃碼直接查看效果

8、切后臺選項卡

點擊【切后臺】選項卡,可以在模擬器中模擬應用的前后臺切換操作。

9、清緩存選項卡

點擊【清緩存】選項卡,會出現(xiàn)【清除數(shù)據(jù)緩存】、【清除文件緩存】、【清除授權數(shù)據(jù)】、【清除網(wǎng)絡緩存】、【清除登錄狀態(tài)】、【全部清除】幾個選項

10、上傳選項卡

點擊【上傳】選項卡,會把當前代碼上傳到微信服務器,并且自動編譯,在微信小程序的后臺生成一個體驗的二維碼,開發(fā)者可以測試代碼。

11、版本管理選項卡

點擊【版本管理】選項卡,可以使用微信提供的Git工具管理項目中的代碼。

12、社區(qū)選項卡

點擊【社區(qū)】選項卡,可以使用默認瀏覽器打開“微信開放社區(qū)”。

13、詳情選項卡

點擊【詳情】選項卡

【詳情】選項卡主要有3個大的功能:項目的設置、域名的信息、騰訊云狀態(tài),在后續(xù)課程中會有介紹

十、微信開發(fā)者工具常用快捷鍵(熟悉)

俗話說的好,工欲善其事必先利其器,我給大家?guī)砹烁@?,微信小程序開發(fā)者工具的快捷鍵,具體如下:

1、界面開關

Ctrl + shift + T: 工具欄

Ctrl + shift + D: 模擬器

Ctrl + shift + E: 編輯器

Ctrl + shift + T: 目錄樹

Ctrl + shift + I: 調試器

2、工具

Ctrl +B: 編譯

Ctrl +R: 刷新

Ctrl + shift + P: 預覽(自動預覽)

Ctrl + shift + U: 上傳

3、編輯

Ctrl + shift + F: 格式化代碼

Ctrl + P: 跳轉文件

Ctrl + E: 最近文件

Ctrl + [: 代碼行向左縮進

Ctrl + ]: 代碼行向右縮進

Ctrl +shift + [: 折疊代碼塊

Ctrl + shift + ]: 打開代碼塊

Alt + Up: 上移動一行

Alt + Down: 下移動一行

Shift + Alt + Up: 向上復制一行

Shift + Alt + Down:向下復制一行

Ctrl + shift + enter: 在當前行上方插入一行

Ctrl + shift + F: 全局搜索

4、光標相關

Ctrl + End:移動到文件結尾

Ctrl + Home:移動到文件開頭

Ctrl + I:選中當前行

Shift + End: 選擇從光標處到行尾

Shift + Home: 選擇從行首到光標處

Ctrl + shift + L: 選中所有匹配

Ctrl +D: 選中最近的匹配

Ctrl + U: 光標回退

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容