1. 程式人生 > >微信小程式開發初學者之入門步驟和體驗

微信小程式開發初學者之入門步驟和體驗

  在Android 專案不忙之餘,自學了微信小程式入門。常聽前輩說,做一名開發人員最重要的不是你會什麼語言, 而是在面對不會的語言和未接觸過的任務時,有著怎樣的學習力和學習邏輯。彷彿又回到了高三那一段難忘的學習階段,用了小三天時間,可以說是入了個小門。下面將自己踩得坑,和從別人的帖子裡學來的經驗,做一個總結,留給自己回憶,留給後人學習。

一、小程式是什麼。

            首先,你要對小程式的開發有一個整體的概念。

            對於小程式到底是什麼的這個問題,百度百科已經給出了一個比較親民且容易理解的答案。

Q:小程式是什麼?它有著什麼樣的功能?

A:小程式是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,使用者掃一掃或者搜一下即可開啟應用。也體現了“用完即走”的理念,使用者不用關心是否安裝太多應用的問題。應用將無處不在,隨時可用,但又無需安裝解除安裝。對於開發者而言,小程式開發門檻相對較低,難度不及APP,能夠滿足簡單的基礎應用,適合生活服務類線下商鋪以及非剛需低頻應用的轉換。小程式能夠實現訊息通知、線下掃碼、公眾號關聯等七大功能。其中,通過公眾號關聯,使用者可以實現公眾號與小程式之間相互跳轉。由於小程式不存在入口。[6]

Q:小程式可以和現有的App 打通嗎?

A:小程式可以藉助微信聯合登入,和開發者已有的App 後臺的使用者資料進行打通,但不會支援小程式和App 直接的跳轉。

Q:微信已經有了訂閱號、服務號、企業號,小程式和這三者有什麼不同?

A:小程式、訂閱號、服務號、企業號是並行的體系。

Q:外界有說法稱,小程式的推出意味著微信要做一個應用分發市場,是這樣嗎?

A:微信推出小程式,並非想要做應用分發市場,而是給一些優質服務提供一個開放的平臺。

        但從小程式的開發結構上來說,微信小程式應該屬於前端開發,其結構中的wxml、js、wxss同web開發的結構有類似的地方。


二、開發工具和開發環境

        這一部分網上有很多帖子可以查詢,官方也給出了工具下載和開發api的地址。

        微信公眾平臺給出了小程式的設計、介紹、使用、註冊、工具、資料繫結等幾乎全部功能的說明,初學者可以先去瀏覽一遍,心裡對小程式有個粗略的認識,將工具下載安裝,賬號註冊,做好一切準備之後,再來進行入門的開發學習。

三、新建專案,認識架構


        開啟工具的時候,會進入這個新建專案的頁面。

        可以看到,要新增一個新的小程式專案需要填寫三部分內容:AppID,專案名稱,專案目錄。為了能快速開發,我們先選擇 無AppID 這個選項,如果正式開發,是需要新增AppId的,關於Appid的部分可以去查詢資料。

        專案目錄,是指你的小程式的程式碼將放在哪個目錄下,你可以自己在本地建立一個資料夾,也可以在github建立一個新專案,都可以。

配置小程式

這一節,我們將介紹小程式的配置。首先,讓我們來看看專案自動生成的app.json檔案長什麼樣子。

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

其實這裡,共有五個部分可以配置,分別是pages, window, tarBar, networkTimeout和debug

pages:定義的是這個小程式由哪些頁面組成。

在以後需要新增或者減少頁面時,都需要在這裡進行設定,有幾個頁面pages陣列就有幾項。

可以看到pages是一個數組,而陣列的第一項就是小程式的初始頁面,你可以試著把logs頁面移動到最前面看看效果,這在開發的時候是一個不錯的小技巧。

還有一個技巧要分享給你的是,在我們需要新增一個新頁面的時候,沒必要傻傻的手動去建立資料夾,然後新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss這四個檔案。我們只要在 pages陣列中 新增一個你想建立的頁面,然後 Ctrl + s 儲存即可!是不是很酷?

{

  "pages":[

    "pages/logs/logs",

    "pages/index/index"

  ],

  ...

}

window: 定義的是視窗的配置資訊。

屬性型別預設值描述

navigationBarBackgroundColorHexColor#000000導航欄背景顏色,如"#000000"

navigationBarTextStyleStringwhite導航欄標題顏色,僅支援 black/white

navigationBarTitleTextStringa導航欄標題文字內容

backgroundColorHexColor#ffffff視窗的背景色

backgroundTextStyleStringdark下拉背景字型、loading 圖的樣式,僅支援 dark/light

enablePullDownRefreshBooleanfalse是否開啟下拉重新整理

tarBar: 用來定義 tabBar 的表現

tabBar 是一個數組,只能配置最少2個、最多5個 tab,tab 按陣列的順序排序。

我們可以在專案目錄下新增一個images檔案,用來存放我們的圖片檔案。

注意:目前小程式只支援網路圖片或者base64圖片,使用本地圖片需要將圖片轉為base64程式碼


networkTimeout: 用來設定各種網路請求的超時時間。

如果你不是很清楚這個networkTimeout配置有什麼作用,那麼忽略就好。這對實際開發並沒有什麼影響。

屬性型別必填說明

requestNumber否wx.request的超時時間,單位毫秒

connectSocketNumber否wx.connectSocket的超時時間,單位毫秒

uploadFileNumber否wx.uploadFile的超時時間,單位毫秒

downloadFileNumber否wx.downloadFile的超時時間,單位毫秒


小程式的主體部分,可以從圖中看出,主要有三個部分。

        1)app.js:小程式邏輯,初始化APP

        2)app.json :小程式配置,比如導航、視窗、頁面http請求跳轉等。全域性配置頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。

        3)app.wxss:公共樣式配置

前面也說了,小程式主要有四個頁面組成部分

        1)js:頁面邏輯

        2)wxml:頁面結構展示

        3)wxss:頁面樣式表

        4)json:頁面配置,配置一些頁面展示的資料

四、新增一個button

        下面讓我們來新增一個button吧

            首先,我們要告訴小程式有哪些頁面。 其次,需要設定小程式的導航欄標題,圖如上面的app.json圖中所示。


    1.首先,開啟index.wxml頁面,這個頁面現在就是被首頁tab呼叫的頁面,先不管在哪呼叫的,我們現在頁面中加三個button。小程式的頁面架構跟web頁面有些類似,wxml類似於html,從圖中可以看到,將button放到view這個佈局中,bindtab是點選事件的呼叫名,其點選效果會在對應的js頁面中被觸發。

      2.對應上圖,我們可以找到js中對應的事件觸發及所呼叫的頁面


    3.此時如果執行,點選按鈕,有可能並不會觸發頁面跳轉,而且還會報頁面不存在的錯誤,這是由於觸發的跳轉頁面的事件中所寫的目標頁面並沒有在app.json中註冊的原因,也就是這裡。


    4.按鈕或者頁面的樣式是什麼樣的,寬的扁的圓的,就解除安裝對應的wxss中就可以了。


如上所示四步,就可以寫出入門的簡單的button、text、tab等,還可以觸發事件,如果你的js很棒的話,那麼就可以進行稍微複雜的頁面和操作啦。

歡迎留言交流~