1. 程式人生 > 實用技巧 >新手視角帶你實戰入門微信小程式(基於2020最新版本)--ONE小程式註冊&開發工具下載&框架結構

新手視角帶你實戰入門微信小程式(基於2020最新版本)--ONE小程式註冊&開發工具下載&框架結構

新手視角帶你實戰入門微信小程式(基於2020最新版本)–ONE小程式註冊&開發工具下載&框架結構

微信⼩程式,簡稱⼩程式,英⽂名 Mini Program ,是⼀種不需要下載安裝即可使⽤的應⽤,它實現 了應⽤“觸⼿可及”的夢想,⽤⼾掃⼀掃或搜⼀下即可開啟應⽤


文章目錄


微信小程式的優勢

  1. 微信爸爸出品,有海量⽤⼾,⽽且粘性很⾼,在微信⾥開發產品更容易觸達⽤⼾;
  2. 推⼴app或公眾號的成本太⾼,現在人人手機有微信,推廣只需一個二維碼,安全放心。
  3. 開發適配成本低,開發週期2周左右,省事又省錢。
  4. 唯一稽核平臺,最快2小時過審,容易⼩規模試錯,然後快速迭代。
  5. 跨平臺!開發一個小程式,至少可以在安卓和蘋果使用,美滋滋。

一、小程式賬戶註冊

親測!個人註冊相當簡單,有微訊號即可~

在這裡插入圖片描述

注意,小夥伴們也可以直接度娘。但千萬要注意不要被廣告忽悠,看準微信域名 weixin.qq.com

百度出來首頁應該是這樣
在這裡插入圖片描述
直接點選小程式即可~
就算小夥伴以前有公眾號賬戶,也要重新申請小程式賬戶

  • 註冊三連
    第一步:
    在這裡插入圖片描述
    第二步:

    第三步:
    在這裡插入圖片描述
    主體是個人的話,小夥伴選擇個人後,填寫相關認證就好啦,全程5分鐘搞定┗( ▔, ▔ )┛~


  • 成功登陸後
    進入後臺逛一逛

很關鍵的引數AppID!
可以在選單 “開發”-“開發設定” 看到小程式的 AppID 了 。
在這裡插入圖片描述
這個AppID後續開發環境需要使用哦o(´^`)o


二、開發工具下載

推薦使用官方開發工具,好用,穩定,生態很好~


  • 下載

官方下載連結

在這裡插入圖片描述
新手推薦穩定版,要不然因為開發環境原因出現報錯會讓你程式設計體驗極差╮(╯﹏╰)╭

安裝沒啥難度,沒有環境變數需要配置,全程下一步就好啦


這裡省略1000字。。。

long time later…

吶~ (=´ω`=)
在這裡插入圖片描述
完成啦!

  • 登陸

微訊號掃碼登陸即可,就像登陸電腦微信一樣



三、小程式的HELLO WORLD

開啟小程式開發者工具,用微信掃碼登入開發者工具,準備開發你的第一個小程式吧!

你的第一個小程式
在這裡插入圖片描述

新建專案選擇小程式專案,選擇程式碼存放的硬碟路徑,填入剛剛申請到的小程式的 AppID,給你的專案起一個好聽的名字,勾選 “不使用雲服務” (注意: 你要選擇一個空的目錄才可以建立專案),點選新建,你就得到了你的第一個小程式了,點選頂部選單編譯就可以在微信開發者工具中預覽你的第一個小程式。
在這裡插入圖片描述

接下來我們來預覽一下這個小程式的效果。

編譯預覽
點選工具上的編譯按鈕,可以在工具的左側模擬器介面看到這個小程式的表現,也可以點選預覽按鈕,通過微信的掃一掃在手機上體驗你的第一個小程式。
在這裡插入圖片描述

通過這個章節,你已經成功建立了你的第一個小程式,並且在微信客戶端上體驗到它流暢的表現。



四、微信小程式專案程式碼結構

  • 開發者工具結構

在這裡插入圖片描述

  • 小程式專案程式碼結構

在這裡插入圖片描述
主要有兩個大資料夾pages與utils

pages直譯過來就是頁面啦,對,你的小程式有多少頁面,pages裡面就有多少子資料夾(`・ω・´)

這個Hello World程式就有2個頁面,一個是index頁面,一個是logs頁面


每個頁面都是由4個程式碼檔案共同維護

utils裡面有種全域性初始化變數的感覺~如果你的子頁面不指定特殊的樣式,預設用的就是utils裡面的啦


  • 一些小小的DIY,滿足一下我們的好奇
    作為新手,我們還不會創造,但我們會改呀,哈哈

例如點選頭像進入的Log頁面
先是這樣噠
在這裡插入圖片描述
很明顯,這個變數定義的就是頁面標題啦~
我們來改一下
在這裡插入圖片描述
注意改完程式碼一定要重新編譯哦~

這樣我們就有了基礎的微信小程式知識和基本的修改能力啦(/ω\)