開啟第一個WeChat Applet項目開發之旅
導讀
2017年01月09日，騰訊公司正式發布微信小程序。至今，市面上已經有很多小程序上線。那麼，我們如何開發出屬於自己的微信小程序呢？本期我將帶領大家開啟自己的第一個微信小程序（又稱為：微信應用號）項目開發之旅。
作者：糖果君
公眾號：WXSmallApp開發
小程序代碼結構組成
1
建立小程序項目
打開安裝成功的「微信開發者工具」，選擇「小程序項目」，跳出如下界面。
項目目錄：小程序項目開發文件存放目錄。
AppID：註冊微信小程序賬號時，系統自動分配給用戶的ID號，登陸小程序賬號可以查詢。
項目名稱：為新建的微信小程序命名。
填寫完以上信息之後，進入到小程序開發界面，主要包括四個部分：工具欄、模擬器、編輯器以及調試器。
2
小程序代碼結構組成
微信小程序代碼結構如下圖所示。
①app.js文件：幫助註冊一個微信小程序應用。
②app.json文件：幫助進行微信小程序的全局配置，包括網路請求的超時時間、頁面註冊路徑等。
③app.wxss文件：設置微信小程序全局的樣式。
.js文件——幫助開發者處理微信小程序頁面的邏輯和數據交互；
.json文件——幫助開發者配置微信小程序頁面的配置信息；
.wxml文件——展示微信小程序裡面的元素和內容；
.wxss文件——幫助開發者設置小程序頁面內元素的樣式。
⑥util.js文件（在utils文件夾內）：主要用來存放一些工具的函數，達到代碼復用的目的。
3
小程序全局配置和頁面配置
小程序配置文件包括app.json全局配置文件和***.json單個頁面配置文件。
app.json全局配置的配置選項有：Pages/tabBar/networkTimeout/debug/navigationStyle/navigationBarBackgroudColor/navigationBarTextStyle/backgroudColor/onReachBottomDistance。
***.json單個頁面配置文件的配置選項有：disableScroll+上面加粗部分的選項配置信息。
當全局配置項與單個頁面配置項出現重複現象，則單個頁面配置項覆蓋全局配置項。
開發第一個小程序
1
小程序版本介紹
微信小程序一共有五個版本：預覽版本、開發版本、體驗版本、審核版本、線上版本。
預覽版本：在開發小程序過程中，實時預覽小程序運行狀態。
開發版本：上傳小程序之後，把本地的代碼上傳一個具有版本號的一個小程序應用。擁有開發者許可權的成員可以通過小程序開發助手看到開發版本。
體驗版本：在小程序管理後台可以直接將開發版本切換成體驗版本。
審核版本：把開發版本轉化為線上版本之前需要對小程序進行審核，成為審核版本。
線上版本：通過審核的微信小程序就從審核版本變為線上版本。
2
開發第一個小程序
建立一個項目名為「WXSmallApp」的小程序。注意：不啟用模板。
Step1:創建一個名稱為app.js的文件，輸入代碼：
App({
})
可以傳入一個Object類型的參數，參數可以是生命周期鉤子、事件處理函數、全局數據等。這裡傳入一個空的參數。
Step2:創建一個名稱為app.json的文件，註冊小程序所有頁面的路徑，輸入代碼：
{
"pages":[ //list類型數據
"WXSmallApp
]
}
Step3:創建一個名稱為WXSmallApp.wxml的文件，輸入代碼：
WXSmallApp
Step4:創建一個名稱為WXSmallApp.js的文件，用以註冊一個小程序頁面，輸入代碼：
Page({
})
可以傳入一個Object類型的參數，參數可以是生命周期鉤子、事件處理函數、全局數據等。這裡傳入一個空的參數。
Step5:創建一個名稱為WXSmallApp.json的文件，用以進行頁面配置，輸入代碼：
{
}
這裡輸入空的配置對象。
Step6:創建一個名稱為WXSmallApp.wxss的文件，用以描述小程序頁面的樣式，這裡可以不進行任何設置。
在開發界面的左邊的模擬器上就可以看到如下圖所示效果。
為了便於管理小程序頁面，建立pages文件夾，把WXSmallApp.js、WXSmallApp.json、WXSmallApp.wxml、WXSmallApp.wxss四個文件放進pages文件夾中，並更改app.json文件中的路徑，如下圖所示。
到此，我們建立了第一個WXSmallApp小程序項目。
本期的分享就到這裡了，感謝您的閱覽，謝謝！
- END -
TAG:糖果亭 |