1. 程式人生 > >微信小程式(一):微信小程式申請註冊與開發流程

微信小程式(一):微信小程式申請註冊與開發流程

本文主要用於介紹微信小程式開發過程中的注意點,查閱過程請結合微信的開發者文件一同觀看。
本文基於微信小程式公測版,IDE:微信開發者工具 0.10.102800
本文件用於幫助公司內部初學者,如有感覺拖沓請見諒

AppID申請

AppID 作為開發者的身份標識,在公測階段暫不支援個人申請,僅支援 企業,政府,媒體,其他組織 四種身份,並需提供相應的證明資料。沒有 AppID 並不影響開發,只是不能在微信上除錯,故而只能在IDE中除錯。

每一個 AppID 有管理員和開發者的身份。管理員只有一個,並且不能更改;開發者對於未認證的小程式最多為10個,認證的小程式最多為20個。只能具備其一,才能在其微信上預覽。

環境搭建

附:IDE下載地址。下載後直接無腦安裝到本地即可。

1.登入

與別的IDE不同,需使用微訊號登入。這也是前文提到的需要 管理員和開發者的身份 的憑證。

Alt text

選擇本地小程式專案
Alt text

新增專案
Alt text

填寫appID,如果沒有的話,單擊無appID,會提示你部分功能受限,不用在意。填寫專案名稱和選擇專案目錄即可。勾選了 在當前目錄中建立 quick start 專案 會在你選擇的目錄下生成一個快速開發的demo程式。點選新增專案完成建立。
Alt text

2.IDE介紹

作為公測的產品,此次版本的IDE還是比較簡陋的。相信當微信小程式正式推出的時候,在IDE的使用上會有很大提升,來滿足開發者的開發要求。

第一次開啟IDE的介面如下:

Alt text

可以看見在頁面左邊的導航區域,有 編輯,除錯,專案,編輯,關閉 五個選項。我們可以在“編輯”裡可以檢視和編輯我們的程式碼,在“除錯”裡可以測試程式碼並模擬小程式在微信客戶端效果,在“專案”裡可以傳送到手機裡預覽實際效果。至於編譯和關閉,只是兩個功能按鈕。(順帶說一句,這個IDE在 Ctrl + S 的時候會自動編譯)

編輯時,功能區如下:

enter image description here

開發流程

1.目錄結構

第一次建立專案,工程目錄如下:(會生成兩個頁面並可以執行)

Alt text

可以看見程式中的檔案有四種類型。

.js : 邏輯控制,用於寫javascript程式碼。
.wxml : 頁面結構,用於寫html。當然,微信對其有一定的封裝,用的話還需要了解其標籤。
.wxss

: 樣式表文件,用於寫css。
.json : 樣式配置,符合json語法格式。用來做其作用域內的設定。

做前臺的小夥伴看到這心情一定很激動,這不就是前端程式碼嘛。

小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。

1.1 以app命名的各個檔案是整個app的全域性配置檔案,其必須放在專案的根目錄下。如下:

enter image description here

1.2 pages 目錄下,為工程中的頁面,每一個頁面對應pages下的一個資料夾。資料夾名和檔名一致,不同檔案以後綴區分(注意並不是每個檔案都是必須的)。

enter image description here

官方介紹很詳細,就不贅述了: .js , .wxml , .wxss, .json.

注意:描述頁面的這四個檔案必須具有相同的路徑與檔名。

2.元件

微信基於HTML封裝了一系列的控制元件,旨在減少大家的開發難度與工作量,請檢視 官方文件

注意:所有元件與屬性都是小寫,以連字元 - 連線

3.API

請檢視 官方文件